Asp.net ile Ajax Kontrolleri - 1
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,
