检索表单数据的最佳策略是什么？ 客户端ajax/服务器

Question

最近，我了解了 Ajax 表单数据处理，包括使用 jTemplates 来保证一定的可重复性和 jQuery（一个很棒的库）。

但我有点困惑。 对于表单用户交互，我使用 Ajax 调用并处理纯 HTML 标记。 因此，如果我想在加载表单时绑定表单数据，我需要通过 jQuery/JS 使用 Ajax 来完成此操作。这对我来说似乎不太好。 我认为 onLoad 初始化应该只发生在服务器上。 然而，我需要找到某种方法来公开表单标记，以便以后的 Ajax 交互变得简单。

例如，如果我想在服务器上绑定一些列表，什么控件可以以某种方式处理这个问题，以便我以后可以使用 Ajax 添加/删除项目？

我希望我已经表达清楚了我的观点。 谢谢您的帮助！

Answer 1

@雷克斯
做你的例子的方法很简单。
制作一些中继器控件

                                <table id="suppliers" >
                                <tbody>
                            <asp:Repeater ID = "rptSuppliers" runat = "server">
                                <ItemTemplate>
                                    <tr style = "padding:10px;" class = "supplier" tag = '<%# Eval("ID") %>' id = 'supplier_<%# Eval("ID") %>'>
                                        <td style = "width:200px;">ספק: <%# Eval("Supplier.Group.GroupName") %></td>
                                        <td style = "width:200px;">איש קשר: <%# Eval("Supplier.Profile.ProfileData.FullName")%></td>
                                        <td>מחיר: 
                                        <%--כדי שהולדיאציה תבוצע כיאות לשדה צריך להיות שם ומזהה זהים אבל ייחודיים--%>
                                        <input class = "required price" name ="price<%# Eval("Supplier.ID") %>" id = "price<%# Eval("Supplier.ID") %>"  type="text" value = '<%# Eval("Price","{0:n2}") %>' min ="0"  style ="width:60px;"/>
                                        <input class ="supplier_id" type ="hidden" value = '<%# Eval("Supplier.ID") %>' />
                                        </td>
                                        <td style = "padding-right:10px;">
                                        <img src ="../../Images/remove40_32x32.gif" height ="16" width = "16" title = 'הסר' style = "float:right;" id = "sremove"
                                        onclick = "removeClick(this)"
                                        onmouseout = "removeOut(this)"
                                         onmouseover = "removeOver(this)" />
                                         </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>

                                                    </tbody>
                            </table>

只是绑定加载一些数据

        rptSuppliers.DataSource = product.Suppliers;
    rptSuppliers.DataBind();

，最重要的是客户端。
您可以制作一些相同的内容 tamplaete 到中继器，该模板是由 mTamplate jquery 插件生成的。

    <script type="text/html" id="suppliers_tmpl">   
<tr style = "padding:10px;" class = "supplier" tag = '<#= ID #>' id = 'supplier_<#= ID #>'>
    <td style = "width:200px;">ספק: <#= Supplier #></td>
    <td style = "width:200px;">איש קשר: <#= Contact #></td>
    <td>מחיר: 
    <input class = "required price" name ="price<#= SupplierID #>" id = "price<#= SupplierID #>" type="text" value = '<#= Price #>' min ="0" style ="width:60px;"/>
    <input class ="supplier_id"  type ="hidden" value = '<#= SupplierID #>'  />
    </td>
    <td style = "padding-right:10px;"><img src ="../../Images/remove40_32x32.gif" height ="16" width = "16" title = 'הסר' style = "float:right;" id = "sremove"
        onclick = "removeClick(this)"
        onmouseout = "removeOut(this)"
        onmouseover = "removeOver(this)" />
    </td>
</tr>
</script>

然后，如果您想将此模板附加到您的表中

function UpdatesupplierItem(supplier) {
// Retrieve the Item template
var template = $("#suppliers_tmpl").html();
// Parse the template and merge stock data into it
var html = parseTemplate(template, supplier);
// Create jQuery object from gen'd html
var newItem = $(html);

var item_id = "supplier_" + supplier.SupplierID;
//נוסיף פריט רק במידה ואיננו קיים
var origItem = $("#" + item_id);
if (origItem.length < 1)
    newItem.appendTo("#suppliers tbody");
else
    origItem.after(newItem).remove();
return newItem;

}，

请让您的 html 元素可供 jquery 访问（通过 id 或类）。
并努力去做。

更多信息 西风
在那里你可以得到一些来源的链接并且你有广泛的例子..

Answer 2

实现此目的的最简单方法是使用更新面板。

如果您将中继器放入更新面板中，则当您的删除回发被触发时，更新面板将仅刷新该更新面板内的内容。

因此，使用中继器构建行，添加删除按钮，然后从数据库中删除该行。

如果你让它在没有ajax的情况下工作（整个页面回发），然后添加更新面板，它“应该”直接开箱即用。

看一下 http://www.asp.net/ajax/ Documentation/live/Tutorials/CreatingPageUpdatePanel.aspx 为例。

问候

加文