Asp.net MVC. Duplicate name in EditorTemplate or in @Html.Action / Partial

Question

After searching a lot on this problem, i'm askin help to the community :

I'm doing somthing like that in a View (The problem is the same if i'm using @Html.Action or a PartialView

@for(int i= 0; i< Model.Contacts.Count(); i++)
{
     @Html.EditorFor(m => m.Contacts[i] , "AccreditationContact" )
}

I have a classic EditorTemplate or PartialView like that

    @model FrontOffice.Models.AccreditationStepSevenModel

    <div>
        @Html.LabelFor(m => m.Nom)
        @Html.TextBoxFor(m => m.Nom)
        @Html.ValidationMessageFor(m => m.Nom)
    </div>
[There is a lots of other fields here] 

The html generated for the field "Nom" looks like something like that :

    <input id="Contacts_0__Nom" name="Contacts[0].Nom" type="text" value="Doe" > 
    <input id="Contacts_1__Nom" name="Contacts[1].Nom" type="text" value="Doe1" >
    <input id="Contacts_2__Nom" name="Contacts[2].Nom" type="text" value="Doe2" >

No problem here when i submit my form, all fields are correctly binded into an Array by the native ModelBinder in my controller

Now i would like to dynamically in javascript generate another AccreditationStepSevenModel, i used a $load with Jquery. The problem is that the html generated does not increment the names then i have multiple fields with the same names and my ModelBinder does not work anymore...

i thought about renaming the names in javascript, and this would work, but is there a better solution ?

Thanks for your help !

Answer 1

The default ModelBinder will only work, if the index is in unbroken sequence of integers, starting at 0 and increasing by 1 for each element. To support Non-Sequential Indices, you have to spicify an indexer e.g.

<input type="hidden" name="Contacts.Index" value="0" />     
<input id="Contacts_0__Nom" name="Contacts[0].Nom" type="text" value="Doe" >

See this blog post to get the idea: Editing a variable length list, ASP.NET MVC 2-style

Answer 2

I've found how to make client side validation works :

After the ajax call we need to reset validators like that : $("#addAccredBtn").click(function () {

            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) {
                    $("#accreds").append(html);

                    var form = $("#myform");
                    form.removeData("validator");
                    form.removeData("unobtrusiveValidation");
                    $.validator.unobtrusive.parse("#myform");
                }
            });


            return false;
        });