MVC验证11-对复杂类型使用jQuery异步验证

一时失言乱红尘 2021-10-15 10:34 167阅读 0赞

本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证。与本篇相关的"兄弟篇"包括：

[MVC验证08-jQuery异步验证][MVC_08-jQuery]     
[MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证][MVC_09-_MVC_Ajax.BeginForm]     
[MVC验证10-到底用哪种方式实现客户端服务端双重异步验证][MVC_10-]

准备工作

□ js方面：  
1、jquery的某个版本  
2、jquery.validate.js  
3、jquery.validate.unobtrusive.js

□ Web.config：  
  <appSettings>  
      ...  
    <add key="ClientValidationEnabled" value="true" />  
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />  
  </appSettings>

□ View Model

public class User

{

[Required]

[StringLength(8, MinimumLength = 3)]

[ValidUserName(ErrorMessage = "用户名必须是darren")]

[Display(Name = "用户名")]

public string UserName { get; set; }

[Required]

[StringLength(8, MinimumLength = 3)]

[Display(Name = "别名")]

public string DisplayName { get; set; }

}

public class ValidationModel

{

public User User { get; set; }

public List<User>  Users { get; set; }

}

□ 自定义特性

public class ValidUserNameAttribute : ValidationAttribute

{

public override bool IsValid(object value)

{

//同时满足2个条件返回true

return (value != null && value.ToString() == "darren");

}

HomeController无论是否验证成功都返回部分视图

using System.Web.Mvc;

using ValidComplex.Models;

namespace ValidComplex.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View(new ValidationModel());

}

public ActionResult ValidUser(ValidationModel validationModel)

{

return PartialView(!ModelState.IsValid ? "_Form" : "_Success", validationModel);

}

Index.cshtml视图

注意：  
※ 从控制器返回的部分视图被加载到Index.cshtml视图中id为FormContainer的div中。$("\#FormContainer").html(data);  
※ 表单提交不应该这样写：$("form").on("submit", function (event)，因为对动态生成内容无效。

@model ValidComplex.Models.ValidationModel

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@DateTime.Now: Index.cshtml视图被渲染

@Html.Partial("_Form")

</div>

@section scripts

{

$(function() {

$('#FormContainer').on("submit", "form",function(event){

//$("form").on("submit", function (event) {

event.preventDefault();

var form = $(this);

$.ajax({

url: form.attr('action'),

type: "POST",

data: form.serialize(),

success: function (data) {

$("#FormContainer").html(data);

$.validator.unobtrusive.parse("form");

error: function (jqXhr, textStatus, errorThrown) {

alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");

});

</script>

}

\_Form.cshtml部分视图

展开@model ValidComplex.Models.ValidationModel
    
    @DateTime.Now: Partial/_Form.cshtml视图被渲染
    <hr/>
    <style type="text/css">
        p {
            margin: 3px;
        }
    
        h6 {
            margin: 3px;
        }
    </style>
    
    @using (Html.BeginForm("ValidUser", "Home"))
    {   
        <h6>输入用户信息</h6>        
        <p>
            @Html.LabelFor(m => m.User.UserName):
            @Html.EditorFor(m => m.User.UserName)
            @Html.ValidationMessageFor(m => m.User.UserName)
        </p>   
        <p>
            @Html.LabelFor(m => m.User.DisplayName):
            @Html.EditorFor(m => m.User.DisplayName)
            @Html.ValidationMessageFor(m => m.User.DisplayName)
        </p>    
        <h6>输入多个用户信息</h6>       
        for (var i = 0; i <= 1; i++)
        {
            <h6>用户 @i</h6>    
            <p>
                @Html.LabelFor(m => m.Users[i].UserName):
                @Html.EditorFor(m => m.Users[i].UserName)
                @Html.ValidationMessageFor(m => m.Users[i].UserName)
            </p>   
            <p>
                @Html.LabelFor(m => m.Users[i].DisplayName):
                @Html.EditorFor(m => m.Users[i].DisplayName)
                @Html.ValidationMessageFor(m => m.Users[i].DisplayName)
            </p>
        }    
        <input type="submit" value="提交" />
    }

\_Success.cshtml部分视图

@model ValidComplex.Models.ValidationModel

<p>

用户名: '@Model.User.UserName'<br />

别名: '@Model.User.DisplayName'<br />

用户1的用户名: '@Model.Users[0].UserName'<br />

用户1的别名: '@Model.Users[0].DisplayName'<br />

用户2的用户名: '@Model.Users[1].UserName'<br />

用户2的别名: '@Model.Users[1].DisplayName'

</p>

效果：

没有填写，提交，报错：

[![1不填][1]][1_1]

字数长度不符合，UserName不符合，提交，报错：

[![3各种验证不通过][3]][3_3]

自定义特性，通过服务端验证后报错：

[![2自定义特性服务端验证][2]][2_2]

填写正确，提交，通过：

[![4通过][4]][4_4]

总结

可见，如果要对包含复杂类型属性(类属性、集合属性等)的View Model进行验证，只需要对简单类(比如这里的User)设置各种验证规则。

转载于:https://www.cnblogs.com/darrenji/p/3586921.html

[MVC_08-jQuery]: http://www.cnblogs.com/darrenji/p/3581653.html
[MVC_09-_MVC_Ajax.BeginForm]: http://www.cnblogs.com/darrenji/p/3583016.html
[MVC_10-]: http://www.cnblogs.com/darrenji/p/3585644.html
[1]: https://images0.cnblogs.com/blog/417212/201403/071744535964398.png
[1_1]: /images/20211015/cbef8494925341f5a843dd75a18847b7.png
[3]: https://images0.cnblogs.com/blog/417212/201403/071744559404780.png
[3_3]: /images/20211015/130715b1f725445ba732752e31c85f5d.png
[2]: https://images0.cnblogs.com/blog/417212/201403/071744578313937.png
[2_2]: /images/20211015/8657945897714abba4816bd2ad445d7f.png
[4]: https://images0.cnblogs.com/blog/417212/201403/071744595038392.png
[4_4]: /images/20211015/7f63b90bde0041dea56a390e5aca97e2.png