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的构造与原始版本略有不同，导致它呈现错误

这就是原始的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>

注意后者不直接在tr下包含任何tds，但是表单包含所有tds，因此不会呈现任何内容。在IE中，我在MicrosoftAjax.js中收到错误“htmlfile：Unknown runtime error”。

我确定我错过了一些基本的东西。任何帮助，将不胜感激。感谢。

Answer 1

一些事情。原始代码段中的此代码看起来不太正确，因为输入位于表单之外。如果您注意到在这种情况下表单标记的结尾是自动关闭的。

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

Answer 2

有趣 - 几分钟前我遇到了这个问题。

显然，IE8不喜欢更新元素，只有div。

this blog post让我走上了正确的道路，我只使用了div作为我的updatetargetid，而不是我最初使用的。它现在很难看，但至少它有效。我需要弄清楚如何使它看起来更好一点。

希望这会有所帮助！

表行未使用MVC Ajax正确更新

2 个答案: