Question

My problem:

I can’t get Data Annotations Client Validation to work with a List in my viewdata class.

The skinny:

In my view data class I have a List.

public class FriendsViewData
{
    public List<Person> people { get; set; }
}

I have all the properties of the class Person as required using Data Annotations.

public class Person
{
    [Required(ErrorMessage="First Name is required")]
    public string FirstName { get; set; }
}

In the View I loop the List like this:
…

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) {%>

<%
   for(int i=0; i < Model.people.Count; i++)
   {%>
       <div>
         <%= Html.TextBox(string.Format("people[{0}].FirstName",i), Model.people[i].FirstName)%>
         <%= Html.ValidationMessage(string.Format("people[{0}].FirstName", i))%>
       </div>
<% } %>

<input type="submit" value="Submit" />

<% } %>

Generated HTML:

<div>
    <input id="people_0__FirstName" name="people[0].FirstName" type="text" value="Name0" />
    <span class="field-validation-valid" id="form0_people_0__FirstName_validationMessage"></span>     
</div>

<div>
    <input id="people_1__FirstName" name="people[1].FirstName" type="text" value="Name1" />
    <span class="field-validation-valid" id="form0_people_1__FirstName_validationMessage"></span>     
</div>

<div>
    <input id="people_2__FirstName" name="people[2].FirstName" type="text" value="Name2" />
    <span class="field-validation-valid" id="form0_people_2__FirstName_validationMessage"></span>     
</div>

Result:

Didn’t work at all.

Other things I’ve tried:

Tried using these HTML Helper methods in the view instead:

    <div>
        <%= Html.TextBoxFor(model => model.people[i].FirstName) %>
        <%= Html.ValidationMessageFor(model => model.people[i].FirstName) %>
    </div>

Generated output:

       <div>  
           <input id="FirstName" name="FirstName" type="text" value="Name0" />  
           <span class="field-validation-valid" id="form0_FirstName_validationMessage"></span>  
       </div>  

       <div>  
           <input id="FirstName" name="FirstName" type="text" value="Name1" />  
           <span class="field-validation-valid" id="form0_FirstName_validationMessage"></span>  
       </div>  

       <div>  
           <input id="FirstName" name="FirstName" type="text" value="Name2" />  
           <span class="field-validation-valid" id="form0_FirstName_validationMessage"></span>  
       </div> 

Result:

Interestingly, when I trigger a validation on the first textbox, it fires simultaneously for all of the textboxes. The rest of the textboxes do not trigger validation at all.

Note all generated id and names for the textboxes and their corresponding error text span element, are all identical.

Does any know how to use Client Validation with a List in the view data, supporting ModelBinding?

Thanks!

Answer 1

Brad Wilson from the ASP.Net team answered my same question in the ASP.Net forums.

  <div>  
       <%= Html.TextBoxFor(model => model.people[i].FirstName) %>  
       <%= Html.ValidationMessageFor(model => model.people[i].FirstName) %>  
  </div>  

This is the correct way to do it, but it’s broken right now, and will be fixed in the next drop.

http://forums.asp.net/t/1518900.aspx