Question

相关问题：

我有一个ASP.NET MVC视图，呈现用户可以添加到的项目集合： -

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MySite.Models.Parent>" %>
<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true) %>
    <%: Html.HiddenFor(model => model.Id) %>
    <table>
        <thead>
            <tr>
                ...
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <% foreach (var child in Model.Children)
               {
                   Html.RenderPartial("ChildRow", child );
               } %>
        </tbody>
    </table>
    <p>
        <input type="submit" value="Save" />
        <%= Html.ActionLink<MyController>(x => x.ChildRow(), "Add another...", new { @class = "addRow" }) %>
    </p>
<% } %>

“ChildRow”部分如下： -

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MySite.Models.Child>" %>
<tr class="editor-row">
    <td>
        <%  Html.EnableClientValidation(true);
            using (Html.BeginCollectionItem("Children")) { %>
        <%: Html.HiddenFor(model => model.Id)%>
    </td>
    <td>
        <%: Html.EditorFor(model => model.Value)%>
        <%: Html.ValidationMessageFor(model => model.Value)%>
        <% } %>
    </td>
</tr>

我正在使用jQuery来抓取代表行的部分： -

$("a.addRow").live("click", function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $(this).parents("form:first").children("table:first tbody:last").append(html);
            $.validator.unobtrusive.parse("form");
        }
    });
    return false;
});

我遇到的问题是客户端验证不适用于由jQuery添加的行。从我的脚本中可以看出，我在ajax调用之后在表单上运行验证器。据我所知，问题是Html.BeginForm（）调用不在ajax部分上，因此验证属性没有被添加到输入元素。即如果我在添加行后查看标记： -

页面加载时存在的输入如下所示： -

<input name="Children[0a197c09-470c-4ab4-9eef-2bcc5f0df805].Value"
  class="text-box single-line" id="Children_0a197c09-470c-4ab4-9eef-2bcc5f0df805__Value"
  type="text" data-val-required="The Value field is required." data-val="true" value="Test"/>

通过ajax添加的输入如下所示： -

<input name="Children[aa5a21b2-90bc-4e06-aadc-1f2032a121aa].Value"
  class="text-box single-line" id="Children_aa5a21b2-90bc-4e06-aadc-1f2032a121aa__Value"
  type="text" value=""/>

显然由于表单的性质，我无法将Html.BeginForm调用移动到我的局部视图上。由于页面是通过ajax加载的，我也不能破解部分的FormContext。

我可以通过其他方式启用客户端验证吗？

修改

根据下面的counsellorben的回答，我设置了FormContext，现在属性正确呈现，但是验证仍然无法正常工作（如果我添加一个新行并将文本框留空，则应用程序通知的第一个是我的命中编辑POST操作的断点）。

我做了一些测试，并且$ .validator.unobtrusive.parse函数肯定是被调用，parseElement函数肯定被调用正确的次数表中的新输入数和“info.attachValidation（）;”行进一步向下解析功能肯定会受到打击。这就是我所拥有的。还在测试。

Answer 1

您遇到的问题是，当服务器创建新行时，不存在FormContext。必须存在FormContext才能将不显眼的验证属性添加到生成的HTML中。将以下内容添加到局部视图的顶部：

if (this.ViewContext.FormContext == null) 
{
    this.ViewContext.FormContext = new FormContext(); 
}

counsellorben

Answer 2

作为我问题第二部分的答案，显然你不能在表单上调用jquery.validate.unobtrusive.parse两次。如果表单已有验证器，则不会替换它。

要给advllorben接受的答案，因为他的位是迄今为止的难点：D

修改

哦，似乎我不是第一个找到它的人：

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Answer 3

像这些行一样添加不引人注意的东西：

1) $.validator.unobtrusive.parse($('#yourformid'));

2) var $form1 = $('#workOrderDetails');

3) if ($form1.valid()) {  //your ajax or your code comes here }

我假设您已为消息添加了验证摘要或validationmessage。

ASP.NET MVC 3使用子集合进行不显眼的jQuery客户端验证

3 个答案: