asp mvc - what is the best way to dynamically add data controls

Scenario: I have the开发者_开发百科 following structure; Group (parent) -> Item (child).

• A Group can have many items.
• both group and item only have one editable field (string)

In other parent/child table data I have used a partial view to display both the parent and child data - with the child data being a standard MVC index (i.e. list of items with edit/detials option next to each one).

However in this scenario, the parent only has one field and so does the child, so I do not want to open a separate view in order to create/edit new child records.

What I want to be able to do is effectively be able to edit all of the associated child data without having to open up a new view, perhaps having an add button that dynamically adds another row.

So my thoughts I could (somehow) write some javascript to create a textbox each time you click on a button to add a new row, and then somehow in the controller save the data when completed.

Anyone done something similar to this, and can point me in the right direction?

For client side data manipulation I use the micro-template function from John Resig, and create a script that will update the dom. Here's John's sample:

<script type="text/html" id="item_tmpl">
  <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
    <div class="grid_1 alpha right">
      <img class="righted" src="<%=profile_image_url%>"/>
    </div>
    <div class="grid_6 omega contents">
      <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
  </div>
</script>

You then can maintain a object or array with the new data that you'll serialize to a hidden field and post to the server. John's example is pretty straight forward and should get you going.

If you need more, go to Dave Ward's Encosia as he a post regarding this.