Menü,kategori ve Widget gibi modülleri olsun bu yapıların çoğu için sıralama özelliğine ihtiyaç duymuşuzdur.Kontrol panelinden kullanıcıya sıralama no girdirerek veya oklarla taştırarak değişik yöntemlerle sıralama yapıyorduk.Şimdilerde çok kullanışlı olan blogsa panelinde de rastgeldiğim taşıma yöntemiyle nasıl sıralama yaparız konusuna değinmek istiyorum.

Baştan sona detaylı bir şekilde anlatmaktan ziyade mantığını paylaşmayı tercih ettim, çoğu hazır yapılar zaten mevcut.

Tikla adresine girip örneği indirdiğimizde ilk örnekte şöyle bir yapı mevcut, ilk örnek için Tıkla

Örnek’ te taşıma işlemlerini jquery kullanarak nasıl yapacağımız göstermiş.Bizim burada yapacağımız şey bu örneği kendi modülümüze uygulayıp dinamik olarak hangi sırada düzenlediysek kaydetme işleminden sonra no alanlarımızı da o sıraya göre numaralandırmak olacaktır.

<div id="example-1-1">

                   <ul class="sortable-list">

                   <li class="sortable-item">Sortable item A</li>

                   <li class="sortable-item">Sortable item B</li>

                   <li class="sortable-item">Sortable item C</li>

                   </ul>

         </div>

Örneğin menü tablomuzdan menülerimizi listeliyelim ve “li” tagının “id” parametresine menü id değerlerimizi atayalım. 

   <div id="example-1-1">

                   <ul class="sortable-list">

                   <li class="sortable-item" id=”1”>Menü 1</li>

                   <li class="sortable-item" id=”2”>Menü 2</li>

                   <li class="sortable-item" id=”3”>Menü 3</li>

                   </ul>

</div>

Daha sonra yapacağımız işlem,kaydet butonuna bastığımız da javascript ile “ul” tagının altındaki “li”  tagının “id” değerlini almak.

         var liobj = $(".sortable-list li");

                var degerler = "";

                for (var i = 0; i < liobj.length; i++) {

                    degerler += liobj[i].id + "-";

               }

 Bu değerleri belirli bir fortmatta düzenledikten sonra,kaydet metodumuza ajax ile göndermek olacaktır.

 $.ajax({

                    type: "POST",

                    url: "Default.aspx/siralamakaydet",

                    data: "{list:'" + degerler + "'}",

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    error: function() {

                        alert('hata');

                    },

                    success: function(msg) {

                        alert('Sıralama yapıldı...');

                    }

                });

Kaydet metodumuz

    string[] listArray = list.Split('-');

            for (int i = 0; i < listArray.Length - 1; i++)

            {

                //update kategoriler set sirano=(i+1) where id=listArray[i]                 

            }

Taşıma işlemi ile belirlediğimiz menü id değerlerini,belirlediğimiz sıra ile kaydetme işlemini gerçekleştirecek metodumuza gönderiyoruz.Sirası ile id değerlerimiz sorgulatıyoruz.Sorgulattığmız her id değerin sirano suna id değerin sırasındaki numarayı veriyoruz.

Detaylı bir anlatım olmadığı için aşağıdaki örneği indirip çalışan halini kontrol edebilirsiniz.

indirmek için AspnetDrapDrop.rar