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

Question

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?

Answer 1

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.