У меня есть форма входа в систему с модальным окном «Забыли пароль». После нажатия кнопки «Сбросить пароль» в модальном окне «Забыли пароль» происходит проверка, а затем вызывается AJAX метод JSONResults. Модальное окно подтверждения «Сброс пароля» должно отображаться на странице входа в систему, если результат JSONResult выполнен успешно, но он выглядит как sh и затем исчезает.
Вот мой HTML:
<div class="container">
<div class="auth-wrapper">
<div class="auth-description bg-cover bg-center dark-overlay dark-overlay-2" style="background-image: url('/Vendor/assets/img/auth.jpg')">
<div class="auth-description-inner">
<i class="flaticon-chili"></i>
<h2>Welcome Back!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="auth-form">
<h2>Log in</h2>
@using (Html.BeginForm("Login", "Entry", FormMethod.Post, new { id = "loginform" })) //Creates an HTML FORM TAG ESENTIALLY for [HttpPost]
{
<div class="form-group">
<input type="text" class="form-control form-control-light" placeholder="Email" name="email" id="email" value="@Model._email">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-light" placeholder="Password" name="password" id="password" value="@Model._password">
</div>
<a href="#" data-toggle="modal" data-target="#forgotPwd">Forgot Password?</a>
<button type="submit" class="btn-custom primary">Login</button>
<p class="m-5">Don't have an account? <a href="@Url.Action("Register", "Entry")">Register</a> </p>
}
</div>
</div>
<!-- forgot password content -->
<div id="forgotPwd" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Recover Password</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<form id="forgotPwdForm" role="form">
<div class="form-group">
<input type="text" class="form-control form-control-light" placeholder="Email" name="_email" id="_email" value="">
</div>
<button type="submit" class="btn btn-primary" onclick="ResetPwd()">Reset Password</button>
</form>
</div>
</div> <!-- Modal Content end -->
</div> <!-- Modal Dialog end -->
</div> <!-- Modal Div End -->
<!-- forgot password modal end -->
<!-- forgot password confirmation content -->
<div id="forgotPwdConf" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Recover Password Confirmation</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<p>An email has been sent. Please click on the link in the email in order to reset your password.</p>
</div>
</div> <!--Modal Content end -->
</div> <!--Modal Dialog end -->
</div> <!-- forgot password confirmation end -->
</div>
Вот мой Javascript
<script>
$(document).ready(function () {
var LC_ResultFail = @Html.Raw(Json.Encode(TempData["Result_Fail"]));
var LC_ResetPwd = @Html.Raw(Json.Encode(TempData["Reset_Pwd"]));
if (LC_ResultFail != "" && LC_ResultFail != null)
{
toastr.error(LC_ResultFail);
}
if (LC_ResetPwd != "" && LC_ResetPwd != null)
{
toastr.error(LC_ResetPwd);
}
// Toastr options
toastr.options = {
"debug": false,
"newestOnTop": false,
"positionClass": "toast-top-center",
"closeButton": true,
"debug": false,
"toastClass": "animated fadeInDown",
};
//Add custom method to validate email format
$.validator.addMethod("MEmailAddressCheck", function (value) {
var reg = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,99})$/;
if (reg.test(value) == false) {
return false;
}
return true;
});
$("#loginform").validate({
rules: {
email: {
required: true,
MEmailAddressCheck: true
},
password: {
required: true
},
},
messages: {
email: {
required: "Email address is required",
MEmailAddressCheck: "Invalid email address"
},
password: {
required: "Password is required"
}
},
submitHandler: function (form) {
form.submit();
},
});
});
var ResetPwd = function () {
$.validator.addMethod("MEmailAddressCheck", function (value) {
var reg = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,99})$/;
if (reg.test(value) == false) {
return false;
}
return true;
});
$("#forgotPwdForm").validate({
rules: {
_email: {
required: true,
MEmailAddressCheck: true
},
},
messages: {
_email: {
required: "Email address is required",
MEmailAddressCheck: "Invalid email address"
},
}
});
if ($("#forgotPwdForm").valid()) {
var Email = document.getElementById("_email").value;
$.ajax({
type: "POST",
url: "/Entry/forgotPwd",
data: { Email: Email },
success: function (result) {
$("#forgotPwd").modal("hide");
$("#forgotPwdConf").modal("show");
}
})
}
}
</script>
Вот мои методы контроллера:
public ActionResult Login()
{
MDL_Login model = new MDL_Login();
return View(model);
}
[HttpPost]
public ActionResult Login(MDL_Login PR_Client)
{
// Insert validation method here
if (ModelState.IsValid)
{
return RedirectToAction("Index", "Home");
}
else
{
TempData["Result_Fail"] = "Invalid email address and password";
PR_Client._email = null;
//Redirects to login and displays error message
return View(PR_Client);
}
}
public JsonResult forgotPwd(string Email)
{
// Process logic to generate the reset password email
return Json(new { status = "Success" });
}