Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Christian Wenz
Kontrol ReorderList di Toolkit Kontrol AJAX menyediakan daftar yang dapat diurutkan ulang oleh pengguna melalui seret dan letakkan. Setiap kali daftar diurutkan ulang, postback akan menginformasikan server perubahan.
Gambaran Umum
ReorderList
Kontrol di Toolkit Kontrol AJAX menyediakan daftar yang dapat disusun ulang oleh pengguna melalui seret dan letakkan. Setiap kali daftar diurutkan ulang, postback akan menginformasikan server perubahan.
Langkah-langkah
Ada beberapa kemungkinan sumber data untuk kontrol.ReorderList
Salah satunya adalah menggunakan XmlDataSource
kontrol:
<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">
<Data>
<acronym>
<letter char="A" description="Asynchronous" />
<letter char="J" description="JavaScript" />
<letter char="A" description="And" />
<letter char="X" description="XML" />
</acronym>
</Data>
</asp:XmlDataSource>
Untuk mengikat XML ini ke ReorderList
kontrol dan mengaktifkan postback, atribut berikut harus diatur:
-
DataSourceID
: ID sumber data -
SortOrderField
: Properti yang akan diurutkan berdasar -
AllowReorder
: Apakah akan mengizinkan pengguna menyusun ulang elemen daftar -
PostBackOnReorder
: Apakah akan membuat postback setiap kali daftar disusun ulang
Berikut adalah markup yang sesuai untuk kontrol:
<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"
AllowReorder="true"
DataSourceID="XmlDataSource1" PostBackOnReorder="true">
ReorderList
Dalam kontrol, data tertentu dari sumber data mungkin terikat menggunakan Eval()
metode :
<DragHandleTemplate>
<div class="DragHandleClass">
</div>
</DragHandleTemplate>
<ItemTemplate>
<div>
<asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />
</div>
</ItemTemplate>
</ajaxToolkit:ReorderList>
Pada posisi arbitrer di halaman, label akan menyimpan informasi ketika pengubahan ulang terakhir terjadi:
<div>
<asp:Label ID="lastUpdate" runat="server" />
</div>
Label ini diisi dengan teks dalam kode sisi server, menangani postback:
<script runat="server">
Sub Page_Load()
If Page.IsPostBack Then
lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()
End If
End Sub
</script>
Terakhir, untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager
kontrol harus diletakkan di halaman:
<asp:ScriptManager ID="asm" runat="server" />
Setiap urutan ulang memicu postback (Klik untuk melihat gambar ukuran penuh)