客户端验证 mvc 3.0 中动态生成的表单元素

Question

我已经阅读了很多关于如何在 mvc 3.0 中验证动态生成的内容，例如 xhalent 所写的 , 但我不明白如何在我的代码中使用它。我的意思是它不适用于动态生成的表单元素。 这是我的模型类：

 public class Person
{
    [Required]
    public string Name { get; set; }

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

    public IList<Address> Addresses{get;set;}

    public Person()
    {
        Addresses = new List<Address>()
                            {
                                new Address(){Street="1"},new Address(){Street="2"}
                            };
    }


}

public class Address
{
    [Required(ErrorMessage="Error")]
    public string Street { get; set; }
}

这是表单开始显示的视图：

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"
    type="text/javascript"></script>

<% using (Html.BeginForm())
       { %>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Person</legend>
        <%: Html.EditorForModel() %>
            <div class="phone-numbers">
                <%
           foreach (var item in Model.Addresses)
       {

            %>
            <%Html.RenderPartial("EditorTemplates/Addresses", item);%>
            <%} %>
        </div>

    <div style="padding: 10px 0px 10px 0px">
        <a id="add-phone" href="javascript:void(0);">Add another</a>
    </div>
    <input type="submit" value="Create" />
</fieldset>
<% } %>
</div>

  $().ready(function () {
             $("#add-phone").click(function () {
                 $.ajax({
                     url: '<%: Url.Action("GetNewAddress") %>',
                     success: function (data) {
                         $(".phone-numbers").append(data);                   
                    }
                });
            });
        });

这是地址的部分视图：

<div style="padding: 5px 0px 5px 0px" name="editorRow" id="editorRow">
        <%: Html.LabelFor(m => m.Street) %>
        <%: Html.EditorFor(m => m.Street)%>
        <%:Html.ValidationMessageFor(m=>m.Street) %>
    </div>

Answer 1

首先，如果您是局部视图，请将其添加到顶部

<%
 if (Html.ViewContext.FormContext == null)
    {
        Html.ViewContext.FormContext = new FormContext();
    }
%>

这应该为生成的内容添加不显眼的 data-val-* 验证属性。并且在你的ajax下载成功函数中，最后插入this

 $().ready(function () {
             $("#add-phone").click(function () {
                 $.ajax({
                     url: '<%: Url.Action("GetNewAddress") %>',
                     success: function (data) {
                         $(".phone-numbers").append(data);      

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

                    }
                });
            });
        });

这一次它应该自动解析下载的内容并对其应用验证

我查看了您的项目，发现动态验证不起作用的原因。实际上，您在那里遇到的问题比验证还多。首先，您用于呈现地址的技术不正确。这样，您生成的所有输入都具有相同的 id 和 name 值。这就是验证器无法区分动态添加的内容和之前的内容的原因，它认为所有输入都是相同的，并根据第一条街道验证所有街道。此外，如果您将要在服务器上创建的内容发布，asp.net mvc 模型绑定器无法绑定街道数组 - 与验证器无法工作的原因相同。查看this 文章以在客户端正确生成列表内容。对于以后的动态注入，您可以更改控制器代码，如

public ActionResult GetNewAddress(string id)
        {
            ViewData.TemplateInfo.HtmlFieldPrefix = string.Format("[{0}]", id);
            return View("EditorTemplates/Addresses", new Address());
        }

从客户端传递正确的 id 取决于您 :)。

另外，您没有正确使用 EditorTemplates，它们应该与 Html.DisplayFor() 一起使用，您不必手动指定它们的名称。阅读更多关于它们的信息，网上有几十篇文章