Question

I have a following table using MVC that shows number of items the user has.

 <table border = "1" id="tblItems">
            <%
                var itemnum = 1;
                foreach (var item in Model.Items)
            {%>

                <tr>
                    <td colspan="2" bgcolor="Silver"><strong>Item#<%=itemnum%></strong></td>
                    <td><%=Html.ActionLink("Delete", "DeleteItem", "Item", new { id = item.ID })%></td>

                </tr>
                <tr>
                    <td><strong>Name:</strong></td>
                    <td><%=Html.TextBox("ItemName_" + itemnum, item.Name)%></td>
                </tr>
                <tr>
                    <td><strong>Description:</strong></td>
                    <td><%=Html.TextBox("ItemDescription_" + itemnum, item.Description)%></td>
                </tr>


                <%itemnum++;
           } %>
        </table>

I will have a button that will Add New Item that will dynamically add identical structure.

Also, How would I assign a unique ID to each of the input controls?
In my controller I need to loop through total number of items and get a value from each input control by Request.Form.Get(“Name_” + i);

Any ideas on what is the best way to do this using JQuery?

Thanks for all the suggestions!

Answer 1

You can use jQuery to duplicate the last row:

$("#tblItems tr:last").clone().appendTo("#tblItems");

But that will carry over your inputs with the same names as the last row, not a great out-of-the-box solution. You can add some extensive jQuery manipulation to re-name the inputs, or, as Dan Diplo pointed out, there are some jQuery extensions that can do this for you.