jQuery ile sürükle bırak yaparak sıralama işlemi

Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun  jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce  sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı  Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.

	CREATE TABLE [kategoriler] (
	  [id] int IDENTITY(1, 1) NOT NULL,
	  [kategoriadi] nvarchar(50) NULL,
	  [sira] int NULL,
	  PRIMARY KEY CLUSTERED ([id])
	)
	ON [PRIMARY]
	GO

 

sirala.aspx sayfamızın içeriği

	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		margin-top: 10px;
	}
	#icerik ul{
	    margin:0;width:300px
	}
	#icerik ul li {
		list-style: none;
		margin: 0 0 4px 0;
		padding: 5px;
		background-color:#007dd5;
		color:#fff;
	}
	#icerik li:hover{
	    cursor:move;
	}
	.yeniyer{border:2px dotted #860101}
<script type="text/javascript">
$(document).ready(function(){
    $(function() {
	    $("#icerik ul").sortable({
	        placeholder: 'yeniyer',
	        opacity: 0.6,
	        cursor: 'move',
	        update: function() {
		    var order = $(this).sortable("serialize");
		    $.post("kaydet.aspx", order);
	    }
	    });
    });
});
</script>
	<div id="icerik">
        <ul>
	         <asp:Literal runat="server" ID="liste"></asp:Literal>
        </ul>
    </div>

Sirala.aspx.cs sayfamızın içeriği

 protected void Page_Load(object sender, EventArgs e)
 {
 if(!IsPostBack)
 {
 listeDoldur();
 }
 }
 
protected void listeDoldur() {
 DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
 foreach (DataRow dr in dt.Rows)
 {
 liste.Text += "

	<li id="\&quot;sira_&quot;">" + dr["kategoriadi"].ToString() + "</li>

";
 }
 }
 

kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.

 protected void Page_Load(object sender, EventArgs e)
 {
 string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
 char[] ayrac = new char[] { '&amp;' };
 string[] gelenler = gelen.Split(ayrac);
 int i = 1;
 foreach (string veri in gelenler)
 {
 veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
 i++;
 }
 }
 

Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.

  • emre

    Eline sağlık, her zamanki gibi yine çok faydalı bir makale…

  • emre

    teşekkürler ama
    dosya indirilmior.

  • alican soyarslan

    merhaba ben bu uygulamayı asp ye çeviremedim aspx ide çalıştıramadım bunun asp si direkt asp kodları yokmu nasıl otomatik kaydediyor. bana yardımcı olur musunuz rica etsem.

  • http://yok.com alican soyarslan

    merhaba
    bu güzel uygulama bize çok acil lazım ve bu çok iyi. fakat biz asp kullanıyoruz aspx i kullanamadık siteye entegre edemedik bunu nasıl asp ye dönüştürürüz bilen bir arkadaşımız yardımcı olursa çok seviniriz. her kullanıcı kendi sayfasındaki sıralama ayrı ayrı kaydedebiliyor mu bu yoksa herkesin yaptığını bir mdb de mi topluyor?

  • http://sda apoStyLEE

    @emre dosyanın adresini düzelttim, şimdi indirebilirsiniz.
    @alican zaman sıkıntısı sebebiyle uygulamanın asp ile nasıl yapılacağını yazmam çok zor. Ama ilgili dosyaları indirip mantığını rahatlıkla anlayıp kendiniz yazabilirsiniz.

  • http://yok.com alican soyarslan

    apoStyLEE , buna benzer asp ile yazılmış bir script biliyor musun? yani her kullanıcı kendi ayarlarını görebilecek örneğin ben a üyesiyim ve sayfadaki bazı nesnelerin yerlerini değiştirdim veritabanına bu kaydedildi . b üyesi ise nesneleri farklı konumlara yerleştirdi onun ayarları ise ayrı kaydedildi. bu şekilde geliştirilmiş bir script biliyorsan söylersen sevinirim =)
    teşekkürler

  • http://sd apoStyLEE

    @alican, böyle bir uygulama bilmiyorum ama eğer asp bilgin varsa rahatlıkla kendin yapabilirsin. Bir veritabanında bir tablon olsun, bu tabloda ilgili kullanıcının ayarları saklı kalsın. Her değişiklikte bu alanları güncellersen istediğin çok güzel bir şekilde olur. Tabi biraz uğraşman gerekir ;)

  • asd

    mükemmel birşey bu ya

  • http://cankaya.net.tr John Kaya

    bunu master detail halinde nasıl yapabiliriz acaba. sürükle bırakla bir anamenunun altından baska bir anamenunun altına atmak orada sıralama yapmak gibi teşekkürler

  • http://sda apoStyLEE

    Merhaba, istediğinizi yapmak esasında çok basit. Ana hatlarıyla yukarda zaten konuyu anlatmaya çalıştım. Sizin yapmanız gereken istediğiniz menü yapısını bir veritabanı içinde modellemek ve yukarıdaki mantıkta kodlarınızı yazmak.

  • cenk

    Selam uygulama anlatımı için teşekkürler , indirme linkinde bir sıkıntı var düzeltebilirsen sevinirim.

    • apoStyLEE

      Teşekkür ederim, indirme adresini düzenledim.

  • http://www.surpriz.gen.tr yiğit

    Merhaba emeğinize yüreğinize sağlık ben yabancı sitelerde baya arasım asp.net te yeniyim bir forum sitesi yazıyorum
    hocam size sorum datalist veya GiridView içerisinde nasıl sıralama yaparız..

  • http://Websitesi Eray

    apoStyLEE jquery senin köpeğin olsun. Bu uygulamanın türkçesini bulabileceğimi hiç sanmıyordum. Çok saol beni çok büyük bir dertten kurtardın.

  • http://Websitesi Rifat Caner ANILTURK

    Merhaba,

    İlk öncelikle makale için çok teşekkürler. Bende genelde projelerde linq ile çalışıyorum. Sizin yaptığınızı linq’ya çevirdim ve burayada yazmak istedim birilerinin işine yarar diye.
    Sadece sizin kaydet.aspx de yaptığınız düzenlemeyi yazıyorum buraya.

    string gelen = Request.Form.ToString().Replace(“%5b%5d”, “[]”).Replace(“sira[]=”, “”);

    char[] ayrac = new char[] { ‘&’ };

    string[] gelenler = gelen.Split(ayrac);
    int i = 1;
    foreach (string veri in gelenler)
    {

    var _row = from databaseadi in database.databaseadi where databaseadi.id== veri select databaseadi;
    _row.First().siratabloadi= i;
    database.SubmitChanges();
    i++;
    }

    • apoStyLEE

      Merhaba ilginize teşekkür ederim. Çok iyi düşünmüşsünüz, elinize sağlık.

  • Pingback: Anonim()

  • http://www.batuhangoksu.com Batuhan Göksu

    Merhaba apoStyLEE jquery ile post işlemini

    kaydet.aspx e göndermişiniz kaydet.aspx yerine kaydet.aspx.cs ye gönderme şansımız yokmu kaydet.aspx ortadan kaldırıp direk .net kodlarına işlem yaptırma şansımız yokmu acaba kaydet.aspx göndermek ve kaydet.aspx üzerinden kaydet.aspx.cs ye göndermek zorunlumu.

    • apoStyLEE

      Merhaba, generic handler (.ashx) ile istediğiniz gibi kullanabilirsiniz.

  • http://www.batuhangoksu.com Batuhan Göksu

    biraz açabilirmisiniz .ashx olayını asp.cs yerine .ashx yaparsam olucakmıdır başka bi işlem yapmam gereklimi ?

    • apoStyLEE

      Projenize Add New Item diyerek açılan pencereden Generic Handler i ekleyin. Gerisini anlarsınız zaten ;)

  • http://www.batuhangoksu.com Batuhan Göksu

    peki teşekkür ederim

    • apoStyLEE

      Rica ederim.

  • halid

    Merhabalar

    Bu uygulamayı datalistte nasıl kullanacağız datalist Table tr td türünden html çıktısı var Jquery nasıl bir değişikli yapmak lazım teşekkürler.

  • apoStyLEE

    Merhaba, datalist ile kullanmak için bu örnek yeterli olmayabilir. Benim size önerim verilerinizi repeater içinde liste olarak göstermeniz yönünde.. Zaten böyle bir düzenleme yaparsanız örneği aynen kullanabilirsiniz.

    • halid

      Aslında datalist ile yaptım yapamadığım tek şey

      datalistin dinamik oluşturduğu tagı içersine

      bu şekilde replace edebilirsem findcontrol ile yakalar sorunu hallederim. Dünden beridir uğraşıyorum ama datalistin oluşturduğu tagına code tarafından nasıl erişim bulamadım. bu konu hakında bilgisi olan varsa eğer paylaşır ise sevinirim.

  • http://surpriz.gen.tr yiğit

    abdullah bey açıklamış bende size daha ek olara şunu yazmak isterim for döngüsüne sokun datalist hata verir ornek olarak yazayım buraya
    aspx tarafına

    aspx.cs tarafınada
    DataTable ile veriyi çektikten sonra
    for (int i = 0; i < dt.Rows.Count; i++)
    {

    Literal1.Text += "” + dt.Rows[i][“veri-ADI”].ToString() + “”;
    }

  • halid

    datalist oluştrduğu

    “tr”

    tagına code tarafından nasıl erişim bilgisi olan varmı acaba normalde

    “findcontrol”

    bu işlemi hallediyor yalnız bunun için html tarafından

    runet =”server” ve id=”myid”

    demek yetiyor yalnız datalist dinamik oluştuduğu için tr nesnesini findcontrol ile mümkün olmuyor.

    yardımlarınızı bekliyorum

  • http://surpriz.gen.tr yiğit

    halid bey sadece sıralamak için mi? Datalisti Kullanmak istiyorsunuz.?
    Eğer onun için ise ben size yardımcı olayım.

  • halid

    Yiğit bey

    Evet maksadım datalist kullanarak bu sıralama işlemini yapmak.

  • http://surpriz.gen.tr yiğit

    MSN mi kayıt edin Burda yazdığım kodlar tam çıkmıyor. Benim sitden iletişimde msn adresim var

  • fahri tokgöz

    Çok güzel bir paylaşım teşekkür ederim.

  • Sinan

    Ellerinize sağlık,
    birde internet explorerda çalıştırmak için ne yapmamız gerekiyor bilgi rica ediyorum.

  • Ahmet

    Merhaba,

    apoStyLEE makale için teşekkürler.

    Bu sıralama işlemini repeater içerisinde nasıl yapabiliriz?

    <li ID=""OrderNo_" + dr("ID").ToString() bu alanı repeater da neye göre ayarlamak gerekiyor?

    Teşekkürler.

  • Emre Y

    Adamsın Adam. Eline sağlık

  • Ivm Alanya

    Arkadaşım süpersin Peki Bunun Asp için Olanı varmı Elinizde ?

  • Uğur KILIÇ

    merhaba, paylaşımın için teşekkür ederim. bu işlemi gridview için nasıl uygulayabiliriz?