Ajax 在 MVC AsP.net 中发布表单（验证）？答案

【问题标题】：Ajax post a form (validation) in MVC AsP.net?Ajax 在 MVC AsP.net 中发布表单（验证）？
【发布时间】：2014-02-27 17:17:14
【问题描述】：

所以我有一个页面，上面有一些表格，其中一个表格是具有三个功能的地址。另存为新，更新和删除。我想使用 form.submit() 在客户端和服务器端触发 MVC 验证，但我不想刷新整个页面。

所以这就是我想使用简单的 form.submit() 来收集元素并将其作为模型发送到 ASP.net MVC 控制器并根据我在模型上的属性处理验证并使用处理 JSON 响应以仅更新受影响区域的回调。

我知道我可以使用 jQuery 创建 AJAX 发布请求，但我必须处理所有事情，即绑定到视图模型、验证和创建请求本身。无论如何我可以充分利用这两种方法吗？

【问题讨论】：

标签： jquery ajax validation asp.net-mvc-5 asp.net-mvc-5.1

【解决方案1】：

也不要忘记在Controller的Post Method中检查

if(ModelState.IsValid)

因为如果您在任何浏览器中使用 ctr+shift+i 并且您将删除 @Html.EditorFor(model => model.Price) 客户端验证将不会验证此属性，客户端验证也不会验证隐藏字段。

【讨论】：

【解决方案2】：

在 MVC 中，使用 DataAnnotations 属性验证模型数据后，您已经完成了服务器端验证，然后您可以使用 jQuery.validation library 在客户端进行验证。

在这里您可以使用 Ajax.BeginForm 帖子，您可以在其中使用 DataAnnotations 验证和 ajax 帖子。

DataAnnotations 属性

   public class Movie {
    public int ID { get; set; }

    [Required]
    public string Title { get; set; }

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Required]
    public string Genre { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

jQuery.validation 库

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

带有验证的表单

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
   {
        <fieldset>
            <legend>Movie</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.ReleaseDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ReleaseDate)
                @Html.ValidationMessageFor(model => model.ReleaseDate)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Genre)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Genre)
                @Html.ValidationMessageFor(model => model.Genre)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Price)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>
            <div class="editor-label">
        @Html.LabelFor(model => model.Rating)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)
    </div>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

资源：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

【讨论】：