Строка таблицы не обновляется корректно с помощью MVC Ajax

Question

У меня есть таблица с каждой строкой в ​​виде ascx. Этот элемент управления состоит из формы Ajax, которая включает ячейки, которые могут иметь входные данные. Вот 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>

    <%} %>

После отправки я завершаю свою обработку и отправляю обратно обновленный ascx для замены существующего. Однако этот ascx сконструирован немного иначе, чем оригинал, что приводит к неправильной визуализации

Вот как выглядит оригинальный ascx в 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>

Вот как выглядит возвращаемый элемент управления (ajaxContext.get_data ()):

<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>

Обратите внимание, что последний не содержит tds непосредственно под tr, но форма содержит все tds, поэтому ничего не отображается. В IE я получаю сообщение об ошибке «htmlfile: неизвестная ошибка времени выполнения» в MicrosoftAjax.js.

Я уверен, что мне здесь чего-то не хватает. Любая помощь будет оценена. Спасибо.

Answer 1

Интересно - я столкнулся с этой ТОЧНОЙ проблемой всего несколько минут назад.

Судя по всему, IE8 не любит обновлять элементы, только div.

это сообщение в блоге дало мне правильный путь, и я просто использовал div в качестве своего updatetargetid вместо того, который я использовал изначально. сейчас это некрасиво, но по крайней мере это работает. мне нужно выяснить, как сделать так, чтобы это выглядело немного лучше.

надеюсь, это поможет некоторым!

Answer 2

Несколько вещей. Этот код из вашего исходного фрагмента выглядит не совсем правильно, так как ввод за пределами формы. Если вы заметили, что конец тега формы в этом случае самозакрывающийся.

<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, обратите внимание на расположение фигурных скобок для метода BeginForm.

<%  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>

<%} %>

Я не совсем уверен, чего вы пытаетесь достичь, но, надеюсь, это поможет вам начать в правильном направлении.

Как насчет использования вложенной таблицы? Это должно помочь в 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>