Son Yazılar
Anasayfa » Yazılım » Ajax » Ajax ReorderList Kullanımı
Ajax ReorderList Kullanımı

Ajax ReorderList Kullanımı

ReorderList sürüklenebilir sıralanabilir bir liste yaratmamızı sağlayan Ajax nesnesidir.

Senaryo

İçerisinde Referanslar sayfasıda olan bir web sitesi yaptınız. Referanslar sayfasına müşterinin kendi paneli üzerinden referansları ekleyeceğini ve bu referansların sırasını istediği zaman değiştireceğini düşünün. Yani kullanıcı referanslarına Arçelik, Vestel, Beko markalarını ekliyor. İstediği zaman 1.sıraya Arçelik 2.sıraya Beko 3.sıraya Vestel veya 1.sıraya Vestel 2.sıraya Beko 3.sıraya Arçelik gelsin istiyor.

1.Adım

Ajax kontrollerini kullanmak için olmazsa olmazımız olan ScriptManager kontrolünü ekliyoruz.(Yeri önemli değil.)

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

 

2.Adım

Listeleme yapmak istediğimiz yere aşağıdaki kodları ekliyoruz.

<ajaxToolkit:ReorderList ID="ReorderList1" ClientIDMode="AutoID" runat="server" AllowReorder="True" DragHandleAlignment="Right" PostBackOnReorder="false" SortOrderField="Sira" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <table style="width: 100%;">
                        <tr>
                           <td>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("Adi") %>'></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("Aciklama") %>'></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="Label3" runat="server" Text='<%# Eval("Sektör") %>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <DragHandleTemplate>
                    <div style="width: 30px;">
                        <img src="../images/icons/tasi.png" alt="Sırala" title="Sırala" data-toggle="tooltip" width="16" />
                    </div>
                </DragHandleTemplate>
            </ajaxToolkit:ReorderList> 
  • ClientIDMode= Listede sürükle-bırak(drag-drop) yapmamız için gerekli.
  • AllowReorder= Sürükle bırak sonucu yeniden listelem iznini veriyoruz.
  • DragHandleAligment= Sürükle bırak simgesinin nerede olacağını belirtiyoruz. Bu uygulamada sağ tarafta tasi.png olarak yer almaktadır.
  • PostBackOnReorder= Sürükle-bırak sonucu sayfanın postback olup olmamasını belirtiyoruz.
  • SortOrderField= Hangi alana göre sıralama yapacağını seçiyoruz.
  • DataSourceId= ReorderList’ e bağlayacağımız veri kaynağını seçiyoruz.
  • DragHandleTemplate= Etiketi arasına sürükleme iconunu adresini belirtiyoruz. Bu uygulamada ../images/icons/tasi.png olarak yer almakta.

3.Adım

Referanlar tablosunda Id(int, primary key, identity(1,1)), Adi(nvarchar(50)), Aciklama(nvarchar(50)), Sektör(nvarchar(50)), Sira(int) alanlarının olduğu tablo oluşturuyoruz.

4.Adım

Sayfamıza SqlDataSource kontrolü ekliyoruz. Bu uygulamada SqlDataSource1 diye geçmektedir. Referanslar tablomuzu seçiyoruz. ORDER BY butonuna tıklayıp Sort By Sira Ascending diyoruz. Advanced butonuna tıklayarak Generate INSERT, UPDATE and DELETE statements kutucuğuna tıklıyoruz.

2.adımdaki gibi DataSourceID=”SqlDataSource1″ eklemesini yaparak ReorderList’ i kullanıma hazır hale getiriyoruz. Veritabanına kayıt ekleyip eklediğimiz icon üzerinden sürükleme yaparak çalıştığını ve veritabanındaki sırasınında değiştiğini göreceksiniz.

 

Hakkında Mehmet Akif Vurucu

C# 'ta kendisini sürekli geliştirmeye çalışan, Wordpress meraklısı, inatçı, spor tutkunu, fanatik bir Fenerbahçeli.

Cevapla

E-posta adresiniz yayınlanmayacak. Required fields are marked *

*