Asp.net Ajax

ASP.NET AJAX’da Sürükle ve Bırak: Kapsamlı Bir Rehber

Web uygulaması geliştirme dünyasında, kullanıcı deneyimini artırmak çok önemlidir. Kullanılabilirliği önemli ölçüde iyileştirebilecek popüler bir özellik, bir listedeki öğeleri kolayca yeniden sıralama yeteneğidir. Özellikle ASP.NET sitelerinde, kullanıcılar genellikle basit bir sürükle ve bırak arayüzü aracılığıyla öğeleri yeniden düzenleme yeteneği isterler.

Bu blog yazısında, ASP.NET AJAX ortamında sürükle ve bırak işlevselliğini uygulamanın etkili bir çözümünü inceleyeceğiz ve özellikle kullanıcıların iki liste arasında öğeleri sıralaması gereken bir senaryoya odaklanacağız.

Zorluk

Yaygın bir ihtiyaç, kullanıcıların aşağıdaki işlemleri gerçekleştirebildiği bir ASP.NET web sitesinde sıralanabilir bir liste oluşturmaktır:

Tek bir listedeki öğeleri yeniden sıralamak.
Bir listeden diğerine öğeleri sorunsuz bir şekilde sürüklemek.

Mevcut Çözümler

Hazır bir çözüm ararken, aşağıdaki gibi birkaç seçenekle karşılaşabilirsiniz:

Ajax Control Toolkit’ten ReorderList:
- Artıları: Tek bir liste için sürükle ve bırak desteği sunar.
- Eksileri: Veritabanı sürekliliği için manuel ayarlamalar gerektirir ve liste içi hareketlere izin vermez.
Telerik’ten RadGrid:
- Artıları: Liste içi sıralama ve listeler arasında sürüklemeyi tam olarak destekler.
- Eksileri: Bütçe kısıtlamalarını aşan yüksek bir fiyatla gelir.

Bu nedenle, karmaşık maliyetler veya kapsamlı manuel çaba olmadan gerekli işlevselliği nasıl elde edebileceğimiz sorusu ortaya çıkıyor.

Uygun Bir Alternatif: Mootools Sortables Eklentisi

Neyse ki, ücretsiz bir alternatif var: Mootools Sortables eklentisi. Bu JavaScript tabanlı çözüm, kullanıcıların iki farklı liste arasında öğeleri sürüklemelerine bile olanak tanıyan sürüklenebilir arayüzler uygulamanın basit bir yolunu sunar.

Mootools Sortables’ın Temel Özellikleri

Ücretsiz ve Açık Kaynak: Lisans ücreti olmadan kişisel ve ticari projeler için kolayca erişilebilir.
Özelleştirilebilir: Eklentiyi uygulamanızın belirli tasarım ve işlevsellik ihtiyaçlarına uyacak şekilde uyarlayın.
Birden Fazla Listeyi Destekler: Kullanıcıların bir listeden öğeleri sürükleyip diğerine bırakabileceği sezgisel bir kullanıcı arayüzü oluşturun.

Mootools Sortables ile Başlarken

Mootools Kütüphanesini Dahil Edin: Mootools kütüphanesini projenize ekleyerek başlayın. HTML’nizde JavaScript dosyalarını dahil ettiğinizden emin olun.
```
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-core-1.5.1.js"></script>
```

HTML Yapısını Kurun: Listelerinizi tutacak HTML yapısını tanımlayın.

<div id="list1" class="sortable">
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
    <div class="item">Öğe 3</div>
</div>

<div id="list2" class="sortable">
    <div class="item">Öğe A</div>
    <div class="item">Öğe B</div>
</div>

Sıralamaları Başlatın: Her iki listeyi de sıralanabilir olarak belirlemek için aşağıdaki JavaScript kodunu kullanın.

window.addEvent('domready', function() {
    var options = {
        onComplete: function(el) {
            console.log(el.get('text') + ' taşındı.');
        }
    };

    var list1 = new Sortables('list1', options);
    var list2 = new Sortables('list2', options);
});

Değişikliklerin Kalıcılığını Sağlamak: Son olarak, değişikliklerin veritabanınızda kalıcı olmasını sağlamak isteyeceksiniz. Uygulamanızın bağlamına bağlı olarak, güncellenen sıralama verilerini saklamak için sunucuya göndermek üzere AJAX çağrılarını düşünün.

Sonuç

Mootools Sortables eklentisini ASP.NET uygulamanıza entegre ederek, listeleriniz için sürükle ve bırak işlevselliklerini uygun maliyetle ve etkili bir şekilde sağlama imkanı bulabilirsiniz. Bu, yalnızca kullanıcı deneyimini artırmakla kalmaz, aynı zamanda web uygulamanızı daha etkileşimli ve ilgi çekici hale getirir.

Mootools Sortables eklentisinin canlı bir gösterimi için Mootools Sortables Demos adresini ziyaret edebilirsiniz.

Bu rehberi, ASP.NET uygulamalarınızdaki etkileşim tasarımının derinliğini keşfetmek için bir başlangıç noktası olarak kullanın ve ihtiyaçlarınıza en uygun yapmak için sağlanan çözümleri denemekten çekinmeyin!