MVC3 客户端验证不适用于 Ajax.BeginForm 表单

Question

我在局部视图中有以下表格

@model PartDetail
@using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId =       "update_panel"}))
{
    <h3>New @Model.PartType</h3>
    <p> Serial Number: 
        <strong>
            @Html.EditorFor(model => model.SerialNumber)
            @Html.ValidationMessageFor(model => model.SerialNumber)
        </strong>
    </p>
    <p> Name: 
        <strong>
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </strong>
    </p>
    ...... more relatively boiler plate code here......
    <p>
        <input type="submit" class="btn primary" value="Save Part"/>
    </p>
}

有一个模型

public class PartDetail
{
    public string DateCreated { get; set; }
    [StringLength(255, MinimumLength = 3)]
    public string Description { get; set; }
    public Guid ID { get; set; }
    public string IsActive { get; set; }
    public string Manufacturer { get; set; }
    public IEnumerable<SelectListItem> Manufacturers { get; set; }
    [StringLength(100, MinimumLength = 3)]
    public string Name { get; set; }
    public string PartType { get; set; }
    [Required]
    [StringLength(100, MinimumLength = 3)]
    public string SerialNumber { get; set; }
}

我参考（在我的部分视图的父视图中）

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.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> 

没有任何东西得到验证。如果我在“序列号”文本框中不输入任何内容并按“提交”，它就会毫无问题地将其保存到数据库中。

Answer 1

尝试向 AjaxOptions 添加一个 OnBegin 回调，这应该可以工作。

function validateForm() { 
   return $('form').validate().form(); 
} 

@using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId = "update_panel", OnBegin = "validateForm" }))
...

如果这对您不起作用，替代解决方案可能是使用 jQuery 提交表单。这将是我的首选解决方案。

<div id="result"></div> 

@using (Html.BeginForm()) 
{ 
<h3>New @Model.PartType</h3>
<p>Serial Number: 
    <strong>
        @Html.EditorFor(model => model.SerialNumber)
        @Html.ValidationMessageFor(model => model.SerialNumber)
        </strong>
    </p>
    <p> Name: 
        <strong>
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </strong>
    </p>
    ...... more relatively boiler plate code here......
    <p>
        <input type="submit" class="btn primary" value="Save Part"/>
    </p>

    }

jQuery/JS 函数提交表单

    $(function () { 
        $('form').submit(function () { 

        $.validator.unobtrusive.parse($('form'));  //added

            if ($(this).valid()) { 
                $.ajax({ 
                    url: this.action, 
                    type: this.method, 
                    data: $(this).serialize(), 
                    success: function (result) { 
                        $('#result').html(result); 
                    } 
                }); 
            } 
            return false; 
        }); 
    });

Answer 2

在这种情况下，包括进程在内的 javascript 文件的顺序很重要。您包含这些文件的顺序应该是

jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js

当我尝试重新订购时，它对我来说效果很好。试试看。

Answer 3

检查解决方案/项目的根 Web.config。是否包含以下几行？

  <appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
  </appSettings>

不是，添加它们。

Answer 4

您需要稍微修改您的控制器操作以在 Ajax 请求中进行验证 您捕获部分视图的 RenderHtml 并对其应用您的验证，例如

    //In Controller 



     public string Create(PartDetail model)
        {
            string RenderHtml = RenderPartialViewToString("PartailViewName", model);
            return RenderHtml;
        }



protected string RenderPartialViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

您必须将 ViewName 和 Model 传递给 RenderPartialViewToString 方法。它将返回您在模型中应用的带有验证的视图。