我需要一些使用ajax进行验证的帮助。我的登录对话框可以正常运行,但它不能处理成功或验证错误的情况。我不确定我实际创建ajax帖子的方式或位置(我对jquery / Ajax没有经验)
这是我的看法 @model Models.LoginModel
@{
ViewBag.Title = "Log in";
}
<hgroup class="title">
@* <h1>@ViewBag.Title.</h1>*@
</hgroup>
<section id="loginForm" style="margin-left: 20px; border-width: 0px;">
@using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Log in Form</legend>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</li>
<li>
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
</li>
</ol>
</fieldset>
@*<p>
@Html.ActionLink("Register", "Register") if you don't have an account.
</p>*@
}
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dlgLogin").dialog({
modal: true,
autoOpen: true,
draggable: true,
resizable: true,
title: "Login",
buttons: {
Login: function () {
$("#login_form").submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
这是我的控制器中的loginpost方法。
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Login(LoginModel model, string returnUrl)
{
if (ModelState.IsValid && WebSecurity.Login(model.UserName, model.Password, persistCookie: model.RememberMe))
{
//return RedirectToLocal(returnUrl);
return Json(new { success = true });
}
// If we got this far, something failed, redisplay form
ModelState.AddModelError("", "The user name or password provided is incorrect.");
return PartialView("LoginDialog",model);
}
答案 0 :(得分:0)
首先,在您的表单声明中,这需要是:
new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "loginForm" }
因为它不知道在提交时要替换什么。
顺便说一句:恕我直言,我认为你的结果应该是相同的,即如果你要返回视图,返回视图,如果你正在处理JSON,只处理JSON。如果您只想在成功时关闭对话框,请创建一个名为Success的视图,在成功时返回该视图并植入必要的JavaScript以在该视图中执行此操作。
返回不同类型的视图只意味着客户端上的一大堆额外流语句。这有意义吗?
希望这有帮助。
答案 1 :(得分:0)
吨
我自己解决了我的问题。这是代码。是否可以将.ajax函数放在创建对话框的同一脚本中?
<div id="dlgLogin">
@model Models.LoginModel
@{
ViewBag.Title = "Log in";
}
<hgroup class="title">
@* <h1>@ViewBag.Title.</h1>*@
</hgroup>
<section id="loginForm" style="margin-left: 20px; border-width: 0px;">
@using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Log in Form</legend>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</li>
<li>
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
</li>
</ol>
<input id="submit" type="submit" value="Log in" style="display:none"/>
</fieldset>
@*<p>
@Html.ActionLink("Register", "Register") if you don't have an account.
</p>*@
}
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dlgLogin").dialog({
modal: true,
autoOpen: true,
draggable: true,
resizable: true,
title: "Login",
buttons: {
Login: function () {
$("#login_form").submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
<script>
$(function () {
$('#login_form').on('submit', function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
// We have a JSON object in case of success
$('#dlgLogin').dialog("close");
} else {
// We have the partial with errors in case of failure
// so all we have to do is update the DOM
$('#dlgLogin').html(result);
}
}
});
return false;
});
});
</script>