Aracılığıyla paylaş

ReorderList Aracılığıyla Sürükle ve Bırak (C#)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

AJAX Denetim Araç Seti'ndeki ReorderList denetimi, sürükleyip bırakma yoluyla kullanıcı tarafından yeniden sıralanabilen bir liste sağlar. Listenin geçerli sırası sunucuda kalıcı olacaktır.

Genel Bakış

ReorderList AJAX Denetim Araç Seti'ndeki denetim, sürükleyip bırakma yoluyla kullanıcı tarafından yeniden sıralanabilen bir liste sağlar. Listenin geçerli sırası sunucuda kalıcı olacaktır.

Adımlar

Denetim, ReorderList veritabanından listeye veri bağlamayı destekler. Hepsinden iyisi, liste öğesinin sırasına değişiklikleri veri deposuna geri yazmayı da destekler.

Bu örnekte veri deposu olarak Microsoft SQL Server 2005 Express Sürüm kullanılmaktadır. Veritabanı, Express Edition dahil olmak üzere Visual Studio yüklemesinin isteğe bağlı (ve ücretsiz) bir parçasıdır. Ayrıca altında https://go.microsoft.com/fwlink/?LinkId=64064ayrı bir indirme olarak da kullanılabilir. Bu örnek için, SQL Server 2005 Express Sürüm örneğinin çağrıldığını SQLEXPRESS ve web sunucusuyla aynı makinede bulunduğunu varsayarız; bu aynı zamanda varsayılan kurulumdur. Kurulumunuz farklıysa, veritabanı için bağlantı bilgilerini uyarlamanız gerekir.

Veritabanını ayarlamanın en kolay yolu Microsoft SQL Server Management Studio Express(https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Sunucuya bağlanın, üzerine çift tıklayın Databases ve adlı Tutorialsyeni bir veritabanı oluşturun (sağ tıklayın ve seçinNew Database).

Bu veritabanında, aşağıdaki dört sütunla adlı AJAX yeni bir tablo oluşturun:

  • id (birincil anahtar, tamsayı, kimlik, NULL değil)
  • char (char(1), NULL)
  • description (varchar(50), NULL)
  • position (int, NULL)

AJAX tablosunun düzeni

AJAX tablosunun düzeni (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Ardından, tabloyu birkaç değerle doldurun. Sütunun position öğelerin sıralama düzenini barındırdığını unutmayın.

AJAX tablosundaki ilk veriler

AJAX tablosundaki ilk veriler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sonraki adım, yeni veritabanı ve tablosuyla iletişim kurmak için bir SqlDataSource denetim oluşturulmasını gerektirir. Veri kaynağı ve UPDATE SQL komutlarını desteklemelidirSELECT. Liste öğelerinin sırası daha sonra değiştirildiğinde, ReorderList denetim otomatik olarak veri kaynağının Update komutuna iki değer gönderir: yeni konum ve öğenin kimliği. Bu nedenle, veri kaynağı şu iki değer için bir <UpdateParameters> bölüme ihtiyaç duyar:

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

Denetimin ReorderList aşağıdaki öznitelikleri ayarlaması gerekir:

  • AllowReorder: Liste öğelerinin yeniden düzenlenip düzenlenemeyeceği
  • DataSourceID: Veri kaynağının kimliği
  • DataKeyField: Veri kaynağındaki birincil anahtar sütununun adı
  • SortOrderField: Liste öğeleri için sıralama düzenini sağlayan veri kaynağı sütunu

<DragHandleTemplate> ve <ItemTemplate> bölümlerinde, listenin düzeni ince ayarlanabilir. Ayrıca, burada görüldüğü gibi yöntemini kullanarak Eval() veri bağlama mümkündür:

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

Aşağıdaki CSS stil bilgileri (denetimin <DragHandleTemplate>ReorderList bölümünde başvuruda bulunur) fare işaretçisinin sürükleme tutamacının üzerine geldiğinde uygun şekilde değişmesini sağlar:

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

Son olarak, bir ScriptManager denetim sayfa için AJAX ASP.NET başlatır:

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

Bu örneği tarayıcıda çalıştırın ve liste öğelerini biraz yeniden düzenleyin. Ardından sayfayı yeniden yükleyin ve/veya veritabanına göz atın. Değiştirilen konumlar korunur ve veritabanındaki sütundaki position değerler tarafından da yansıtılır ve yalnızca işaretleme kullanılarak herhangi bir kod olmadan bu değerlere yansıtılır.

Veritabanındaki veriler yeni liste öğesi sırasına göre değişir

Veritabanındaki veriler yeni liste öğesi sırasına göre değişir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki