mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Dropdownlist Üzerinde Ekleme ve Eleman Aktifleştirme İşlemi
Bu yazımda Jquery ile dropdownlist üzerinde ekleme, istediğimiz seçeneği aktifleştirme işlemlerini göstereceğim. Son dönemde okulda yaptığımız bazı projelerde ihtiyaç üzerine böyle bir işleme ihtiyaç duydum ve bu ihtiyacı Jquery ile basitçe çözdüm. Jquery ile yaparak server tarafında da işlem yapmaktan kurtuldum. Daha önce buradaki yazımda server tarafında yapılacak işlemler ile dropdownlist kontrolünün ilk elemanını değiştirmeyi göstermiştim. Jquery ile bu işlemi yaparak server taraflı işlemlerin birkaçından kurtulup sistemizi daha performanslı hale getirmiş oluyoruz. Ayrıca yine Jquery ile istediğimiz bir elemanı dropdownlistte aktif hale getirebiliyoruz. Bu da oldukça güzel bir yöntem. Şimdi bu işlemleri daha iyi anlamak için hazırladığım bir örneği inceleyelim.

Öncelikle hazırladığım örnekte kullanacağım dropdownlistin html kodları şu şekilde olmalı:

    <asp:DropDownList ID="dropdown" runat="server"></asp:DropDownList>
    <asp:Button ID="Button1" runat="server" Text="gönder"
        onclick="Button1_Click1" OnClientClick="return kontrol();" />
    <asp:Label ID="Label1" runat="server"></asp:Label>

Bu dropdownlist üzerinde işlem yapacak olan script kodlarımız ise şu şekilde olmalı:

<script type="text/javascript">
    var secilen;
    $(function() {
 
        //Dropdown'a eleman ekleme ve aktifleştirme.
        $("#dropdown").prepend("<option value='0'>Bir Rakam Seçiniz...</option>");
        $("#dropdown option[value=0]").attr("selected", true);
 
        //seçilen eleman varsa aktif etmek için yapılan kontrol
        if (secilen != null) {
            $("#dropdown option[value="+secilen+"]").attr("selected", true);
        }
    });
 
    //Dropdown kontrolü.
    function kontrol() {
        if ($("#dropdown").val() == 0) { $("#sonuc").html("Lütfen Bir Değer Seçiniz."); return false; }
        else return true;
    }
 
</script>

Yapacağım örnekte dropdownlisti server tarafında kontrol ettiğim için server taraflı kodlar ise şu şekilde:

    protected void Page_Load(object sender, EventArgs e)
    {
      if (!IsPostBack)
      {
        ListItem li1 = new ListItem("Deneme 1", "1");
        ListItem li2 = new ListItem("Deneme 2", "2");
        ListItem li3 = new ListItem("Deneme 3", "3");
        dropdown.Items.Add(li1);
        dropdown.Items.Add(li2);
        dropdown.Items.Add(li3);
      }
    }
 
    protected void Button1_Click1(object sender, EventArgs e)
    {
      Label1.Text = "Seçtiğiniz elemanın değeri : " + dropdown.SelectedValue;
      Literal lt = new Literal();
      lt.Text = "<script>secilen=" + dropdown.SelectedValue + ";</script>";
      Header.Controls.Add(lt);
      dropdown.ClearSelection();
    }

Server taraflı kodlarda dropdownlistte Jquery ile ekledğimiz seçenek dışında var olan bir eleman seçilmiş ise değer alınıyor ve bu değere göre işlem yapıyorum. Yaptığım işlem ise seçilen elemanın değerini alıp bu değeri script kodlarda tanımladığım değişkene atmak. Bu değişkenin değerine göre dropdownlistin aktif elemanı belirleniyor. Eğer bu değişken boş ise dropdownlistin ilk elemanı Jquery ile eklediğimiz eleman olurken, drop üzerinde eleman seçip işlem yaptığımızda aktif eleman seççtiğimiz eleman oluyor. Bu işlemleri tamamem Jquery ile yapıyoruz. Server taraflı kodlar ile sadece seçilen eleman değerini alıp, script değişkene atıyoruz. Burada server taraflı kodlama kullanmadan tamamen javascript ile de kontrol yapılabilirdi. Çoğunlukla bu değerler server tarafında kontrol edildiği için bu şekilde bir örnek hazırladım.

Örneğimiz de en önemli nokta Jquery ile dropdownliste eleman ekleme ve dropdownlistte belirttiğimiz değere sahip elemanı seçili hale getirme işlemi. Bu işlemleri yaptığımız script kodları faydalı olacağını düşündüğüm için bir kez daha belirtiyorum. 

  //Dropdown'a eleman ekleme
  $("#dropdown").prepend("<option value='0'>Bir Rakam Seçiniz...</option>");
 
  //Dropdown'da değeri 0 olan elemanı aktif yapma.
  $("#dropdown option[value=0]").attr("selected", true);

Ayrıca daha önce yazmış olduğum yazımda Jquery Ajax ile dropdownlist kullanımı kısaca anlatmıştım. Bu yazım Jquery ile dropdownlist kullanımı hakkında sizlere bilgi verecektir. Ayrıca buradaki yazımda da Asp.net ile sayfalarımızın head bölümüne css, script dosyası, kodları ekleme ile ilgili bilgileri görebilirsiniz. Örneğimde bu yöntem ile script değişkene server tarafında değer veriyorum.

Birçok uygulamada rahatlıkla kullanabileceğimiz bir örnek. Hem server taraflı kontrollerde hem tamamen javascript kontrolü ile bu işlemi yapabiliriz. Özellikle veritabanı ile etkileşimli uygulamalarda ihtiyaç duyulan bu yöntemi bu şekilde rahatlıkla kullanabiliriz. İlerde daha kullanışlı ve veritabanı ile etkileşimli örneklerimi sizlerle paylaşıyor olacağım.

Hazırlamış olduğum örneği buradan görebilir, buradan da indirebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 30 Mayıs Cumartesi 2009 1 25551 3,7
Javascript Asp.net jQuery Jquery DropDownList İndir Aktif Css Html
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Tab Uygulaması Hazırlama 8086 Microprocessor Emulator - İndir Javascript (Ajax) ile Elde Edilen Datetime Türündeki Veriyi İşleme Javascript - Css ile Saydamlık LINQPad
Yorumlar
Yorum Yaz
RSS Yorum Takibi
ozan 12 Mayıs Çarşamba 2010 18:52 #1
Teşekkürler
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009