Related questions:
- ASP.NET MVC 3: Generate unobtrusive validation when BeginForm is on the layout
- ASP.NET MVC 3 unobtrusive client-side validation with dynamic content
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>
<% } %>
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>
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;
});
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"/>
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=""/>
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?
EDIT
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).
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.
