1

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

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

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

我希望我的观点很清楚。谢谢您的帮助！

4

2 回答 2

1

@Rex 做你的例子的方法很简单。做一些中继器控制

                                <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;">ספק:&nbsp;<%# Eval("Supplier.Group.GroupName") %></td>
                                        <td style = "width:200px;">איש קשר:&nbsp;<%# Eval("Supplier.Profile.ProfileData.FullName")%></td>
                                        <td>מחיר:&nbsp;
                                        <%--כדי שהולדיאציה תבוצע כיאות לשדה צריך להיות שם ומזהה זהים אבל ייחודיים--%>
                                        <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>

只是绑定onload一些数据

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

最重要的是客户端。您可以为转发器制作一些相同的内容模板，模板由 mTamplate jquery 插件生成。

    <script type="text/html" id="suppliers_tmpl">   
<tr style = "padding:10px;" class = "supplier" tag = '<#= ID #>' id = 'supplier_<#= ID #>'>
    <td style = "width:200px;">ספק:&nbsp;<#= Supplier #></td>
    <td style = "width:200px;">איש קשר:&nbsp;<#= Contact #></td>
    <td>מחיר:&nbsp;
    <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 或类）。去吧。

更多信息west-wind 那里你可以得到一些指向源的链接，你有很多例子..

于 2009-01-20T06:36:31.423 回答
1

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

如果您将转发器放在更新面板中，当您的删除回发被触发时，更新面板只会刷新该更新面板中的内容。

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

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

以http://www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspx为例。

问候

加文

于 2009-01-20T14:08:55.067 回答