Makale Özeti

Postback Olmayan DropdownListler...

Makale

AJAX Kontrolleri - Çoklu Dropdownlist

    AJAX (''Asynchronous JavaScript language and XML'') 'ın ne olduğu ve niçin ve teknik olarak nasıl kullanılacağına bir önceki makalemizde değinmiştik. Şimdi küçük ve basit bir uygulama ile kullanımına başlayalım ve daha sonraki makalelerimizde daha komplex tiplere doğru geçelim.

    Öncelikle uygulamamız çoklu dropdownlist ve ya diğer bir adı ile etkileşimli dropdownlist olacaktır. Bunun uygulaması bir çok kez karşımıza çıkmakta, İl-İlçe-Semt seçimleri, Kategori - Alt Kategori - Ürün seçimi, hatta yazgeliştir.com da makale gönderirken Bölüm - Editör seçimi gibi özet-detay ilişkili durumlarda kullanmaktayız. Hatta windows uygulamaları için, Tamer Öz'ün yazdığı güzel bir de componente buradan ulaşabilirsiniz. Web için de benzer componentler yapmak elbette mümkün fakat bu örneğimizde yeni yaklaşım olan AJAX'ı kullanarak post-back olmadan sayfalarda bu işlemi nasıl yapacağımızı göreceğiz.

    İlk yapmamız gereken iki adet dropdownlist i sayfanıza eklemek ve birinciyi (DropDownList1) Northwind database'indeki categories tablosu üzerinden dolacak şekilde Page_Load'da gerekli implementasyonu yapalım.

        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter("Select CategoryID,CategoryName from Categories", "data source=.;initial catalog=northwind;user id=sa");
        da.Fill(ds, "categories");
 
        DropDownList1.DataSource = ds;
        DropDownList1.DataValueField = "CategoryID";
        DropDownList1.DataTextField = "CategoryName";
        DropDownList1.DataBind();

    Bu şekilde çalıştırdığınızda, üstteki dropdownlistte kategori isimlerini göreceksiniz. Şimdi amacımız kategori seçildiğinde ürün isimlerinin seçilmesi. Bunun için, öncelikle XML olarak databaseden bu veriyi çekecek yeni bir sayfaya ihtiyacımız var. Bu sayfaya DataSupplier.aspx adını verdim ve xml içerikli bir data alabilmek için sadece Page_Load fonksiyonuna aşağıdaki kodu yazdım.

    protected void Page_Load(object sender, EventArgs e)
    {  DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter("Select ProductName,ProductID from Products where categoryID = " + Request.QueryString["CategoryID"], "data source=.;initial catalog=northwind;user id=sa");
        da.Fill(ds, "Products");
        Response.Clear();
        Response.ContentType = "text/xml";
        Response.Write(ds.GetXml());
        Response.End();
    }
 

    Bu sayede DataSupplier.aspx i CategoryID queryString'i ile çağırdığımda bana xml bir içerik olarak dataset'i verecek. Şimdi bu sayfayı çağıracak ve xml içeriği yorumlayıp ikinci dropdownliste ekleyecek javascript kodlarımızı yazalım.

     <script type="text/javascript">
                  var obj;
                  function GetDataViaAJAX()
                  {
                        try
                        {
                             obj = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch(e)
                        {
                             try
                             {
                                   obj = new ActiveXObject("Microsoft.XMLHTTP");
                             }
                             catch(e1)
                             {
                                   obj = null;
                             }
                        }
                        if(obj!=null)
                        {
                             obj.onreadystatechange = ProcessResponse;
                             obj.open("GET", "http://localhost/MyTest1/datasupplier.aspx?CategoryId=" + document.getElementById("DropDownList1").value,  true);
                             obj.send(null);        
                        }
                        return false;
                  }
 
                  function ProcessResponse()
                  {
                        if(obj.readyState == 4)
                        {
                             if(obj.status == 200)
                             {
                                   var dsRoot=obj.responseXML.documentElement; 
                                   var ddlProducts = document.getElementById("DropDownList2");
                                   for (var count = ddlProducts.options.length-1; count >-1; count--)
                                   {
                                         ddlProducts.options[count] = null;
                                   }
                                   var orders = dsRoot.getElementsByTagName('ProductName');
                                   var text;
                                   var listItem;
                                   for (var count = 0; count < orders.length; count++)
                                   {
                                         text = (orders[count].textContent || orders[count].innerText || orders[count].text);
                                          listItem = new Option(text, text,  false, false);
                                         ddlProducts.options[ddlProducts.length] = listItem;
                                   }
 
                             }
                             else
                             {
                                   alert("Data erişiminde hata!" );
                             }
                        }
                  }
                 
                  function SetValue()
                  {
                        var selectedvalue=document.getElementById("DropDownList2").value;
                        document.getElementById("Hidden1").value=selectedvalue;
                        return true;
                  }
    </script>
 

    Gördüğünüz gibi. 3 adet fonksiyon bizim için yeterli. GetDataViaAJAX fonsiyonu ile yarattığımız isteği alarak yorumlamak için ProcessResponse fonksiyonuna yönlendiriyoruz. Seçilen değeri tutmak için ise biraz daha uğraşmamız gerekli. Forma hidden bir alan açıyoruz ve SetValue fonksiyonu ile bu hidden alanda seçili değeri tutuyoruz. Son olarak yapmamız gereken ise SetValue ve GetDataViaAJAX fonksiyonlarını çağırmak. Bunun içinde default.aspx sayfasında, Page_Load fonksiyonuna

        DropDownList1.Attributes.Add("onchange", "return GetDataViaAJAX();");
        Button1.Attributes.Add("OnClick", "return SetValue();");

bu işlemleri ekliyoruz. Boylece client tarafındaki eventler ile, yazdığımız javascript fonksiyonlarını kullanabiliyoruz.

    Ve artık postback olmadan veri alışverişi yapabilen bir sayfamız var.

    Kodları download bolumunden indirebilirsiniz.

    İyi Çalışmalar.

Kivanc OZUOLMEZ

Proje (VS.NET 2005 Realese Version)