在jquery回发上,如果模型状态无效,我想显示使用jquery非侵入式验证的验证错误消息。我创建了一个示例应用程序。应用程序中的视图模型如下
public class CityModel { public int Id { get; set; } [Display(Name = "City")] [Required(ErrorMessage = "City is required")] public string City { get; set; } }
控制器具有以下动作方法
public ActionResult City() { var cities = GetCities(); return View(cities); } [HttpPost] public ActionResult SaveCity(CityModel cityModel) { if (ModelState.IsValid) { //Save City return null; } else { return View(); } } public List<CityModel> GetCities() { var citiesList = new List<CityModel> { new CityModel() {Id = 1, City = "London"}, new CityModel() {Id = 2, City = "New York"} }; return citiesList; }
视图具有以下标记
@model List<CityModel> <h2>Cities</h2> @Html.ValidationSummary(true) @using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "frmSite", name = "frmSite" })) { @Html.EditorForModel() <input type="submit" name="Sumbit" onclick=" SaveCity(); return false; " /> } <script> function SaveCity() { $.ajax({ type: "POST", url: "/Home/SaveCity", contentType: "application/html; charset=utf-8", data: { Id: $('.cityId').val(), City: $('.cityName').val() }, success: function (data) { } }); } </script>
和编辑器模板看起来像
@model CityModel <table class="table"> <tr> <td> @Html.TextBoxFor(x => x.Id, new {@class = "cityId"}) </td> </tr> <tr> <td> @Html.TextBoxFor(x => x.City, null, new {@class = "cityName"}) @Html.ValidationMessageFor(x => x.City) </td> </tr> </table>
我已经检查了<script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script>页面中包含的内容,并且<add key="UnobtrusiveJavaScriptEnabled" value="true" />存在于Web配置文件中
<script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
您正在通过ajax调用信息,因此需要使用以下命令手动调用$form.validate();并测试结果$form.valid():
$form.validate();
$form.valid()
function SaveCity() { $.validator.unobtrusive.parse($form); $form.validate(); if ($form.valid()) { $.ajax({ type: "POST", url: "/Home/SaveCity", contentType:"application/json; charset=utf-8", data: { Id: $('.cityId').val(), City: $('.cityName').val() }, success: function (data) { } }); } }
如果纯粹是客户端,则错误将包含在jquery验证对象中,$form.validate().errorList但是您将必须执行一些手动处理,类似于我在下面提到的内容。
$form.validate().errorList
如果您希望返回服务器端模型状态,则可以在控制器中将模型状态错误添加为键值对,并将其作为json返回。
您可以使用以下方法显示消息。
这将找到所有带有模型状态错误键的验证消息,并将红色错误消息添加到其中。请注意,您可能需要对此进行调整,以针对某个键显示许多错误消息。
public doValidation(e) { if (e.data != null) { $.each(e.data, function (key, value) { $errorSpan = $("span[data-valmsg-for='" + key + "']"); $errorSpan.html("<span style='color:red'>" + value + "</span>"); $errorSpan.show(); }); } }
更新
这是上面的改编版,因此您可以从jQuery非干扰性错误中手动对其进行解析:
$.each($form.validate().errorList, function (key, value) { $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']"); $errorSpan.html("<span style='color:red'>" + value.message + "</span>"); $errorSpan.show(); });
只需在else语句中弹出它,就可以了。:)