Makale Özeti

ASP.NET projelerinde çok isimize yariyacak olan birden çok seçmeli DropDown List' i bir User Control olarak yapip sayfalarimizda kullanabiliriz.

Makale

ASP.NET' te Birden Fazla Seçmeli DropDown List Olusturma

     ASP.NET projelerinde çok isimize yariyacak olan birden çok seçmeli DropDown List' i bir User Control olarak yapip sayfalarimizda kullanabiliriz. ASP.NET uygulamarinda, DropDown List içerisindeki Item' leri birden fazla seçme imkani tanimaz. Bunun için farkli yollar,kontroller yapabiliriz.
   
    Bu makalemde, DropDown List' i biraz daha özel(custom) yapip,ihtiyacimiza uygun sekilde kullaniyor olacagiz. Kullanici için birden fazla seçmesini ve bunlari ListBox' a atiyor olmasini sagliyacagiz.
User Control' ümün adi: MultiSelectDropDown' dir. Bunun yapilisi hakkinda kisa bilgi verecegim Ve sonrasinda
Web Sayfamizda nasil kullaniliyor olduguna deginecegim. 
 
    MultiSelectDropDown adinda ki User Control' ümün arka tarafinda kullanmis oldugum bazi javascriptler mevcuttur. Bunlari Kaynak Kod' tan detayli görüyor olacaksiniz. Bunlari PageInit' inde ekledikten sonra ve bazi properties' lerini yazdiktan sonra User Control' ümüz olusmus oluyor.

    Artik User Control' ümüzü Web Sayfamizda kullaniyor durumdayiz.Sayfanin neresinde kullanmak istiyorsak oraya Sürükle-Birak ile kontrolümüzü birakabiliriz. Sirada Web Sayfamizin arka tarafina geçip, Page_Load event' inda DropDown List için uygun degerleri doldurabiliriz.

             
private void Page_Load(object sender, System.EventArgs e)
{
   if (!Page.IsPostBack )
   {
    	MultiSelectDropDown1.Clear();
	MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Mehmet","1")) ;
    	MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Ertugrul","2")) ;
    	MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Merve","3")) ;
    	MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Esra","4")) ;
    	MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Cenk","5")) ;
   }
}

SelectedTexts özelliginden bahsetmek istiyorum. SelectedTexts özelligi, listeden seçilen Item' leri ArrayList olarak geri döndürür,
Degeride SelectedValues özelligi ile.

Asagida kontrolün var olan genel(public) olarak tanimlanmis özelliklerinden bahsediyor olacagim:

SelectedTexts ArrayList türünden listeden seçilen text' lerdir.
SelectedValues ArrayList türünden listeden seçilen Item' lerin uygun degerleridir.
SelectedText Seçilmis text' lerin virgül ile ayrilmis string' lerdir.
SelectedItems ArrayList türünden listeden seçilen Item lerin uygun deger ve text' lerdir.
ListWidth Kontrol genisliginin Get/Set özelliginin kullanilmasi.
List Item' lerin seçilmesi.

Asagida uygulamanin çalisir durumda iken dropdown list' in seçili halini görüyor olacaksiniz:

 

Genislik ayarlarini ListWidht properties' i ile degistirebiliriz.
MultiSelectDropDown1.ListWidth = Convert.ToDouble(txtWidth.Text);
Asagida ki resimde dropdown kontrolünün uzunlugunu yazdiktan sonra "Yeni Genisligi Uygula" butonu ile genislik ataniyor.

DropDown' nin seçili degerlerini ToolTip ile de görebiliriz. Yani kullanicinin, ne seçmis oldugu yardim amaçli yine virgül ile ayrilmis
sekilde dropdown üstünü tiklamadan görebiliriz. Kontrolümüz üstünde "Secilenleri Listeye Ekle" butonuna tıkladığımızda, DropDown' da seçilmis olanlari "Secilen Isimler" adli ListBox' a ekler.
Koduna bakacak olursak:
ListBox1.Items.Clear();
System.Collections.ArrayList selItems = MultiSelectDropDown1.SelectedTexts;
ListBox1.DataSource = selItems;
ListBox1.DataBind();

Asagida küçük kod parçacigimizda da kontrolümüzün seçilenleri nasil atandigini gösteriyor:

ArrayList selectedItems = new ArrayList();

// Listeden Item lerin seçilmesi. 
foreach (System.Web.UI.WebControls.ListItem selItem in ListBox1.Items )
{
     System.Web.UI.WebControls.ListItem li = ListBox1.Items.FindByText(selItem.Text ) ;
     selectedItems.Add(li);
}

MultiSelectDropDown1.SelectedItems = selectedItems;
                        

Böylece "SelectedItems" properties' ini ArrayList olarak tanimlamis oldugumuz SelectedItems sayesinde atiyor(set) durumdayiz.

Makale de yapilmis olan örnegi download link' inden indirebilirsiniz.

Görüsmek dileği ile…
Iyi günler…
metin.altuntas@gmail.com
Proje Dokumani