ASPNetCore MVC ModelValidation-ajax

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

 1、經過ModelValidation的方式實現

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

前端：
<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; }
    }

這裏的話就已經實現了驗證(MVC的驗證模型)。

 2、經過ajax的方式實現

 1. 經過jquery, jqueryValidate實現

前端：
<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
標記時就會出現：
 對於Model的綁定屬性是值類型時：
 MVC會自動觸發required屬性的標籤生成：data-val="true" data-val-required="The Age field is required."
 這個屬性會直接影響到jqueryvalidate的驗證的處理結果，就是沒有提示消息出來。

 對於這個問題如下兩種解決方案供參考

第一種在標籤上不使用asp-for屬性，而是直接靜態方式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屬性，對應的Model的話須要調整值類型爲:能夠null的類型， Nullable<T>或者T?的類型，這樣的話就會默認過濾掉
required屬性生成的標籤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