带有子集合的ASP.NET MVC 3不引人注目的jQuery客户端验证 [英] ASP.NET MVC 3 unobtrusive jQuery client-side validation with child collections
问题描述
相关问题:
- ASP.NET MVC 3: Generate unobtrusive validation when BeginForm is on the layout
- ASP.NET MVC 3 unobtrusive client-side validation with dynamic content
我有一个ASP.NET MVC视图，该视图呈现了用户可以添加到的项目的集合:-
I have an ASP.NET MVC view rendering a collection of items which the user can add to:-
<%@ 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"部分如下:-
The "ChildRow" partial is as follows:-
<%@ 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来抓取表示行的部分内容:-
I'm using jQuery to grab the partial representing the row:-
$("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部分上，因此验证属性未添加到输入元素中.即如果我在添加一行后查看标记:-
The problem I'm having is that the client-side validation doesn't work on rows that get added by jQuery. As you can see from my script, I'm running the validator over the form after the ajax call. As far as I can tell from looking around, the problem is that the Html.BeginForm() call isn't on the ajax partial, and as such the validation attributes are not being added to the input elements. i.e. if I view the markup after adding a row:-
页面加载时存在的输入如下:-
Inputs that existed at page load look like:-
<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添加的输入看起来像:-
Inputs that were added via ajax look like:-
<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.
Obviously due to the nature of the form I cannot move the Html.BeginForm call onto my partial view. As the page is being loaded via ajax, neither can I hack the FormContext of my partial.
还有另一种可以启用客户端验证的方法吗?
Is there another way I can enable client-side validation?
编辑
根据下面的Advisorlorben的回答，我设置了FormContext，现在属性可以正确显示，但是验证仍然无法正常工作(如果我添加新行并将文本框留空，则应用程序首先注意到的是点击了修改POST"操作的断点).
As per counsellorben's answer below, I set the FormContext and now the attributes are rendering correctly, however the validation still isn't working (if I add a new row and leave the textbox blank, the first the application notices is when my breakpoint on the Edit POST action is hit).
我做了一些测试，并且$ .validator.unobtrusive.parse函数被肯定地被调用，parseElement函数被确定地被正确地调用了表中新的输入数量，以及"info.attachValidation();"行再往下，解析功能肯定会被击中.据我所知.仍在测试中.
I did some testing, and the $.validator.unobtrusive.parse function is definitely being called, the parseElement function is definitely being called the correct number of times for the new number of inputs in the table, and the line "info.attachValidation();" further down the parse function is definitely being hit. That's as far as I've got. Still testing.
推荐答案
您遇到的问题是，服务器创建新行时不存在FormContext. FormContext必须存在，以便将非干扰性的验证属性添加到生成的HTML中.在部分视图的顶部添加以下内容:
The problem you are experiencing is that no FormContext exists when the server is creating your new row. A FormContext must exist for unobtrusive validation attributes to be added to the generated HTML. Add the following to the top of your partial view:
if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
counsellorben
counsellorben
这篇关于带有子集合的ASP.NET MVC 3不引人注目的jQuery客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
