My login page contains two tab.One for LogIn and another for SignUp. In my LogInController,I created three action method as shown in below section.
[HttpGet]
[ActionName("LogIn")]
public ActionResult LogIn()
{
return View();
}
[HttpPost]
[ActionName("LogIn")]
public ActionResult LogIn(string Email, string Password)
{
//Some code
return RedirectToAction("LogIn", "LogIn");
}
[HttpPost]
[ActionName("SignUp")]
public ActionResult SignUp(string Email,string Password)
{
//Some Code
return RedirectToAction("SignUpWizard", "SignUpWizard");
}
My view call this Action Method using AJAX.My View and AJAX call look like this.
<html>
<head>
<title>Login</title>
<link href="~/Content/css/main.css" rel="stylesheet" />
<link href="~/Content/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
<script src="~/Content/js/jquery.js"></script>
<script src="~/ViewModel/LoginViewModel.js"></script>
</head>
<body>
<nav class="navbar navbar-custom" role="navigation">
<div class="container-fluid">
<h2 class="text-center t-size-change">Login</h2>
</div>
<!-- /.container-fluid -->
</nav>
<div class="container m-t-150">
<div class="row">
<div class="col-md-12">
<div class="login-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified nav-tabs-custom" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Login</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Sign up for free</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active custom-tab" id="home">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="email" placeholder="Email Address" class="form-control" name="Email" id="txtLogInEmail" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" name="Password" id="txtLogInPassword" required>
</div>
<input type="button" value="Login to Tucan Rotas" class="btn btn-success btn-custom" id="btnLogIn" />
<p class="text-center p-10"><a href="#">Forgot your password?</a></p>
</div>
</div>
</div>
<div class="tab-pane custom-tab" id="profile">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="email" placeholder="Email Address" class="form-control" name="Email" id="txtSignUpEmail" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" name="Password" id="txtSignUpPassword" required>
</div>
<input type="button" id="btnSignUp" class="btn btn-success btn-custom" value="Sign up for free" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#btnSignUp').click(function () {
$.ajax({
url:'@Url.Action("SignUp", "LogIn")',
method:"POST",
data: { Email: $('#txtSignUpEmail').val(), password: $('#txtSignUpPassword').val() }
});
});
$('#btnLogIn').click(function () {
$.ajax({
url: '@Url.Action("LogIn", "LogIn")',
method: "POST",
data: { Email: $('#txtLogInEmail').val(), password: $('#txtLogInPassword').val() }
});
});
});
</script>
</body>
</html>
When I enter EmailID and password in SignUp OR LogIn and click SignUp Or LogIn button, Every Time It call LogIn() method decorate with HttpGet Attribute.
However This same code working properly in different System.
