how to reset the name attribute of a input control after a jquery action

Question

i have an html table inside a form in an asp.net mvc view. I am using the tablesorter jquery plugin as well.

Here is the table code (simplified for the example)

 <table id=managersTable>
 <thead>
     <tr>
           <th>Manager</th><th>Remove</th>
     </tr>
 </thead>
 <tbody>
 <tr>
      <td>Manager 1<input type='hidden' name='updater.managers[0].Id' value=2313 /></td>
 <tr>
      <td>Manager 2<input type='hidden' name='updater.managers[1].Id' value=3233/></td>
      <td><input type='button' class=removeButtonManager value='Remove' name='remove' /></td>
 </tr>
 </tbody>

so as you can see, there is a column with text and a second column with a button. I have it hooked up so when you click on the button it removed the row from the html table using this code:

    $(document).ready(function() {
        $(".removeButtonManager").live("click", function(event) {
            var row = $(this).closest("tr").get(0);
            $(this).closest("tr").remove();
            $("#managersTable").trigger("update");
            $("#managersTable").trigger("appendCache");
        });
     });

Everything works perfectly fine except one issue. When i click on a "remove" button it removed the row but the issue then is that the index for

name='updater.managers[0].Id'

is now off and it looks like in the latest version of asp.net mvc binding if you dont have your elements indexed property (0,1,2,etc . .) it doesn't bind.

so if i never delete a row it works perfectly as its 0,1,2 originally but if i delete the first row then i only have list (1,2 . .) and asp.net mvc wont bind this object.

so i am trying to figure out how i can reset the [] index in each of the elements after i remove a row so no matter if a remove any row, it always gives me a continuous list starting from 0.

Answer 1

I think you'll have to loop through all the elements and fix the ids. Something like this should work

$(document).ready(function() {
    $(".removeButtonManager").live("click", function(event) {
        var row = $(this).closest("tr").get(0);
        $(this).closest("tr").remove();
        $("#managersTable").trigger("update");
        $("#managersTable").trigger("appendCache");
        $("#managersTable").find("input[type=hidden]").each(function(i){
           //this is the current input we're looping through
           //i is the index
           $(this).attr('name', 'updater.managers['+i+'].Id');
        });
    });
 });

Take a look at the docs for each (http://docs.jquery.com/Utilities/jQuery.each#objectcallback) if it doesn't work right away, I could have mixed something up. Hope that helps

Answer 2

It is also possible to add a hidden input field like

<input type='hidden' name='updater.managers.Index' value="0" />

for each of the list, which is posted back to model binder as a list of indexes in the form of [0,2,3...]. And the collection model binder will iterate through those indexes instead of "trying" continuous index.

Value of .Index field can be either numbers or strings.

For more details, refer to the last part of this blog post: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx