How to replace all id attributes of a child collection of complex types using jQuery in ASP.net MVC

Here's my situation:

I'm writing an ASP.net MVC 1 website and I have a create/edit form that uses the default model binding to parse the form into a strongly typed complex object.

The object I'm posting has a child collection of another complex type and the way I format my id's for the model binder is as follows:

<div class="childContainer" >
   <!-- There's one of these for each property for each child collection item -->
   <%= Html.TextBox("ChildCollectionName[0].ChildPropertyName", /* blah blah */ ) %>
   <%= Html.TextBox("ChildCollectionName[0].OtherChildPropertyName", /* blah blah */ ) %>
   <!-- ... -->
</div>

This gets rendered as

<div class="childContainer" >
    <input id="ChildCollectionName[0]_ChildPropertyName" ... />
    <input id="ChildCollectionName[0]_OtherChildPropertyName" ... />
...
</div>
<div class="childContainer" >
    <input id="ChildCollectionName[1]_ChildPropertyName" ... />
    <input id="ChildCollectionName[1]_OtherChildPropertyName" ... />
...
</div>

For each entry in the chlid collection.

This collection is dynamically created in the form us开发者_运维技巧ing jQuery, so entries can be added, removed etc. and whenever there's an operation on the collection I need to update the indexes so that it's bound correctly on the server side.

What's the best way to replace all the html input id's when I'm updating the index within the child e.g.

replace all [*] --> [N] where N is the correct index.

using jQuery / JavaScript ?

I have something coded now, but its buggy and I think there is a simpler solution.

Also, if you have an easier way to identify the child collection I'll take any advice on that as well.

Thanx!

I've done a similar thing where I was using a dynamic list of Model objects in my View. I used a table structure for my form but I'm sure you could apply similar logic.

I used buttons that would add/remove table rows. You have to maintain numerical order when submitting your form so id's should be 0,1,2,3 and cant be 0,2,3,4 etc. My design was simpler where you could only add an item to the bottom of the list and only remove the last item in the list. Therefore I could maintain the id's in order.

You might find some of the code useful when manipulating your dynamic form.

$('.add').live('click', function()
{
    var addRowId = $('#myTable tr').length;
    var internalId = addRowId - 1; //subtract -1 for header row

    //clone the last row
    var row = $('#ft tr:last').clone(false);

    //modify the input id and name values
    row.find(':input')
        .attr('id', function() { return 
            $(this).attr('id').replace(/\[[\d+]\]/g, '[' + internalId + ']');
        })
        .attr('name', function() { return 
            $(this).attr('name').replace(/\[[\d+]\]/g, '[' + internalId + ']');
        });

    //add the new row
    $('#ft tr:last').after(row);

    return false;
});

Note: I found a change when upgrading to MVC 2 with generation of id's has changed...

ASP.NET-MVC2 Preview 1: Are There Any Breaking Changes?

Instead of manipulating the DOM elements each time the collection changes, you can keep an array of your elements in a JavaScript variable and directly work with that array when you need to add/remove an element. And then re-render the input elements using the array.