使用 JQuery 在客户端动态添加 ASP.NET 中继器项答案

【问题标题】：Dynamically Adding ASP.NET Repeater Item on Client-Side using JQuery使用 JQuery 在客户端动态添加 ASP.NET 中继器项
【发布时间】：2013-12-19 13:44:26
【问题描述】：

我有以下中继器：

<asp:Repeater ID="_List" runat="server" DataSource="<%# GetList() %>">
    <HeaderTemplate>
<table class="dataList">
    <tr>
        <th>Name</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tbody class="list-item">
        <tr>
            <td runat="server">
                <asp:DropDownList ID="_Name" runat="server" DataSource='<%# GetEmployeeList() %>'
                    DataTextField="Name" DataValueField="Value" />        
            </td>
        </tr>
    </tbody>
    </ItemTemplate>
    <FooterTemplate>
    <tr>
        <td colspan="3"></td>
        <td>
            <a id="_Add">Add</a>
        </td>
    </tr>
</table>

当用户单击“_Add”按钮时，我想在客户端使用 JQuery 动态添加新行。

我能够成功地使用 JQuery clone() 方法来做到这一点。在添加新项目（例如 name="$ctl01$_Name" 和 id="_Name_0" ...等）后，我还成功地重新同步中继器内的 ID 以保持顺序

但是，当用户提交表单时，ASP.NET 无法识别使用 JQuery 从客户端动态添加的项目。

即该列表最初有 2 个项目。我又添加了 3 个项目。而不是 Repeater.Items.Count 总共得到 5 个项目，我在回发时只得到 2 个项目。

任何想法我错过了什么？？

提前谢谢大家！

【问题讨论】：

ASP.Net 需要将来自客户端的数据与来自服务器的数据进行匹配。因此，如果您在客户端添加新项目，但不会在服务器端创建新项目，那么服务器端的转发器只会忽略来自客户端的数据。
@SergeyLitvinov，感谢您的快速回复。如何同步客户端和服务器中继器以匹配？
这是个好问题。您能否显示用于服务器端转发器的代码？喜欢你使用 DataSource 还是手动创建它们等等
@SergeyLitvinov，这没什么花哨的；当中继器调用 DataSource= 时，我只返回了一个 List 对象。当在 Page_Load（如果不是 IsPostback）上调用 this.DataBind() 时，转发器将绑定到此方法。

标签： jquery asp.net webforms repeater

【解决方案1】：

嗯，在客户端使用 JQuery 做到这一点并不容易。 Repeaters 在他的 ViewState 中保存项目的数量，然后重新创建它们。这个行数很难更新，但在这种情况下，它将验证控件。对于新控件，它会抛出异常，因为它们没有在页面中注册。管理此验证的属性是 EnableEventValidation ，但将其更改为 false 并不是一个好习惯......

您可以在服务器端执行此操作，然后它应该可以工作。您可以将 Add 按钮设置为 LinkButton，并在服务器端对其进行处理以为 GetList 源创建新项目，然后您可以尝试再次调用 DataBind，这样它将为新项目显示多行。这不是很好，因为每个 Add 都会向服务器发出新请求，但在中继器的情况下很难实现这样的事情。 GridView 也会出现同样的问题，因为它还在 ViewState 中存储信息。

【讨论】：

【解决方案2】：

在我看来，如果您使用的是 asp:repeater ，最好的方法是使用 asp:UpdatePanel 并在代码隐藏中执行您想要的操作...

当我想用 jquery/js 做你需要的事情时，我不使用 asp:repeater，我使用带有 js 的基本 html 和带有 js 触发回发的 HiddenField，或者直接使用通用处理程序和手动 AJAX

【讨论】：

如果您需要一个快速简单的解决方案，UpdatePanel 方法可以正常工作。如果您想花更多时间在上面，您应该使用客户端模型绑定框架（如 knockout.js）进行调查