24 Eylül 2009 Perşembe

Bu yazıda Ajax Kontrollerinden CascadingDropDown'un nasıl kullanıldığını, web site olarak açılan proje içerisinde xml veri dosyasının nasıl oluşturulduğunu yaptığımız örnekle anlamaya çalışacağız.

Makale5_0

Çalıştığımız Visual Studio içinde Ajax Control Toolkit Web Site seçeneği mevcut değilse --------- linkinden indirip kurabilirsiniz

İlk olarak App_Data dosyasının içine yeni ekle deyip XMLFile ekliyoruz. Bu aynı zamanda proje içindeki veri kaynağı olarak kullanılacak veri dosyası olma özelliğini de taşıyor. Aşağıdaki gibi bir liste hazırlamayı uygun gördüm.

<?xml version="1.0" encoding="utf-8" ?>

<KitapDukkani>

<turu name="Roman">

<yazar name="George Orwel">

<kitap name="1984" />

<kitap name="Hayvan Çiftliği" />

<kitap name="Papazın Kızı" />

</yazar>

<yazar name="Dostoyevski">

<kitap name="Karamazof Kardeşler"/>

<kitap name="Suç ve Ceza"/>

<kitap name="Budala"/>

</yazar>

<yazar name="Tolstoy">

<kitap name="Anna Karanina" />

<kitap name="Savaş ve Barış" />

<kitap name="Diriliş" />

</yazar>

</turu>

<turu name="Şiir">

<yazar name="Turgut Uyar">

<kitap name="Dünyanın En Güzel Arabistanı" />

<kitap name="Kayayı Delen İncir" />

<kitap name="Dün Yok mu" />

</yazar>

<yazar name="Oruç Aruoba">

<kitap name="İle" />

<kitap name="Yürüme" />

<kitap name="De ki İşte" />

</yazar>

<yazar name="Can Yücel">

<kitap name="Sevgi Duvarı" />

<kitap name="Gökyokuş" />

<kitap name="Beşibiyerde" />

</yazar>

</turu>

</KitapDukkani>

Koda dikkat edersek basit bir mantıkla yazılmıştır. Tür, birçok kitabı kapsadığı için en dışta. Yazar, kendi içinde seçenekler sunduğu için kısımsal. Kitap, kendine özel olduğu için tek satırda.

Projemize yeni bir web servis ekleyerek devam ediyoruz.

Makale5_1

Bu servis içerisin de yapmak istediğimiz, xml dosyasının içindeki verileri, yolunu göstererek web servis içindeki kontrollere bağlamak. Başlangış olarak isim alanımızın üzerine [ScriptService] ekleyerek Script servis çağırma işlemini yapıyoruz. Bunu ekledikten sonra alt+shift+f10 yaparak using alanına using System.Web.Script.Services eklenmesini unutmamak gerekir. Aynı işlemi aşağıdaki XmlDocument i ekledikten sonrada tekrarlayarak using System.Xml ifadesinin projeye dahil olmasını sağlıyoruz. Bu xml veri dosyasındaki bilgilerin web servis üzerinden erişilebilirliğini sağlayacak. Ayrıca object olarak tanımladığımız _lock dikkatinizi çekmiştir. Get bloğu altındaki lock fonksiyonunun görevi blok içindeki görev bitmeden dışarıdan “KitapService.xml” dosyası nı kilitleyerek üzerinde herhangi bir işlem yapılmasını engellemek.

// uye degiskenler

private static XmlDocument _dokuman;

private static object _lock = new object();

// disariden cagirabilmek icin public static olusturduk

public static XmlDocument Dokuman

{

get

{

lock (_lock)

{

if (_dokuman == null)

{

// xml veri okunur

_dokuman = new XmlDocument();

_dokuman.Load(HttpContext.Current.Server.MapPath("~/App_Data/KitapService.xml"));

}

}

return _dokuman;

}

}

public static string[] Hierarchy

{

get

{

return new string[] { "turu", "yazar" };

}

}

Görünşü bu şekilde olacaktır. Yine aynı isim alanı içine aşağıdaki methodu yazıyoruz.

[WebMethod]

public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

{

// Kategorisi bilinen degerler / veri çiftleri

StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

// veri dosyası içinde karşılaştırma sorgusu

return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Dokuman, Hierarchy, knownCategoryValuesDictionary, category);

}

Burada amaç, proğramın çalışması sırasında seçilen değerlerin dosya içinde sorgulanarak ilişkisel olanların önümüze getirilebilmesi.

Default.aspx sayfası üzerine gelerek, 3 tane Label, 3 tane drop down list, 1 tane update Panel ve panel içine 1 tane daha label sürükleyelim.

Makale5_2

Bunlar türü, yazarı, kitabı seçmemizi sağlayacaklar. Kitap seçtirecek olan DropDownList3 ün özelliklerinden otomatik postback olma özelliğini (Enable AutoPostBack) açıyoruz. Label’in altına 3 tanede Cascading Drop Down sürüklüyoruz. Tetikleme kontrolünü, kategorisini, istek metnini ve yükleme sırasındaki metni taımlıyoruz. Kod bloğu aşağıdaki gibi görünüyor.

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"

Category="turu" PromptText="Tür Seçiniz.." LoadingText="[seçiliyor..]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"

Category="yazar" PromptText="Lütfen yazar seçiniz" LoadingText="[seçiliyor...]"

ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3"

Category="kitap" PromptText="Lütfen Kitap seçiniz" LoadingText="[seçiliyor...]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents"

ParentControlID="DropDownList2" />

Update panelin tetikleme kolleksiyonuna en son seçtirilecek olan kitap menüsünü tanımlıyoruz.

Makale5_3

Default.aspx dizayn sayfası üzerindeki DropDown3 üzerinde çift tıklayarak Default.aspx.cs sayfası üzerine seçim indexi değiştiğinde gerçekleşmesini istediğimiz olayların yazıldığı kod bloğunun oluşmasını sağlıyoruz.

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)

{

string tur = DropDownList1.SelectedItem.Text;

string yazar = DropDownList2.SelectedItem.Text;

string kitap = DropDownList3.SelectedItem.Text;

if (string.IsNullOrEmpty(tur))

{

Label1.Text = "Lütfen tur seçiniz..";

}

else if (string.IsNullOrEmpty(yazar))

{

Label1.Text = "Lütfen yazar seçiniz.";

}

else if (string.IsNullOrEmpty(kitap))

{

Label1.Text = "Lütfen kitap seçiniz.";

}

else

{

Label1.Text = string.Format("Seçtiginiz Kitap {1} turunde yazilmis, {2} tarafindan kaleme alinmis {0}. Iyi okumalar.", kitap, tur, yazar);

}

}

[WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)

{

return new KitapService().GetDropDownContents(knownCategoryValues, category);

}

Düzenlemeleri yaptıktan sonra proğramı çalıştırabiliriz.

Makale5_4

Bu yazımızda beraberce yaptığımız örnekle Axaj kontrollerinde Cascading Drop Down Listi nerde kullanabileceğimizi, xml olarak hazırlanan bir veri dosyasını proje içinde nasıl kullanabileceğimizi kavramaya çalıştık. Umarım sizin için yararlı olmuştur.

kaynak: http://www.asp.net/

Sermin Yağcı

5 yorum:

ARK Techno dedi ki...

Merhaba Şermin Hanım,
Eskişehir den yazıyorum.Gerçekten çok yararlanacağım bir Blog sayfanız var.Bilgi paylaşımlarınız için Teşekkürler.

Çalışmalarınızda Başarılar Dilerim
RIDVAN ARIK

Sermin Yağcı dedi ki...

Sizlere yardımcı olabilmek bizler için çok büyük mutluluk.
Böyle geri bildirimler bizleri daha çok bilgi paylasmaya yöneltiyor. Çok teşekkürler...

Sermin Yağcı

Adsız dedi ki...

Merhaba Nermin Mükemmel bir iş çıkarmıssının Tebrik ederim bende askerden gelince senin gibi bir uzman olucam inşallah

Nurullah kahya

my web site:
eXe YAzılım...

Adsız dedi ki...

ben bu tarz bişiyi access mdb database ini kullanarak oledb ile yapmalıyım nasıl yapacağım? izleyeceğim yol ve yazılacaklar aynı mı değişiyor mu? teşekkürler...

bir de benim anlamığım zaten dropdownlist kullanıyorsunuz burada cascadingdropdown ne işe yarıyor?sayfayı postback etmeden dropdownlist leri kullanmaya mı?

bir de ajaxdropdownextender var onun bundan farkı ne? o daha kullanışlı değil mi?onda yine aynı kontroller mi geçerli?aynı kodlar mı yazılacak? teekkürler...

geri dönüş için lütfen e-posta adresimi kullanın, teşekkürler...

info@gurseldesign.com

Diyet Zayıflama Egzersiz dedi ki...

merhaba uygulamamın bir bölümünde benzer bir olayı kullanmak istedim. ancak dropdownlist değerini alırken sadece ilk değerleri alıyor. sizde ilk değerleri seçmişsiniz. yani şunu diyeyim. diyelim ki marka seçtiniz modeller geliyor siz gelen modeller arasındaki en son en alttaki modeli seçiyorsunuz. modeldropdownlistinin value sini alırken modeldropdownlistinin ilk satırındaki modelin değerini alıyor. diğer taraftan cascadingdropdown.selectedvalue dediğinizde hem id değerini hem ismi birlikte çektiği için veri tabanına insert etmek istediğimizde model idsi int olmadığı için sorun oluyor. bu konuda yardımcı olabilir misiniz?