Seçim Bileşenleri

Eyl 06, 2013

Web sunucu kontrolleri

Günümüzde program geliştirme ortamlarının çoğu birçok kontrol içermektedir. Web tabanlı uygulamaları geliştirebilmek ve arabirimleri tasarlayabilmek için kullanılan kontrollerin sayısı gün geçtikçe artmıştır. 
Web ortamı, çift taraflı çalışabilen kodların çalıştığı bir teknolojidir. Sunucu taraflı ve istemci taraflı şeklindedir. Asp.Net açısından incelendiğinde genellikle kodlamalar ve kontroller vardır. Asp.Net ‘te bulunan Web Sunucu Kontrolleri  System.Web.UI.Web Controls isimli bir namespace (isim uzayı) 'te bulunan class (sınıf) ’ların oluşturduğu kontrollerdir. Web sunucu kontrolleri çalışma sırasında HTML kodlamasına çevrilirler ve tarayıcılarda çıktılar yorumlanabilir bir HTML çıktısı olarak alınır. 

Radiobutton (Onay Düğmesi)

Radiobutton sunucu kontrolleri Web sayfasında onay düğmelerinin oluşturulması ve birden fazla seçenek arasından birinin seçilebilmesi için tasarlanmıştır. Örneğin bir soru için birden fazla yanıt mevcut ise ve tek seçim yapılması gerekiyorsa onay düğmeleri kullanımı gerekmektedir.

Enable: Web sunucu kontrolünün etkin olup olmadığını gösteren değeri ifade eder.
ID: Sunucu kontrolüne atanan programatik tanımlayıcıyı ifade eder.
Runat: Asp.Net'deki script (küçük program) 'in sunucu-işlemci arasında çalışmasını sağlayan komuttur.
Text: Checkbox (işaret kutucuğu) ile ilgili metin etiketlerinin belirlenmesini sağlar.

Aşağıda Radiobutton ile oluşturulmuş bir örnek gösterilmiştir:

<html>
<body>
    <form id="Form1" runat="server">
    Bir renk seciniz
    <br />
    <asp:RadioButton ID="kırmızı" Text="Kırmızı" Checked="True" 
                     GroupName="colors"  runat="server" />
    <br />
    <asp:RadioButton ID="yesil" Text="Yesil" GroupName="colors"
                     runat="server" />
    <br />
    <asp:RadioButton ID="mavi" Text="Mavi" GroupName="colors" 
                     runat="server" />
    <br />
    <asp:Button ID="Button1" Text="Submit" OnClick="submit"
                runat="server" />
    <p>
    <asp:Label ID="Label" runat="server" /></p>
    </form>
</body>
</html>

RadioButtonlist (Onay Düğmesi Listesi)

Radiobuttonlist kontrolü onay düğmelerinden bir grup oluşturulmasını sağlar. Bu kontrol ile bağlayıcı verileri kullanarak tek seçimli onay düğmelerinden bir dizi oluşturulması sağlanır. RadioButtonlist kontrol kullanılırken her seçilebilir öğe ’listitem’ ile tanımlanır.

Items: Liste kontrolündeki öğelerin hepsinin alınmasını sağlar.
SelectedItem: Liste kontrolüğdeki en düşük indeksli seçilen öğenin alınmasını sağlar.

Aşağıda Radiobuttonlist ile oluşturulmuş dört örnek gösterilmiştir:

<asp:radiobuttonlist id="RadioButtonList" runat="Server">
<asp:ListItem text="Kırmızı" value="kırmızı">
</asp:ListItem>
<asp:ListItem text="Mavi" value="mavi">
</asp:ListItem>
<asp:ListItem text="Yesil" value="yesil">
</asp:ListItem>
</asp:radiobuttonlist>
<asp:radiobuttonlist id="RadioButtonRunTime" runat="server" />
<asp:radiobuttonlist id="RadioButonListBind" runat="Server" 
                     datatextfield="Name" datavaluefield="ID" />
<asp:radiobuttonlist id="RadioButtonListBoundFire" runat="Server" 
                     datatextfield="Name" datavaluefield="ID"    
                     onselectedindexchanged="FireOnSelectedIndexChangd" 
                     autopostback="true" />

Checkbox (İşaret Kutucuğu)

Checkbox kontrolü, Web sayfasında işaret kutucuklarının oluşturulmasında kullanılır. Bu kontrol seçim yapılabilmesi için bir seçenek sunar. Bir işaret kutucuğu onay düğmesinin aksine, seçmek için tıklandıktan sonra tekrar tıklanarak seçenek kaldırabilinir. Seçenek seçildiğinde ‘tik’ şeklinde bir simge oluşur.

AutoPostback: Tıklandığında "Checkbox" kontrolü otomatik olarak sunucuya mesaj gönderildiğini ifade eder.
ItemTemplate: Veri nesnelerinin görselleştirmelerini belirtmek için kullanılır.

Aşağıda "Checkbox" ile oluşturulmuş bir örnek gösterilmiştir:

<asp:checkbox id="gosterim" oncheckedchanged="gosterim_bicimi" 
              text="Tablo Halinde Göster" autopostback="true"
              runat="server" />
<asp:checkbox id="yon" oncheckedchanged="yon_degisti" runat="server"
              text="Yatay Göster"
              autopostback="true" />
<asp:button   id="Button1" runat="server" text="Gönder" 
              onclick="Buton_tiklandi" />
<asp:label    id="Label1" runat="server" text="Label">
</asp:label>

Checkboxlist (İşaret Kutucuğu Listesi)

"Checkboxlist" kontrolü, checkbox kontrollerinden oluşan bir dizidir. Bu kontrolü, Web sayfasında birden fazla seçim  yaparak yanıtlanabilecek seçeneklerin oluşturulmasında kullanılır. "Checkboxlist", form üzerindeki "checkbox"a karşılık gelen değerlerin ‘items’ koleksiyonuna sahiptir. Onay düğmelerinin aksine, Checkboxlist ile işaret kutucuklarında birden fazla seçim yapılabilmektedir. "Checkboxlist" kontrolü, "checkbox" kontrollerinden oluşan bir dizidir. Bu kontrolü, Web sayfasında birden fazla seçim yaparak yanıtlanabilinecek seçeneklerin oluşturulmasında kullanılır. "Checkboxlist", form üzerindeki checkbox’a karşılık gelen değerlerin ‘items’ koleksiyonuna sahiptir. Onay düğmelerinin aksine, "Checkboxlist" ile işaret kutucuklarında birden fazla seçim yapılabilmektedir.

RepeatLayout: Listede bir tablo elementi, bir 'ul' elementi, bir 'ol' elementi ya da bir 'span' elemanı kullanılarak oluşturulup oluşturulmayacağının belirlenmesini sağlar. 
UniqueID: Sunucu kontrolü için benzersiz, hiyerarşik, nitelikli, belirleyici alınmasını sağlar.

Aşağıda Checkboxlist ile oluşturulmuş bir örnek gösterilmiştir: 

<asp:checkboxlist id="CheckBoxList1" runat="Server">
<asp:ListItem     Text="Siyah" Value="siyah"></asp:ListItem>
<asp:ListItem     Text="Mavi" Value="mavi"></asp:ListItem>
<asp:ListItem     Text="Yesil" Value="yesil"></asp:ListItem>

</asp:checkboxlist>
<asp:checkboxlist id="CheckBoxRunTime" runat="server">
</asp:checkboxlist>
<asp:checkboxlist id="CheckBoxBind" runat="Server"
                  datatextfield="Name" datavaluefield="ID">
</asp:checkboxlist>
<asp:checkboxlist id="CheckBoxBoundFire" runat="Server"
                  datatextfield="Name" datavaluefield="ID"
                  repeatlayout="Table">
</asp:checkboxlist>

Bulletedlist (Madde İmli Liste)

Madde işaretli liste sunucu kontrolü sıralı veya sırasız öğelerin kolayca aynı madde işaretiyle listeli bir biçimde  görüntelemesini sağlar. Listede bulunan tek öğeli listeler için madde işaretli liste kontrol açılış ve kapanış etiketleri arasına her liste için ‘listitem’ kontrolü eklenir.

DisplayMode: Bu özellik liste öğesi içeriğinin davranışının görüntülerini ayarlamak için bir Bulletedlist kontrolünde numaralandırma değerlerini kullanır.

Aşağıda Bulletedlist ile oluşturulmuş bir örnek gösterilmiştir:

<asp:bulletedlist id="ItemsBulletedList" bulletstyle="Disc"
                  displaymode="Text" onclick="ItemsBulletedList_Click"
                  runat="server">  
<asp:ListItem Value="http://www.internetadresi1.com">adres1</asp:ListItem>
<asp:ListItem Value="http://www.internetadresi2.com">adres2</asp:ListItem>
<asp:ListItem Value="http://www.internetadresi3.com">adres3</asp:ListItem> 
</asp:bulletedlist>

 

DropDownlist (Açılan Liste) 
DropDownlist kontrolü, açılabilen bir liste oluşturmak için kullanılır. Bu kontrol oluşturulurken her seçilebilir öğe bir 'listitem' elemanı tarafından belirlenir.

BorderColor: Kontrolün kenarlık rengini ayarlar.
BorderStyle: Kontrolün kenarlık stilini ayarlar.
BorderWidth: Kontrolün kenarlık genişliğini ayarlar.

Aşağıda DropDownlist ile oluşturulmuş bir örnek gösterilmiştir:

<asp:dropdownlist id="DropDownList1" runat="server">
<asp:ListItem>Konu 1</asp:ListItem>
<asp:ListItem>Konu 2</asp:ListItem>
<asp:ListItem>Konu 3</asp:ListItem>
<asp:ListItem>Konu 4</asp:ListItem>
</asp:dropdownlist>
<br>
<asp:button id="Button1" text="Submit" onclick="Button_Click" 
            runat="server" />
<br>
<asp:label id="Label1" runat="server" />