我有一个包含多个表单的页面,每个表单都是部分的.我想发布每个部分提交.如果有错误,我希望验证错误显示在部分作为主页面的一部分,即如果有错误,我不想只看到它自己的页面上的部分.我是否正确说这种行为只能用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") }); }
解决方法
是的,你说这种行为只有ajax帖子是正确的.
您当前的脚本存在一些问题,这意味着您将无法获得所需的结果.
首先,您的按钮是一个提交按钮,这意味着除了取消默认事件之外,它将执行除ajax调用之外的正常提交(通过添加return false;作为脚本中的最后一行代码).但是,将按钮类型更改为type =“button”会更容易
<button id="loginButton" type="button" class="button button--primary">Login</button>
ajax调用现在将更新现有页面,但是它会在现有的< form>内添加返回的部分.导致嵌套表单的元素是无效的HTML并且不受支持.更改您的html以将主视图表单包装在另一个元素中
<div id="LoginFormContainer"> @using (Html.BeginForm("Login",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 } },
最后,您的渲染动态内容使客户端验证不适用于返回的表单.假设您的属性具有验证属性(例如,Userame属性上的[required]属性),您需要在加载内容后重新解析验证器
var form = $('#LoginForm'); .... } else { $("#LoginFormContainer").html(result); // reparse validator form.data('validator',null); $.validator.unobtrusive.parse(form); }
您注意到页面上有多个表单,在这种情况下,您的ajax选项应该是
data: $('#LoginForm').serialize(),
或者如果你声明var form = $(‘#LoginForm’);根据上面的代码片段,然后数据: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”)]装饰
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。