Seret dan Letakkan melalui ReorderList (C#)

oleh Christian Wenz

Unduh PDF

Kontrol ReorderList di Toolkit Kontrol AJAX menyediakan daftar yang dapat diurutkan ulang oleh pengguna melalui seret dan letakkan. Urutan daftar saat ini akan dipertahankan pada server.

Gambaran Umum

Kontrol ReorderList di Toolkit Kontrol AJAX menyediakan daftar yang dapat diurutkan ulang oleh pengguna melalui seret dan letakkan. Urutan daftar saat ini akan dipertahankan pada server.

Langkah-langkah

Kontrol ReorderList mendukung pengikatan data dari database ke daftar. Yang terbaik dari semuanya, ini juga mendukung penulisan perubahan pada urutan elemen daftar kembali ke penyimpanan data.

Sampel ini menggunakan Microsoft SQL Server 2005 Express Edition sebagai penyimpanan data. Database adalah bagian opsional (dan gratis) dari penginstalan Visual Studio, termasuk edisi ekspres. Ini juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database.

Cara term mudah untuk menyiapkan database adalah dengan menggunakan Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Sambungkan ke server, klik Databases dua kali dan buat database baru (klik kanan dan pilih New Database) yang disebut Tutorials.

Dalam database ini, buat tabel baru yang disebut AJAX dengan empat kolom berikut:

• id (kunci primer, bilangan bulat, identitas, bukan NULL)
• char (karakter(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

Tata letak tabel AJAX (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, isi tabel dengan beberapa nilai. Perhatikan bahwa position kolom menyimpan urutan pengurutan elemen.

Data awal dalam tabel AJAX (Klik untuk melihat gambar ukuran penuh)

Langkah berikutnya mengharuskan untuk menghasilkan SqlDataSource kontrol untuk berkomunikasi dengan database baru dan tabelnya. Sumber data harus mendukung SELECT perintah dan UPDATE SQL. Ketika urutan elemen daftar kemudian diubah, ReorderList kontrol secara otomatis mengirimkan dua nilai ke perintah sumber Update data: posisi baru dan ID elemen. Oleh karena itu, sumber data memerlukan <UpdateParameters> bagian untuk dua nilai ini:

<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
 ProviderName="System.Data.SqlClient" OldValuesParameterFormatString="original_{0}"
 SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
 UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
 <UpdateParameters>
 <asp:Parameter Name="position" Type="Int32" />
 <asp:Parameter Name="original_id" Type="Int32" />
 </UpdateParameters>
</asp:SqlDataSource>

Kontrol ReorderList perlu mengatur atribut berikut:

• AllowReorder: Apakah item daftar dapat disusun ulang
• DataSourceID: ID sumber data
• DataKeyField: Nama kolom kunci primer di sumber data
• SortOrderField: Kolom sumber data yang menyediakan urutan pengurutan untuk item daftar

Di bagian <DragHandleTemplate> dan <ItemTemplate> , tata letak daftar dapat disempurnakan. Selain itu, pengikatan data dimungkinkan menggunakan metode , seperti yang Eval() terlihat di sini:

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position" 
 AllowReorder="true" DataSourceID="sds" DataKeyField="id">
 <DragHandleTemplate>
 <div class="DragHandleClass">
 </div>
 </DragHandleTemplate>
 <ItemTemplate>
 <asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
 </ItemTemplate>
</ajaxToolkit:ReorderList>

Informasi gaya CSS berikut (dirujuk di <DragHandleTemplate> bagian ReorderList kontrol) memastikan bahwa penunjuk mouse berubah dengan tepat saat mengarahkan kursor ke handel seret:

<style type="text/css">
 .DragHandleClass
 {
 width: 12px;
 height: 12px;
 background-color: red;
 cursor:move;
 }
</style>

Terakhir, ScriptManager kontrol menginisialisasi ASP.NET AJAX untuk halaman:

<asp:ScriptManager ID="asm" runat="server" />

Jalankan contoh ini di browser dan atur ulang item daftar sedikit. Kemudian, muat ulang halaman dan/atau lihat database. Posisi yang diubah telah dipertahankan dan juga tercermin oleh nilai dalam position kolom dalam database dan semuanya tanpa kode apa pun, hanya dengan menggunakan markup.

Data dalam database berubah sesuai dengan urutan item daftar baru (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya