Hi asp777,
Check the below example.
For jQuery Ajax refer below article.
For validation refer below article.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnLogin").on("click", function () {
var rememberMe = $('#chkRememberMe').prop('checked');
if (rememberMe) {
var userId = $('#txtUserId').val();
var password = $('#txtPassword').val();
// Make Ajax call to controller and validate user inputs.
// If valid userid and password set cookies in Ajax Success function.
$.cookie('userId', userId, { expires: 1 });
$.cookie('password', password, { expires: 1 });
$.cookie('rememberMe', true, { expires: 1 });
}
else {
$.cookie('userId', null);
$.cookie('password', null);
$.cookie('rememberMe', null);
}
});
var remember = $.cookie('rememberMe');
if (remember == 'true') {
var userid = $.cookie('userId');
$('#txtUserId').attr("value", userid);
var password = $.cookie('password');
$('#txtPassword').attr("value", password);
}
$("#txtUserId").on("input", function () {
var remember = $.cookie('rememberMe');
if (remember == 'true') {
var userId = $.cookie('userId');
var uId = $("#txtUserId").val();
if (userId == uId) {
var password = $.cookie('password');
$('#txtPassword').val(password);
} else {
$('#txtPassword').val('');
}
}
});
});
</script>
</head>
<body>
@using (Html.BeginForm())
{
<table>
<tr>
<td>User Id</td>
<td>@Html.TextBox("userId", "", new { id = "txtUserId", required = "required" })</td>
</tr>
<tr>
<td>Password</td>
<td>@Html.TextBox("password", "", new { id = "txtPassword", type = "password", required = "required" })</td>
</tr>
<tr><td colspan="2" align="center"><input type="checkbox" id="chkRememberMe" /><label>Remember Me</label></td></tr>
<tr><td colspan="2" align="center"><input type="submit" id="btnLogin" value="Login" /></td></tr>
</table>
}
</body>
</html>
