ASP.NET Razor Web Sayfalarında jQuery Sortables (Sıralama) Veritabanı Kayıt

jQuery Sortables : Öğelerin sürükle-bırak özelliğini kolayca yapmamızı sağlayan bir jQuery eklentisidir. Bu yazıda bu eklentiyi Razor Web sayfalarında kullanarak hem yeninden sıralama işlemi gerçekletirecek hem de sonuçları veritabanına kaydedeceğiz.

İhtiyacımız olan şey sadece jQuery Sortables eklentisini ve jQuery UI referanslarını almak. Her iki kütüphanede Visual Studio Razor Web sayfalarını yarattığında projeye eklenmiş olarak geliyor. Fakat WebMatrix ile çalışacaksanız Nuget paket indirme aracını kullanarak kurulumu gerçekleştirebilirsiniz yada sadece CDN-hosted dosyalarını Microsoft tarafından oluşturulan (http://www.asp.net/ajaxlibrary/cdn.ashx) veya Google tarafından oluşturulmuş (https://developers.google.com/speed/libraries/devguide) adreslerinden elde edebilirsiniz.

Referanslarımızı elde ettikten sonra, yeniden sıralama işlemini uygulamak istediğimiz HTML elemanlar topluluğuna sortable komutunu veya özelliğini ekleyeceğiz. Aşağıdaki örnekte bir div’e bu özelliği atadım ve içerisinde ki elemanları yeniden sıralanabilme özelliğine kavuşturmuş oldum.

<script>
    $(function () {
        $('#sortable').sortable()
    });
</script>

<div id="sortable">
    @for(var i = 1; i <= 10; i++){
        <div class="list-item">
            @((char)(i + 64))
        </div>
     }
</div>

Bu kod alfabenin ilk harfinden başlayarak sonraki harfi içeren 10 adet div render edecek. Sortable olarak nitelendirişmiş div içerisinde, mouse yardımıyla listeyi yeniden sıralayabilirsiniz. Bu kullanım oldukça kolay ve pratik. Her bir elemanı id ile belirtmemiz gerekiyor. Çünkü veritabanına kayıt yapabilmek için listedeki pozisyonunu elde etmemiz lazım. Bunu da jQuery each metodu ile gerçekleştirebiliriz.

jQuery each metodu iki parametre alır : index ve value.Bu örneğimizde elemanları veritabanından getireceğiz. Tablo oldukça basit. Bir Id ve bir text alanı var bunun yanında elemanın gösterim sırasını kaydetmek için interger bir kolon olacak.

@{
    var db = Database.Open("Sortables");
    var commandText = "SELECT Id, Text FROM Items ORDER BY DisplayOrder";
    var items = db.Query(commandText);
}

Aldığımız verilerin gösterimi şöyle olacak :

<div class="container">
    <div class="row">
        <div class="col-md-4 alert-info" id="message">
           Drag items to reorder them.
        </div>
    </div>
    <div class="row">
        <div id="sortable" class="col-md-4">
            @foreach(var item in items){
                <div class="list-item" id="@item.Id">
                    @item.Text
                    <div class="index"></div>
                </div>
            }
        </div>
    </div>
    <div class="row">
       <div class="col-md-2">
           <button>Save Order</button>
        </div>
    </div>
</div>
<pre>

Twitter Bootstrap kullandığım dikkatli gözlerden kaçmamıştır. Şu an koleksiyon elemanları sürüklenebilir özelliklerini almış durumda ve button’a click event fonksiyonunu veriyoruz.

<script>
    $(function () {
        $('#sortable').sortable();
        $('button').on('click', function(){
            var ids = [];
            $('.list-item').each(function (index, value) {
                var id = $(value).prop('id');
                ids.push(id);
            });
            $.post(
                '/UpdateOrder',
                { Ids: JSON.stringify(ids) },
                function (response) {
                    if ($('#message').hasClass('alert-info')) {
                        $('#message').text('Items re-ordered successfully.')
                                     .removeClass('alert-info')
                                     .addClass('alert-success');
                    } else {
                        $('#message').effect("highlight", {}, 2000);
                    }
                }
            );
        })
    });
</script>

‘ids’ adında bir Javascript dizi yarattık. Bu dizi button click eventi tetiklendiğinde kullanıcı tarafından yeni pozisyonlarına atanan sıralandırılabilir elemanların pozisyonlarının tutacak. Daha sonra bu dizi JSON.stringify metodu kullanılarak JSON formatına dönüştürülecek ve UpdateOrder.cshtml dosyasına post edilecek. İşlem gerçekleştirildiğinde sayfanın en üstünde bulunan div kullanıcıya yapılan işlemin geçerli olduğu bilgisini verecek. UpdateOrder.cshtml dosyasının kodu :

@{
    var json = Json.Decode(Request["Ids"]);
    object[] ids = json;
    var db = Database.Open("Sortables");
    var commandText = "UPDATE Items SET DisplayOrder = @0 WHERE Id = @1";
    foreach(var id in ids){
        db.Execute(commandText, Array.FindIndex(ids, i => i == id), id);
    }
}

Bu kod görüntüleme sırası değişen elemanın güncellemesini yapan bir SQL ifadesi oluşturur. Parametre olarak gönderilen iki değer görüntüleme sırası ve id’lerdir. Dikkat edilmesi gereken nokta Request.Form koleksiyonu da yer alan ve Jquery kullanılarak post edilen dizin nasıl planlanması gerektiğidir. Esasen dizi içerisinde ki her bir eleman name/value çifti olarak gönderilir. Tüm elemanların isimleri aynı olduğundan multi-select veya checkbox gruplandırmasında olduğu gibi değerler server tarafında virgülle ayrılmış string olarak işlenir.
Bu string Split metodu kullanılarak C# dizisine dönüştürülür ve bunu üzerinde döndürülür. Her tekrar da mevcut elemanın indexi dizi içerisine atanır ve poziyonu kaydedilir.


					

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir