我有一个包含多个表单的页面,每个表单都是部分的。我想发布每个部分提交。如果有错误,我希望验证错误在部分中显示为主页面的一部分,即如果有错误,我不想在其自己的页面上看到部分错误。我是否正确地说这种行为只能用ajax帖子?如何在没有ajax帖子的情况下返回模型状态错误,只是一个普通的表单帖子?
修改 仍然看到它的部分页面
偏好 -
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" }))
{
@Html.ValidationMessage("InvalidUserNamePassword")
<fieldset class="fieldset">
<div>
<label for="form-field-user_id">User ID</label>
<span>
@Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text", @id = "form-field-user_id"})
</span>
</div>
</fieldset>
<div class="form-field__button">
<button id="loginButton" type="submit" class="button button--primary">Login</button>
</div>
}
<script>
$('#loginButton').click(function () {
$.ajax({
type: "POST",
url: '@Url.Action("Login", "Account")',
data: $('form').serialize(),
success: function (result) {
if (result.redirectTo) {
window.location.href = result.redirectTo;
} else {
$("#LoginForm").html(result);
}
},
error: function () {
$("#LoginForm").html(result);
}
});
});
</script>
控制器 -
[HttpPost]
public ActionResult Login(LoginModel model)
{
if (!ModelState.IsValid)
{
return PartialView("~/Views/Account/_Login.cshtml", model);
}
return Json(new { redirectTo = Url.Action("Index", "Profile") });
}
答案 0 :(得分:5)
是的,你说这种行为只能通过ajax帖子才是正确的。
您当前的脚本存在一些问题,这意味着您无法获得所需的结果。
首先,您的按钮是一个提交按钮,这意味着除了取消默认事件(通过添加return false;
作为脚本中的最后一行代码)之外,它将执行除ajax调用之外的正常提交。但是,将按钮类型更改为type="button"
<button id="loginButton" type="button" class="button button--primary">Login</button>
ajax调用现在将更新现有页面,但是它会在现有<form>
元素中添加返回的部分,从而导致嵌套表单无效html且不受支持。更改你的html以将主视图表单包装在另一个元素中
<div id="LoginFormContainer">
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" }))
{
....
<button id="loginButton" type="button" class="button button--primary">Login</button>
}
</div>
然后修改脚本以更新外部元素的html
success: function (result) {
if (result.redirectTo) {
window.location.href = result.redirectTo;
} else {
$("#LoginFormContainer").html(result); // modify
}
},
最后,您的渲染动态内容因此客户端验证将不适用于返回的表单。假设您的属性具有验证属性(例如[Required]
属性上的Userame
属性),则需要在加载内容后重新解析验证器
var form = $('#LoginForm');
....
} else {
$("#LoginFormContainer").html(result);
// reparse validator
form.data('validator', null);
$.validator.unobtrusive.parse(form);
}
您注意到页面上有多个表单,在这种情况下,您的ajax选项应该是
data: $('#LoginForm').serialize(),
或根据上述代码段声明var form = $('#LoginForm');
,然后data: form.serialize(),
以确保您序列化正确的表单。
附注:没有必要更改文本框的id
属性(默认情况下它为id=Username"
,您只需使用
@Html.LabelFor(x => x.UserName, "User ID")
@Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text" })
该商家的或仅@Html.LabelFor(x => x.UserName)
饰有[Display(Name = "User ID")]