Replacing a <tr> using ASP.MVC Ajax

Question

I have the following ajax form tag:

<% using (Ajax.BeginForm("Edit", new { controller="Properties", id=Model.Id }, new AjaxOptions() { UpdateTargetId="item-"+Model.Id }, new { id="property-form", name="property-form" })) {%>

When the form is submitted, the controller returns a partial with a full row to be inserted into the table (the same partial is also used to render the table in the first place).

The idea is that after the user edits an item, the item's row in the table will be replaced with the updated version from the partial. When I point UpdateTargetId to a <div> element it seems to work fine, but when I point it to a <tr> element, it doesn't.

Any help would be greatly appreciated.

Answer 1

I'm assuming that your partial actually renders the entire row. In that case, the default replacement semantics won't work for the <tr> element since you'll be inserting a new row into the existing row and get something like:

<tr><tr>...new contents</tr></tr>

You might want to look at changing the InsertionMode (I forget the other potential options) or having your partial generate just the row contents, i.e., the <td> elements instead of the row itself.

Answer 2

I ended up changing my approach. I changed the controller to return the values of the object in jason and had the view's js function simply update the content of the table row with the new values. Seems to work fine now.

Answer 3

Rich Strahl has an excellent post on how to do Client Templating with jQuery.