1

最近、再現性を保証するためのjTemplatesの使用や、優れたライブラリであるjQueryなど、Ajaxフォームのデータ処理について紹介されました。

しかし、私は少し混乱しています。フォームとユーザーの対話では、Ajax呼び出しを使用して、純粋なHTMLマークアップを処理します。したがって、フォームの読み込み時にフォームデータをバインドする場合は、jQuery/JSを使用してAjaxでバインドする必要があります。 これは私には良くないようです。 onLoadの初期化はサーバーでのみ行われるべきだと思います。ただし、後でAjaxとのやり取りが簡単になるように、フォームのマークアップを公開する方法を見つける必要があります。

たとえば、サーバー上のリストをバインドしたい場合、後でAjaxでアイテムを追加/削除できるように、どのコントロールがこれを処理できますか？

私の主張を明確にしたいと思います。助けてくれてありがとう！

4

2 に答える 2

1

これを実現する最も簡単な方法は、更新パネルを使用することです。

リピーターを更新パネル内に配置した場合、削除ポストバックが実行されると、更新パネルはその更新パネル内にあるものだけを更新します。

したがって、リピーターを使用して行を作成し、削除ボタンを追加して、データベースからその行を削除します。

ajaxなしで動作させ（ページ全体のポストバック）、次に更新パネルを追加すると、箱から出してすぐに動作するはずです。

例については、http：//www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspxを参照してください。

よろしく

ギャビン

于 2009-01-20T14:08:55.067 に答える
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>

いくつかのデータをオンロードしてバインドするだけです

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

そして最も重要なのはクライアント側です。mTamplate jquery プラグインによって生成されたリピーターに同一のコンテンツ tamplaete を作成できます。

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

}

jquery で html 要素にアクセスできるようにします (ID またはクラスによって)。そしてそれのために行きます。

詳細west-wind ソースへのリンクがいくつかあり、幅広い例があります..

于 2009-01-20T06:36:31.423 に答える