The table row does not update properly using MVC Ajax

advertisements

I have a table with each row as an ascx. This control consists of a Ajax form which includes cells which might have inputs. Here is the ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.Dinner>" %>

    <%  using (Ajax.BeginForm("ViewAll", new AjaxOptions
        {UpdateTargetId = "Dinner" + Model.DinnerID, InsertionMode = InsertionMode.InsertAfter, OnSuccess = "jsfunction"
        })) {%>

            <%= Html.Hidden("ID", Model.DinnerID)%>
            <td><input type="submit" value="Save" /></td>
            <td><strong>'<%=Model.Title%>'</strong></td>
            <td><%=Model.EventDate.ToShortTimeString()%> on <%=Model.EventDate.ToShortDateString()%></td>
            <td><%=Model.Address%></td>
            <td><%= Html.TextBox("HostedBy", Model.HostedBy)%></td>
            <td><%= Html.ActionLink("Edit", "Edit", new { id = Model.DinnerID })%></td>

    <%} %>

After a submit, I complete my processing and send back the updated ascx to replace the existing one. However this ascx gets constructed a little different than the original which causes it to render incorrectly

This is what the original ascx looks like in FF:

<tr id="Dinner5">
<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.insertAfter, updateTargetId: 'Dinner5', onSuccess: Function.createDelegate(this, jsfunction) });" method="post" action="/NerdDinner/Dinners/ViewAll"/>
<input id="ID" type="hidden" value="5" name="ID"/>
<td>
</td>
<td>
</td>
<td>12:00 AM on 2/2/2010</td>
<td>ZSA2</td>
<td>
</td>
<td>
</td>
</tr>

This is what the returned control (ajaxContext.get_data()) looks like:

<tr id="Dinner1">
<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'Dinner1' });" method="post" action="/NerdDinner/Dinners/ViewAll">
<input id="ID" type="hidden" value="1" name="ID"/>
<td>
</td>
<td>
</td>
<td>12:00 AM on 1/1/2010</td>
<td>ZSA1</td>
<td class="red-back">
</td>
<td>
</td>
</form>
</tr>

Notice the latter does not contain any tds directly under tr but the form encloses all tds and so nothing is rendered. In IE, I get an error saying 'htmlfile: Unknown runtime error' in MicrosoftAjax.js.

I'm sure I'm missing something basic here. Any help would be appreciated. Thanks.


A few things. This code from your original snippet doesn't look quite right as the input is outside of the form. If you notice the end of the form tag is self closing in this case.

<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.insertAfter, updateTargetId: 'Dinner5', onSuccess: Function.createDelegate(this, jsfunction) });" method="post" action="/NerdDinner/Dinners/ViewAll"/>
<input id="ID" type="hidden" value="5" name="ID"/>

In your code below it appears as though you're explicitly telling the form to encapsulate all of the td's, note the positioning of the curly braces for the BeginForm method.

<%  using (Ajax.BeginForm("ViewAll", new AjaxOptions
    {UpdateTargetId = "Dinner" + Model.DinnerID, InsertionMode = InsertionMode.InsertAfter, OnSuccess = "jsfunction"
    })) {%>

        <%= Html.Hidden("ID", Model.DinnerID)%>
        <td><input type="submit" value="Save" /></td>
        <td><strong>'<%=Model.Title%>'</strong></td>
        <td><%=Model.EventDate.ToShortTimeString()%> on <%=Model.EventDate.ToShortDateString()%></td>
        <td><%=Model.Address%></td>
        <td><%= Html.TextBox("HostedBy", Model.HostedBy)%></td>
        <td><%= Html.ActionLink("Edit", "Edit", new { id = Model.DinnerID })%></td>

<%} %>

I'm not quite sure what you're trying to accomplish but hopefully this gets you started in the right direction.

How about using a nested table? This should help it in Firefox.

<td>
<%  using (Ajax.BeginForm("ViewAll", new AjaxOptions
    {UpdateTargetId = "Dinner" + Model.DinnerID, InsertionMode = InsertionMode.InsertAfter, OnSuccess = "jsfunction"
    })) {%>

        <%= Html.Hidden("ID", Model.DinnerID)%>
        <table><tr>
        <td><input type="submit" value="Save" /></td>
        <td><strong>'<%=Model.Title%>'</strong></td>
        <td><%=Model.EventDate.ToShortTimeString()%> on <%=Model.EventDate.ToShortDateString()%></td>
        <td><%=Model.Address%></td>
        <td><%= Html.TextBox("HostedBy", Model.HostedBy)%></td>
        <td><%= Html.ActionLink("Edit", "Edit", new { id = Model.DinnerID })%></td>
        </tr>
        </table>
<%} %>
</td>