Asp.NET ‘te form oluştururken HTML form elemanlarının yerine sunucu tarafında çalışan form elemanlarını kullanırız. Sunucu taraflı form elemanları daha işlevseldir. Asp.Net ‘te form elemanları form etiketi içinde tanımlanır. <form runat=”server”>form elemanları</form>. Form elemanlarını form etiketi içinde tanımlamazsak hata mesajı alırız. Form elemanları System.Web.UI.HtmlControls ad alanı altındaki sınıflara ait sunucu kontrolleridir.
ASP.Net ‘te sunucu kontrollerini kullanmak için System.Web.UI.HtmlControls ad alanını import bildirimiyle eklemeye gerek yoktur. Çünkü bu ad alanı ASP.NET tarafından otomatik olarak sayfaya eklenir. Bu yazımızda en çok kullanılan form elemanlarını ve özelliklerini ele alacağız. Bu form elemanlarından en çok kullanılanlarını şöyle sıralayabiliriz : textbox, label, button, Linkbutton, Hyperlink, Dropdownlist, listbox, checkbox, radiobutton, fileupload, panel. Bu form elemanları sayfaya eklenirken hepsinde runat=”server” özelliği olmalıdır.
Dreamweaverda sayfaya form elemaı eklerken ASP.NET sekmesini kullanırız. Fakat bazı kontroller bu sekmede yer almaz. Bunları sayfamıza eklemek için yine ASP.NET sekmesinde yer alan More Tags (daha fazla etiket anlamına gelir) butonuna tıklamalıyız. Karşımıza çıkan pencerede ASP.NET bölümünden Web Server Controls sekmesini açarsak burda daha fazla kontrole ulaşabiliriz.
Şimdi bu kontrolleri inceleyelim.
Textbox (Metin Alanı) :
Veri girişi yapılan kontroldür. Textbox ile şimdiye kadar birkaç örnek yaptık. Burda textbox kontrolünün bazı özelliklerine değinelim.
Textbox kontrolünü sayfaya;
<asp:TextBox ID=”kullaniciadi” runat=”server”></asp:TextBox> kodlarıyla ekleriz. Bu kodlar standart ve en yalın halidir. ID özelliği textbox kontrolünün ismidir. Burada textbox kontrolüne “kullaniciadi” ismi verilmiştir. ID değeri bir sayfada iki kontrolde aynı olamaz. Yani siz sayfada iki textbox kontrolü oluşturdunuz ve ikisinede “sifre” şeklinde bir isim veremezsiniz. Bu her vatandaşda bulunan TC kimlik numarasına benzer. Her vatandaşın kimlik numarası ayrıdır.
Textbox kontrolünün kullanılışı ile ilgili örnekler ve özellikleri :
1
2
3
4
5
6
7
8
9
10
11
12
| <%@ Page Language="VB"%><script runat="server">Sub Page_Load(Src As Object, E As EventArgs)kullanciadi.text="Kullanıcı Adınızı Giriniz."End Sub</script><html><body><form runat="server"><asp:TextBox TextMode="SingleLine" ID="kullaniciadi"runat="server" BackColor="#CCFF99" BorderColor="#000066" Font-Bold="True"Font-Size="12px" ForeColor="White"></asp:TextBox></form></body></html> |
Bu örnekte textbox kontrolünün temel özelliklerini görüyoruz. Asp.NET kontrollerinin özelliklerini hem kod bloğunda hemde kontrol içinde düzenleyebiliriz. Text özelliği ile tetxbox kontrolündeki yazıyı değiştirebiliriz. Textmode=”multiline” değeri ile tetxbox kontrolünü çok satırlı(Mesaj yazmak için gerekli alan), textmode=”password” değeri ile şifreli hale getirebiliriz. Tetxbox kontrolünün tüm özelliklerini kullandığınız programda görebilirsiniz. Dreamweaverda aşağıdaki gibidir.
Textbox kontrolünün TextChanged metodu vardır. Bu method ile textbox kontrolüne veri girişi yapılırken kod çalışıtırabiliriz. ontextchanged=”kontrol” özelliği ile textbox a veri girilirken kontrol adlı kod bloğuna gidilmektedir.
Label :
ASP.Net ‘te ekrana metin yazdırmak için kullanılan kontroldür. Asp de ekrana yazı yazdırmak için response.write metodu kullanılırdı. Bu metod Asp.NET te de var fakat label etiketi daha çok kullanılmaktadır. Önceki derslerdeki program örneklerinde label kontrolünün kullanılışını görebiliriz. Textbox için kullanılan temel özellikler yazı rengi(forecolor), arkaplan rengi (backcolor), font-size gibi özellikler label içinde geçerli. Yukarıdaki resimde textbox seçili iken belirtilen düğmeye basılırsa textbox öxellikleri açılır. Aynı özellik penceresi label ve diğer form elemanları içinde geçerlidir.
Button :
Sayfaya düğme eklemeye yarar. Hemen bir örnekle kullanılışını görelim.
1
2
3
4
5
6
7
8
9
10
11
12
| <%@ Page Language="VB"%><script runat="server">Sub git(Src As Object, E As EventArgs)response.Redirect("sayfa2.html")End Sub</script><html><body><form runat="server"><asp:Button ID="Button1" runat="server" Text="Sayfa 2" OnClick="git" /></form></body></html> |
Bu örnekte onclick=”git” özelliği ile butona tıklandığında “git” isimli kod bloğuna gidiliyor. Bu kod bloğunda response.redirect(“sayfa2.html”) kodu parantez içine yazılan sayfaya gitmeye yarar. Bazı sitelerde üye girişi yaptıktan sonra anasayfaya yönlendirilme gibi.
Linkbutton :
Bu kontrol yukarıda bahsettiğimiz button kontrolü ile tamamen aynıdır. Tek farkı Linkbutton kontrolünün yazı şeklinde görünmesidir.
<asp:LinkButton ID=”LinkButton1″ runat=”server”>Sayfa 2</asp:LinkButton> şeklinde sayfaya eklenir.
HyperLink :
Metin veya resim linki oluşturur. Resim linki oluşturmak için ImageUrl özelliği ayarlanır. Text ve ImageUrl özelliklerinin her ikisi de ayarlanırsa resim linki önceliği alır, metin ise araç ipucu (Tool Tip) görevini üstlenir. Resim görüntülenemezse metin görüntülenir. Gidilecek sayfa navigateurl özelliği ile ayarlanır. Html etiketlerindeki <a href=”"></a> etiketinin yerini alır.
<asp:HyperLink ID=”hyperlink1″ ImageUrl=”" NavigateUrl=”sayfa2.html” runat=”server” Text=”Sayfa 2″></asp:HyperLink> kodunda hyperlinke tıklandığında sayfa2.html ye gider. İmageUrl de bir resim belirtilirse link belirtilen resim şeklinde görüntülenir.
Dropdownlist
Aşağı açılan bir liste görüntüleyen kontroldür. Çeşitli veri kaynakları bu kontrole bağlanabilir. Diziler, veritabanı vs. Şimdi bu kontrolün kullanıldığı bir örnek yapalım. Bu örnekte dropdownlistte seçilen renk labelda gösteriliyor.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %><script runat="server">Sub secim(Src As Object, E As EventArgs)label1.text=dropdownlist1.selecteditem.textEnd Sub</script><html><body><form runat="server"><asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="secim"AutoPostBack="true"><asp:ListItem value="k">KIRMIZI</asp:ListItem><asp:ListItem value="y">YEŞİL</asp:ListItem><asp:ListItem value="m">MAVİ</asp:ListItem><asp:ListItem value="s">SARI</asp:ListItem></asp:DropDownList><asp:Label ID="Label1" runat="server" /></form></body></html> |
Bu programda dropdownlistte seçilen yazıyı elde etmek için dropdownlist1.selecteditem.text komutu kullanılır. selecteditem.text seçili elemanın yazısı anlamına gelir. Seçim yapıldığında OnSelectedIndexChanged=”secim” olayı ile secim isimli kod bloğuna gidilir. “OnSelectedIndexChanged” seçili eleman değiştiğinde anlamına gelir. Autopostback=”true” özelliği ise seçim yapıldığında bilgilerin sunucuya postalanmasını sağlar. Autopostback=”false” yapılırsa seçim yapıldığında hiç bir olay olmaz. Bu özellik sayesinde buton ile bilgileri göndermiş gibi oluruz. Yukarıdaki dropdownlistte value diye bir özellik var. Value değeri her eleman için tanımlanır ve farklıdır. Kod içinde hangi elemanın seçildiğini value değeri ile anlayabiliriz. Şimdi value değerini kullanan başka bir örnek yapalım.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <%@ Page Language="VB"%><script runat="server">Sub islem(Src As Object, E As EventArgs)if dropdownlist1.selecteditem.value="t" thenlabel1.text=cint(textbox1.text)+cint(textbox2.text)else if dropdownlist1.selecteditem.value="c" thenlabel1.text=cint(textbox1.text)-cint(textbox2.text)else if dropdownlist1.selecteditem.value="b" thenlabel1.text=cint(textbox1.text)/cint(textbox2.text)elselabel1.text=cint(textbox1.text)*cint(textbox2.text)end ifEnd Sub</script><html><body><form runat="server">Sayı1:<asp:TextBox ID="TextBox1" runat="server" />Sayı2:<asp:TextBox ID="TextBox2" runat="server" /><asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="islem"AutoPostBack="true"><asp:ListItem value="t">TOPLA</asp:ListItem><asp:ListItem value="c">ÇIKAR</asp:ListItem><asp:ListItem value="b">BÖL</asp:ListItem><asp:ListItem value="ca">ÇARP</asp:ListItem></asp:DropDownList><asp:Label ID="Label1" runat="server" /></form></body></html> |
Bu örnekte resimdende anlaşılacağı gibi sayfada iki metin alanı var. Girilen bilgiler ile dropdownlistte seçilen seçeneğe göre dört işlem yapılıyor. Hangi seçeneğin seçildiğini dropdownlist1.selecteditem.value kodu ile anlıyoruz. Burda dropdownlist1.selecteditem.text de kullanılabilir. Fakat yazılar uzun olduğunda kod içinde kullanılması da uzun olacaktır.
Dropdownliste çeşitli veri kaynaklarından veri bağlanabildiğini söylemiştik. Şimdi bununla ilgili bir örnek yapalım.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <%@ Page Language="VB" %><script runat="server">Sub Page_Load(Src As Object, E As EventArgs)dim iller() as string={"Adana","Ankara","İstanbul","Trabzon"}dropdownlist1.datasource=illerdropdownlist1.databindEnd Sub</script><html><body><form runat="server">İl Seçiniz :<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></form></body></html> |
Bu örnekte sayfa yüklendiğinde iller adında bir dizi tanımlanıyor ve diziye değerleri veriliyor. Dizileriönceki derslerde anlatmıştık. Daha sonra dropdownlist1 in veri kaynağı (datasource) iller adlı idiz olarak belirleniyor ve databin komutu ile veriler dropdownliste bağlanıyor.
Diğer form elemanlaını sonraki derse bırakalım. Verilen örneklerin kaynak dosyalarına buradanulaşabilirsiniz. Ayrıca kodların üzerine gelindiğinde çıkan kod <> simgesinden kodları kopyalayabilirsiniz.
Sonraki derste Listbox, Checkbox, Radiobutton, Panel, Fileupload kontrolleri ile ilgili örnekler yapacağız.
Sözlük :
textbox : metin kutusu
label : etiket
Button : buton, düğme
multiline : çok satır
singleline:tek satır
password: şifre
teztmode : yazı modu
change : değiştirmek
redirect : yönlendirme
Selected : seçili
item : eleman
datasource : veri kaynağı
databind : veri bağla
value : değer
Hiç yorum yok:
Yorum Gönder
YORUMUNUZ EKLENMİŞTİR TEŞEKKÜRLER...