Asp.net ile Ajax Kontrolleri - 1

10.2.2010 02:35:00 Posted by Kenan KayaOkunma Sayısı: 6769

 Asp.net ile Ajax Kontrolleri - 1

Ajax kullanımı asp.net ile olabildiğince kolaylaştırılmıştır. Bildiğimiz gibi Asp.net teknolojisinin toolbox özelliği kullanıcılarına büyük bir kolaylık sağlamaktadır. Ajax kontrollerini(ajaxtoolkit) internetten indirerek toolbox'a  referans olarak eklediğimizde kolaylıkla kullanabiliriz. Örnek bir uygulama yaparak konuyu temel olarak anlatmaya çalışacağım. Öncellikle buraya tıklayarak "ajaxtoolkit" indirebilirsiniz.

 

Ajax uygulamalarımızda mutlaka olması gereken bir kontrol vardır;  ScriptManager:

Projemizde Toolbox tan Ajax Extentions kontrolleri altından ScriptManager kontrolümüzü projemize ekliyoruz. Sayfada bir adet ScriptManager bulunması yeterlidir. Bu sayede o sayfada birden fazla Ajax Kontrolü kullanabiliriz.

 

 

ScriptManager'ı Asp.net sayfamızda iki "body" etiketi arasına koymamız gerekir(form elemetlerinin arasında olmalıdır). Mümkün olduğunca yukarıda tanımlarsak, daha sağlıklı çalışmasını sağlayacaktır.

 

Toolbox' a sağ tıklayıp "ChooseItems" diyelim. İndirdiğimiz klasörün içindeki "AjaxControlToolkit.dll"  adlı "dll" dosyasını "browse" edelim.

 

 

Browse Edildiğinde Ajax Toolkit, ToolBox'ta yukarıdaki gibi listelenecektir. Buradaki kontrollerle ilgili eğitimleri buraya tıklayarak izleyebilirsiz. Ancak eğitim videoları İngilizcedir. Ama anlamakta sorun çekmeyeceğinizi düşünüyorum.

 

Uygulama bir adet UpdatePanel, DropdownList ve GridView ekliyorum. Dropdownlist ve Gridview kontrollerimi UdatePanel içerisine sürükleyerek orada işlem yapmalarını sağlıyorum.Çünkü sadece UpdatePanel içerisi güncellecektir.

 

Şimdi projemin kod tarafına geçerek veritabanından çekeceğim sorguları asenkron bir şekilde GridView de  göstermeye çalışacağım.

 

Sayfamın PageLoad olayında northwind veritabanımdan kategorileri getiriyorum:

 

   if (!IsPostBack)

    {

      KategoriGetir();

    }

        private void KategoriGetir()

        {

            SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True");

            SqlCommand comm = new SqlCommand("select CategoryID,CategoryName from Categories", conn);

            SqlDataAdapter da = new SqlDataAdapter(comm);

            DataTable dt = new DataTable();

            da.Fill(dt);

 

            ddlKategoriler.DataSource = dt;

            ddlKategoriler.DataTextField = "CategoryName";

            ddlKategoriler.DataValueField = "CategoryID";

            ddlKategoriler.DataBind();

            ddlKategoriler.Items.Insert(0, new ListItem("Seçiniz...", "0"));

        }

 

Dropdownlist Kontrolümü çift tıklayarak kod tarafına gidiyorum. Amacım kategori seçildiğinde direk  işlem yapması. Unutmayalım ki bu kontrolün "Enable AutoPostBack" özelliği "true"  olmalıdır. Yoksa Kategori seçtiğimizde işlem gerçekleşmeyecektir.

 

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

        {

            if (ddlKategoriler.SelectedValue != "0")

            {              

                SqlDataAdapter da = new SqlDataAdapter("select productName, unitprice from products where CategoryID=@ID", "Data Source=.;Initial Catalog=Northwind;Integrated Security=True");

                da.SelectCommand.Parameters.AddWithValue("@ID", ddlKategoriler.SelectedValue);

                DataTable dt = new DataTable();

                da.Fill(dt);

                GridView1.DataSource = dt;

                GridView1.DataBind();

            }

 

Şimdi uygulamamızı çalıştırarak test ediyoruz.

  

Sayfa açıldığında, DropdownList, sorgumuz sonucunda kategoriler ile doluyor. Kategori seçiyoruz ve sayfa postback olmadan hemencecik altta gridview ortaya çıkıyor(Burada sadece postback olan UpdatePaneldir). Yani asenkron bir çalışma örneğidir ortaya çıkıyor.

Kısacası sayfamız ilk açıldığında kategoriler DropdownList'e doldu. Kullanıcı bir kategori seçtiğinde Gridview seçilen kategorideki ürünleri sayfada karşımıza çıkardı. Çıkardı ama sayfanın tamamı gitmeden.. yani sadece UpdatePanelin içeriği postback oldu.

 

Düşünün ki sitenizde herhangi bir kullanıcı kategoriden ürün seçti. Ürünü seçtiğinde sayfa PostBack olur. Kullanıcı sadece bir ürün seçti ama sayfanın tamamı sunucuya gitti ve geldi. Gereksiz yere zaman kaybı oldu. Ajax bu tip işlemlerde sadece kullanıcının seçtiği alanı PostBack yapar. Sayfanın tamamını sunucuya göndermeyerek bizim için hem sunucu maliyeti hem de sitede gezinenler için kolaylıklar sağlar.

 

 

 


ETİKETLER: Asp.net ile Ajax Kontrolleri, Updade panel, asp.net ajax, ajax control toolkit, ScriptManager, ajax kontrolleri,

Yorumlar

cem(15.08.2011 / 12:54)

slm bir sorum olacak ben günlerdir uğraşıyorum araştırıyorum adam akıllı bi rsonuca ulaşamadım benim yapmak istediğim dropdownliste kategori ve onun alt kategorilerini listeleme kategori tablomda HaberKatId,KategoriAdi,Ana,AnaId mevcut Ana=0 olduğunda ana kategoriler ana=1 olduğunda alt kategoriler protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { KategoriCek(); } } private void KategoriCek() { SqlConnection baglanti = system.baglan(); SqlCommand cmdUstKategori = new SqlCommand("Select * from HaberKategori Where Ana=1", baglanti); SqlDataAdapter da = new SqlDataAdapter(cmdUstKategori); DataTable dt = new DataTable(); da.Fill(dt); ddlKategoriler.DataSource = dt; ddlKategoriler.DataTextField = "KategoriAdi"; ddlKategoriler.DataValueField = "HaberKatId"; ddlKategoriler.DataBind(); ddlKategoriler.Items.Insert(0, new ListItem("Seçiniz...", "0")); } bu şeklde sadece ana kategoriler listeleniyor yardımcı olursanız sevinirim.