ASPNetCore MVC ModelValidation-ajax

 在提交數(shù)據(jù)時常常會在客戶端進行一次友好的驗證信息提示，常見的就是直接通過ModelValidation驗證(這種方式最快最簡單),還有些情況期望使用ajax異步方式處理以實現(xiàn)更多其他邏輯的處理。
 此篇文章主要描述在使用ajax和直接提交窗體--驗證Model時如何正確進行驗證信息的提示。

 一、通過ModelValidation的方式實現(xiàn)

這個比較簡單，沒什么好說的直接上代碼

前端：
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form>
    <div class="form-group">
        <label>Age</label>
        <input class="form-control" asp-for="Age"/>
        <span asp-validation-for="Age"></span>
    </div>
    <button type="submit" class="btn btn-primary">submit</button>
</form>

后端：
public class ValidModel
    {
       [Required(ErrorMessage ="必須填寫")]
        public long Age { get; set; }
    }

這里的話就已經(jīng)實現(xiàn)了驗證(MVC的驗證模型)。

 二、通過ajax的方式實現(xiàn)

 1. 通過jquery, jqueryValidate實現(xiàn)

前端：
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<form id="frmEdit">
    <div class="form-group">
        <label>Age</label>
        <input class="form-control" asp-for="Age" title="必須填寫" required/>
    </div>
    <button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
        $(function () {
            // for editFormOne
            $("#btnSave").click(function () {
                $("#frmEdit").validate({
                    submitHandler: function () {
                    //處理驗證成功之后的邏輯
                    }
                });
            });
        });
</script>

后端：
public class ValidModel
    {
        public long Age { get; set; }
    }

由于采用了ajax的驗證，所以這里后臺Model不再使用required屬性，
前端這里也不需要引用jquery.validate.unobtrusive.js。

2 . 異常引用：jquery.validate,jquery, jquery.validate.unobtrusive并且采用asp-for
標(biāo)記時就會出現(xiàn)：
 對于Model的綁定屬性是值類型時：
 MVC會自動觸發(fā)required屬性的標(biāo)簽生成：data-val="true" data-val-required="The Age field is required."
 這個屬性會直接影響到j(luò)queryvalidate的驗證的處理結(jié)果，就是沒有提示消息出來。

 對于這個問題以下兩種解決方案供參考

第一種在標(biāo)簽上不使用asp-for屬性，而是直接靜態(tài)方式name='xxx'.

前端：
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form id="frmEdit">
            <div class="form-group">
                <label>Age</label>
                <input class="form-control" name="Age" title="必填項" required />
            </div>
            <button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
        $(function () {
            // for editFormOne
            $("#btnSave").click(function () {
                $("#frmEdit").validate({
                    submitHandler: function () {
                    //處理驗證成功之后的邏輯
                    }
                });
            });
        });
</script>
后端：
public class ValidModel
    {
        public long Age { get; set; }
    }

第二種使用asp-for屬性，對應(yīng)的Model的話需要調(diào)整值類型為:可以null的類型， Nullable<T>或者T?的類型，這樣的話就會默認(rèn)過濾掉
required屬性生成的標(biāo)簽data*,避免了和jquery.validate.unobtrusive的沖突.

前端：
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form id="frmEdit">
            <div class="form-group">
                <label>Age</label>
                <input class="form-control" asp-for="Age" title="必填項" required />
            </div>
            <button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
        $(function () {
            // for editFormOne
            $("#btnSave").click(function () {
                $("#frmEdit").validate({
                    submitHandler: function () {
                    //處理驗證成功之后的邏輯
                    }
                });
            });
        });
</script>

后端：
public class ValidModel
    {
        public long? Age { get; set; } // public  Nullable<long> Age {get;set;} 一樣的
    }

參考鏈接

Required驗證屬性
jquery-validation-unobtrusive
jqueryvalidation