WEB FORM ELEMANLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
Giriş Web form kavramı ASP.NET ile gelen ve yeni olan bir terimdir. Web formlarının geliştirilmesindeki temel amaç, web geliştirme ortamında, kullanıcıya gözüken birimleri sunucunun kontrolüne almaktır. Web form kontrolleri,.net çatısı altında temel iki namaspace altında toplanmıştır System.Web.UI.HtmlControls System.Web.UI.WebControls Bu namespace ler ASP.NET sayfamız tarafından default olarak kullanılırlar, yani bunları import ifadesi kullanarak sayfamıza dahil etmemiz gerekmez.
HTML Sunucu Kontrolleri System.Web.UI.HtmlControls namespace indeki class lara ait kontrollerdir. Bildiğimiz HTML elemanları ve formları, birkaç ilave ile, sunucu kontrollerine çevrilerek, bu namespace ait class vasıtasıyla birer nesne olarak kullanılabilirler Bir HTML elemanını bir HTML kontrolüne çevirmek için o elemana runat=server şeklinde bir ifade eklemek yeterlidir. Örneğin bir HTML elemanı olan metin girdisini aşağıdaki şekilde bir sunucu kontrolüne çevirebiliriz Böylece InputText elemanımız artık bir sunucu kontrolüdür
HTML Sunucu Kontrolleri Örnek olarak klasik bir giriş kutusu ve buton içeren bir sayfa oluşturalım
HTML Sunucu Kontrolleri Öncelikle HTML elemanlarını runat_server ifadesi ile sunucu kontrolüne almalıyız Bu haliyle sayfamız sunucun kontrolüne geçiyor ve progmatik olarak nesneye yönelik bir mantıkla uygulamamızı geliştirme imkanı tanıyor
HTML Sunucu Kontrolleri Butonun click olayında çalışacak yaz() isimli metot tanımı yapıp sayfamızı çalıştırdığımızda, web kontrollerini kullanarak geliştirdiğimiz sayfalar gibi çalışacaktır.
HTML Sunucu Kontrolleri Ancak burda onclick olayı yerine onserverclick şeklinde bir tanım kullandık. Bunun nedeni HTML form elemanlarının client taraflı script olaylarını tanımlama ihtimalinin olmasıdır. Bu karışıklığı engellemek için, sunucu olayını bir server ifadesi ile diğerinden ayırmak gerekir.
System.Web.UI.WebControls namespace inde tanımlı class ların oluşturduğu kontrollerdir. HTML kontrollerinin hepsinin karşılığı hatta daha fazlası web sunucu kontrollerinde vardır. Web sunucu kontrolleri ASP.NET sayfalarında kendine has bir yazım biçimine sahiptir. Örneğin buton kontrolü aşağıdaki gibi tanımlanır <asp:button ID="Button1" runat="server" Text="Button" /> Bu kontrollerde, kontrol isminden başka (ID) runat=server ifadesi zorunlu alanlardır
ADROTATOR İnternet banner (reklam) yöneten kontroldür. Sayfa her yüklendiğinde belirlenen koşullarda rastgele bir banner (resim) çıkartır. Aynı zamanda banner a link ekler ve yönetimini yapar. Bu kontrolün reklam konfigürasyonu ayrı bir xml dosyasında yapılır. Adrotator bu dosyaya bağlanarak belirtilen reklamları gösterir.
ADROTATOR Adrotator kontrolünün kullanacağı xml dosyasının yapısı aşağıdaki şekilde olmalıdır:
ADROTATOR Sayfada görüntülenecek reklam tanımları bu dosyada yapılır. Bu tanımlarının ne anlama geldiğini inceleyelim : Öncelikle ekleyeceğimiz reklam <Ad></Ad> etiketleri arasına yazılıyor. Devamında <ImageUrl></ImageUrl> etiketleri arasında, reklamın resim dosyasının yol tanımı yapılıyor <NavigateUrl></NavigateUrl> etiketleri arasında reklamın URL si belirtiliyor <Alternatetext></Alternatetext> etiketleri arasında resmin yüklenmemesi durumunda veya üzerine gelindiğinde gösterilecek yazı belirtiliyor <Keyword></Keyword> etiketleri arasında hangi kategoriye ait bir reklam olduğu belirtiliyor <Impressions></Impressions> etiketleri arasında da diğer reklamlar arasında gösterilme sıklığı oranı belirtiliyor
ADROTATOR Xml dosyasını hazırlandıktan sonra sayfamızı oluşturup Adrotator kontrolünü ekliyoruz. AdvertisementFile özelliği ile tanımlamış olduğumuz xml dosyasının yerini bildiriyoruz. Böylelikle sayfa her yüklendiğinde ya da refresh edildiğinde, xml dosyamızda belirttiğimiz resimler görüntülenecek ve reklamın sayfasına bir link oluşturulacaktır Reklamların görüntülenme sırası tamamen rastgele ve <Impressions></Impressions> etiketleri arasında belirttiğimiz ağırlıkta olacaktır.
CHECKBOX Form üzerinde aşağıdakine benzer şekilde bir checkbox kontrolü eklenebilir: Oncheckedchanged: Checkbox kontrolünün ek sık kullanılan olayıdır. Seçim yapıldığında y ada var olan seçim kaldırıldığında tetiklenir AutoPostBack özelliği checkbox kontrolünde meydana gelen değişikliğin sunucuya hemen bildirilmesini sağlar. Eğer checkedchanged olayında çalışacak bir metod tanımlandıysa AutoPostBack değeri mutlaka true olmalıdır
CHECKBOX Örnek olarak aşağıda verilen formu oluşturalım: 3 adet checkbox ve karşısına 3 adet label kontrolü ekliyoruz. Checkbox kontrolünün seçili olup olmamasına göre label kontrollerinin içeriği değişecek
CHECKBOX
CHECKBOXLIST Grup olarak checkbox kontrollerinin bulunduğu bir bileşendir. Form üzerine aşağıdakine benzer bir şekilde checkboxlist kontrolü eklenebilir
CHECKBOXLIST CheckboxList elemanları elle girilebileceği gibi, kontrol sayfaya eklendikten Edit Items komutu ile de girilebilir.
CHECKBOXLIST CheckBoxList kontrolünün temel olayı OnSelectedIndexChanged dir. Liste seçeneklerinde bir değişiklik olduğunda tetiklenir. Liste elemanlarına erişmek için CheckboxList.Items[sıra_numarası] bildirimi kullanılır. Sıra numarası 0 dan başlar. Örneğin 1.elemanın içeriğine erişmek için CheckboxList.Items[0].Text yazılmalıdır Listenin eleman sayısını öğrenmek için: CheckBoxList.Items.Count bildirimi kullanılır Bir elemanın seçili olup olmadığını kontrol etmek için CheckBoxList.Items[3].Selected bildirimi kullanılır. True değeri döndürüyorsa listenin 4. elemanı seçilidir.
CHECKBOXLIST Örnek olarak aşağıda verilen formu oluşturalım. CheckboxList kontrolü ekleyerek seçeneklerini düzenleyelim. Tablo halinde göster ve Yatay göster seçenekleri CheckBox kontrolü olsun
CHECKBOXLIST Gönder butonuna tıklandığında CheckBoxList kontrolünde yapılan seçimlerin Label Kontrolünde görüntülenmesini istiyoruz. Butonun click olayı altına aşağıda verilen kodları yazalım: Butona tıklanmadan işaretlendiği an, yapılan seçimlerin Label kontrolünde görüntülenmesi için nasıl bir değişiklik yapılmalıdır?
CHECKBOXLIST Tablo Halinde Göster kutucuğu işaretlendiğinde, CheckBoxList seçeneklerinin tablo halinde, aksi takdirde alt alta sıralanmış bir şekilde görüntülenmesini istiyoruz. İlgili CheckBox kontrolünün oncheckedchanged olayı altına aşağıdaki kodları yazalım CheckBoxList kontrolüne ait bir özellik olan RepeatLayaout özelliği, liste seçeneklerinin yerleşim düzenini belirler
CHECKBOXLIST Yatay Göster kutucuğu işaretlendiğinde, CheckBoxList seçeneklerinin yatay da, aksi takdirde dikey olarak gösterilmesini istiyoruz İlgili CheckBox kontrolünün oncheckedchanged olayı altına aşağıdaki kodları yazalım CheckBoxList kontrolüne ait bir özellik olan RepeatDirection özelliği liste seçeneklerinin yönünü belirler
DROPDOWNLIST Aşağıya açılan bir liste görüntüleyen kontroldür. Çeşitli veri kaynaklarındaki veriler bu kontrole bağlanabilir. Form üzerine aşağıdakine benzer bir şekilde checkboxlist kontrolü eklenebilir Listede görüntülenmesini istediğimiz seçenekleri <asp:listitem>pop</asp:listitem> şeklinde belirtiyoruz
DROPDOWNLIST CheckBoxList kontrolünde de olduğu gibi tasarım ekranında iken Edit Items seçeneği ile DropDownList kontrolünün seçenekleri düzenlenebilir
DROPDOWNLIST onselectedindexchanged DropDownList kontrolünün temel olayıdır. Bir eleman seçildiğinde tetiklenir. SelectedItem özelliği ile hangi elemanın seçildiği tespit edilir. Örneğin DropDownList1.SelectedItem.Text bildirimi seçili elemanın içeriği verir. Listeye yeni bir seçenek eklemek için DropDownList1.Items.Add() metodu kullanılır DropDownList1.SelectedIndex bildirimi seçili elemanın indexin döndürür. Elemanlar 0 dan itibaren sıralanır. Yani 1. elemanın indexi 0 olacaktır
DROPDOWNLIST Örnek olarak sayfamıza bir DroDownList kontrolü ekleyerek elemanlarını aşağıdaki gibi düzenleyelim. Yaptığımız seçim sayfaya ekleyeceğimiz Label kontrolünde gözüksün.
DROPDOWNLIST DropDownList kontrolünün onselectedindexchanged olayında çalışacak secim adında bir metot oluşturarak altına aşağıda verilen kodları yazalım: Tanımladığınız metodun çalışabilmesi için DropDownList kontrolünün AutoPostBack özelliğini True yapmayı unutmayın!
DROPDOWNLIST Farklı bir örnek olarak ziyaretçinin il ve ilçe seçimi yapabilmesi için sayfaya 2 tane DropDownList ekleyelim. Sayfanın yüklenmesi olayının altında iller DropDownList Kontrolüne eklensin. İl seçimi yapıldığında o ile ait ilçeler diğer DorDownList kontrolüne eklensin.
DROPDOWNLIST Page_Load yordamı altına aşağıda verilen kodları yazalım: Sehir isminde bir dizi tanımlayıp, yalnızca sayfa ilk yüklendiğinde DropDownList kontrolüne dizi elemanlarını ekledik.
DROPDOWNLIST İlleri tutan DropDownList kontrolünde seçim yapıldığında yani onselectedindexchange olayı altında çalışacak secim adında bir metot tanımı yapıp, aşağıda verilen kodları yazalım: (DropDownList kontrolünün AutoPostBack özelliği true)
LISTBOX DropDownList kontrolüne çok benzerdir. Listbox kontrolünde seçenekler liste halinde bir kutu içinde gösterilir. Aşağıdaki bildirim ile sayfaya eklenir:
LISTBOX Sayfa yüklendiğinde sol taraftaki listenin elemanları eklenecek. Ekle butonu ile sol listenin bir elemanı sağ listeye eklenebilecek Çıkar butonu ile de sağ listeden silinip sol listeye eklenecek
LISTBOX Page_Load yordamı altına aşağıda verilen kodları yazalım
LISTBOX Ekle butonunun click olayı altında aşağıda verilen kodları yazalım:
LISTBOX Çıkar butonunun click olayı altında aşağıda verilen kodları yazalım:
RADIOBUTTON Tek bir radio butonu ekler Grupname özelliği ile birden fazla radio buton gruplandırılarak içlerinden yalnızca birinin seçilmesi sağlanmış olur
RADIOBUTTON Aşağıda verilen formu oluşturup Gönder butonuna tıklandığında yapılan seçimin Label kontrolünde görüntülenmesini sağlayalım
RADIOBUTTON Butonun click olayı altına aşağıda verilen kodları yazalım:
RADIOBUTTON Aşağıda verilen formu oluşturalım: Gönder butonuna tıklandığında yapılan seçimlerin Label kontrolünde görüntülenmesini sağlayalım:
RADIOBUTTON Butonun click olayı altına verilen kodları yazalım.
RADIOBUTTONLIST Aynı anda yalnızca biri seçilebilen bir grup seçenek oluşturur
RADIOBUTTONLIST Verilen formu oluşturalım. Seçilen eğitim türüne göre fiyatı Label kontrolünde gösterelim:
RADIOBUTTONLIST RadioButtonList kontrolünde bir eleman seçildiğinde tetiklenecek olan onselectedindexchanged olayında çalışacak goster adında metod tanımlayıp verilen kodları yazalım.
RADIOBUTTONLIST Aşağıda verilen formu RadioButtonList kontrolü ile tekrar oluşturalım
RADIOBUTTONLIST Butonun click olayı altına verilen kodları yazalım:
TEXTBOX Kullanıcının metin girmesini sağlayan kutudur Textmode özelliği üç adet değer alır: SingleLine, MultiLine, Password Bu değerler tek satırlık, çok satırlık ve password girdisini ifade ederler Eğer hiçbir tanım yapılmamışsa Single Mod kabul edilir. TextMode:SingleLine TextMode:MultiLine TextMode:Password
BUTTON Butonun Command özelliği bir komut yordamı oluşturmak için kullanılır. Bu komut yordamı ise butondan gelen parametrelere göre işlem yapar. Bu parametreler, buton kontrolünde tanımlanan CommandName ve CommandArgument özellikleridir Komut olayı oncommand ifadesiyle gerçekleşir. Komut yordamı tanımı ise protected void komut(object sender, CommandEventArgs e) şeklindedir. Bir butonda OnClick ve OnCommand olayları birlikte tanımlanabilir.
BUTTON Örnek olarak, Butonun Command olayında Listbox kontrolünün seçeneklerini, girilen parametrelere göre artarak ya da azalarak sıralanmasını sağlayalım. Click olayında ise tıklanan butonun text ini label kontrolünde görüntüleyelim:
BUTTON Her iki butonun command olayında çalışacak komut isimli bir metod tanımı yapalım Artarak Sırala butonunun CommandName özelliğine listele, CommandArgument özelliğine artarak_listele yazalım Azalarakk Sırala butonunun CommandName özelliğine listele, CommandArgument özelliğine azalarak_listele yazalım Her iki butonun click özelliğinde çalışacak tiklandı adında bir metod tanımlayalım
BUTTON Oncommand olayında çalışacak komut isimli metodu aşağıdaki gibi düzenleyelim
BUTTON Onclick olayında çalışacak tiklandi isimli metodu aşağıdaki gibi düzenleyelim Böylelikle butonlara tıklandığında farklı iki yordamın çalıştırılmasını sağladık ve iki buton için ayrı ayrı metod tanımı yapmak yerine tek bir metod ile tıklanan butona göre işlem yapılmasını sağladık
HYPERLINK Bir sayfadan başka bir sayfaya geçiş yapmamızı sağlayan (yada aynı sayfa içinde başka bir yere ) bildiğimiz Anchor HTML elemanının, sunucu kontrol karşılığıdır HyperLink kontrolünde, link adresi NavigateUrl özelliği ile belirtilir. Linkin görünür yüzünü metin ya da resim olarak belirtebiliriz. Eğer resim olarak belirteceksek ImageUrl özelliği ile resmin yol tanımını yapmalıyız. Bunun yanında text ifadesi de kullanılırsa resmin yüklenmediği durumlarda veya üzerine gelindiğinde, linkin ne ile ilgili olduğunu belirtebiliriz. Target özelliği ile, aynı veya ayrı bir pencerede sayfayı yükle gibi, değişik opsiyonlarda sayfa yüklenmesini kontrol edebiliriz.
HYPERLINK NavigateUrl özelliği ile açılacak sayfa adresini sayfanın yüklenmesi olayında belirleyelim:
PANEL Kontrollerin, sayfada programatik olarak oluşturulmasını sağlar Panel kontrolü, içinde diğer kontrol veya kontrolleri barındırır ve bunları sayfa da görüntüler. Herhangi bir sunucu kontrolünü sayfada programatik olarak oluşturmak demek, kontrolü kod kısmında tanımlayıp panel kontrolüne ekleyerek görüntülemek demektir. Panel in diğer bir avantajı ise, içinde barındırdığı elemanları bir grup olarak görünür veya görünmez yapabiliriz
PANEL Sayfa bir panel kontrolü ve Paneli Gizle adında bir Checkbox kontrolü ekleyelim. Paneli Gizle onay kutusu işaretliyse, panel gizlensin ve onay kutusunun içeriği Paneli Göster olarak değişsin Sayfa yüklendiğinde Panel kontrolüne iki adet textbox ve bir tane de buton eklensin.
PANEL Paneli Gizle onay kutusunun OncheckedChanged olayı altına aşağıda verilen yordamı tanımlayalım:
PANEL Page_Load yordamı altına da verilen kodları yazalım
IMAGE,IMAGEBUTTON ve IMAGEMAP Bir web uygulaması geliştirirken kullanıcıya resim göstermek için kullanabileceğimiz en temel ve en basit etiket <img> etiketidir. Bu etiketin src özelliğine gösterilecek resmin tam yolu ve adını değer olarak veririz. Bu şekilde resmimizi göstermiş oluruz. Eğer bir asp.net web projesi geliştiriyorsak <img> etiketi veya Image sunucu kontrolünü kullanabiliriz. Amacımız kullanıcıya sadece bir resim göstermek ise Image kontrolü tamamıyla işimizi görüyor. ImageUrl özelliği ile, resmin tam yol bilgisini belirtiyoruz. AlternateText özelliği ile herhangi bir nedenden dolayı resim kullanıcıya gösterilemezse resmin olduğu yerde gösterilecek yazıyı belirtiyoruz. ToolTip özelliği ile fare imleci resmin üzerine geldiğinde gösterilecek yazıyı belirtiyoruz.
IMAGE,IMAGEBUTTON ve IMAGEMAP DropDownList kontrolünde aşağıdaki düzenlemeleri yapalım
IMAGE,IMAGEBUTTON ve IMAGEMAP DropDownList kontrolünün onselectedindexchanged olayında çalışacak goster metodunu aşağıdaki gibi düzenleyelim
IMAGE,IMAGEBUTTON ve IMAGEMAP Eğer amacımız sadece resim göstermek değilse, aynı zamanda görüntülenen resme tıklandığında bir takım işlemler yapmak istiyorsak, kullanacağımız sunucu kontrolü ImageButton'dur. ImageButton kontrolünde bulunan Click olayı, kullanıcıya gösterilen resme bir de buton fonksiyonu kazandırır. Kullanıcıya varsayılan bir buton göstermek yerine arka planın da resim olan bir buton göstermek kullanıcının ilgisini çekebilir. Image kontrolünde olduğu gibi ImageUrl özelliği ile gösterilecek resmin yol tanımı verilir. PostBackUrl özelliği kullanılarak ya da click olayı altına Response.Redirect(sayfaadi.aspx) yazılarak yönlendirme yapılabilir.
IMAGE,IMAGEBUTTON ve IMAGEMAP Eğer sitemizde göstereceğimiz resim büyükse, resmi bölümlere ayırıp ve ayırdığımız bölümlere ayrı ayrı link vermek istiyorsak ImageMap kontrolünü kullanabiliriz. Örneğin, yukarıdaki gibi bir resmin sarı olan bölgelerine link vererek, bir resim üzerinden birden çok web sayfasına link verebiliriz. Bunu yapabilmek için web formumuza bir ImageMap kontrolü ekliyoruz
IMAGE,IMAGEBUTTON ve IMAGEMAP Web formuna eklediğimiz ImageMap kontrolünün yapısından bahsetmek gerekirse, ImageUrl özelliğiyle görüntülenecek ve bölmelere ayıracağımız resmin tam yolunu ve adı belirtilir. Gösterilecek resim HotSpot denilen yapı kullanılarak bölmelere ayrılır. HotSpot'lar ise RectangleHotSpot, CircleHotSpot ve PolygonHotSpot olmak üzere 3 çeşittir. HotSpot nesnelerinin ortak olan özelliklerinden HotSpotMode özelliği ile, HotSpot'a tıklandığında, bir yönlendirme işlemi yapacaksak Navigate; sayfanın sunucuda işlendiğinde bir işlem yapacaksak PostBack değerini veriyoruz. HotSpot nesnelerinde bir diğer özellik olan AlternateText özelliği ile, HotSpot nesnelerinin fare imleci ile üzerine gelindiğinde gösterilecek yazıyı belirtiyoruz.
LINKBUTTON Button ve ImageButton a benzer farklı olarak görünür arabirimi link şeklindedir. Sunucuya postalama işlemi yapmak için kullanılır. HyperLink kontrolünden farkı budur HyperLink kontrolü belirtilen bir sayfaya link atarken, LınkButton sunucuya postalama, yani tıklandığında, kendisine ve diğer kontrollere bağlı olan script yordamının işletilmesi için sunucuya postalama işlemi yapar. Aynen bir buton gibi.
LINKBUTTON
TABLE,TABLEROW,TABLECELL Progmatik olarak tablo oluşturulmasını sağlayan kontrollerdir. Tek bir <table>,<tr>,<td> gibi HTML tablo tag i kullanmadan uygulamamızda tablo oluşturmamızı sağlar Bu kontrol sayesinde sunucu sizin adınıza, yordamınızda belirttiğiniz koşullarda tablo oluşturur ve bunun HTML karşılığını üretir. Örnek olarak TextBox kontrolüne girilen satır ve sütun sayısına göre dinamik olarak uygulamamıza tablo ekleyelim:
TABLE,TABLEROW,TABLECELL Butonun click olayında çalışacak tablo_olustur adlı metodu tanımlayıp, aşağıdaki kodları yazalım:
TABLE,TABLEROW,TABLECELL
CALENDAR (TAKVİM) Calendar kontrolü ASP.NET sayfalarında takvim eklememizi ve bunu kontrol etmemizi sağlar Bu takvimin şeklini rengini dilediğiniz gibi oluşturabilirsiniz Her kontrolde olduğu gibi takvim nesnesinin de şeklini belirleyen özellikleri, işlevselliğini oluşturan metod ve olayları vardır. Ve bunlar oldukça fazladır
CALENDAR (TAKVİM) Sayfamıza bir TextBox kontrolü, tıklandığında takvimi açacak bir Buton ve Calendar kontrolünü ekleyelim: Butona tıklandığında takvim açılacak ve ziyaretçinin seçmiş olduğu tarih Texbox kontrolünde gözükecek.
CALENDAR (TAKVİM) Butonun click olayına aşağıda verilen kodları yazıyoruz Calendar kontrolünün SelectionChanged olayında çalışacak secim_degisti metodunu tanımlayıp aşağıda verilen kodları yazalım SelectionChanged olayında takvimde bir seçim yapıldığında tetiklenir.
CALENDAR (TAKVİM) Dikkat ederseniz takvim nesnesinde günün tarihinden önceki bir tarih de seçilebiliyor. Şimdi bunu engelleyelim.. Bu işlem için Calendar kontrolünün Day Render olayı kullanılır. DayRender olayı ile takvimin görünümünü değiştirebilir, hangi tarihlerin seçilebilir hangilerinin seçilemez olabileceğini belirleyebilir hatta renk değişikliğini bile bu olay ile yapabiliriz DayRender olayında çalışacak kisitla metodunu tanımlayıp aşağıda verilen kodları yazalım:
CALENDAR (TAKVİM) Bu örneğimizde de takvimde seçilmiş tarihleri Label kontrolünde gösterelim :
CALENDAR (TAKVİM) Calendar kontrolünün SelectionChanged olayına aşağıda verilen kodları yazalım:
PLACE HOLDER PlaceHolder kontrolü RunTime (çalışma zamanı) esnasında oluşturulan diğer kontrolleri barındırır. Bu anlamda Panel kontrolüne çok benzer. Diğer kontrollerin aksine görünür bir arayüz birimi yoktur. Örnek olarak, ziyaretçi sayfa yüklendiğinde Üye Kayıt formunu görsün. Kayıt Ol butonuna tıkladığında ise Giriş formunu görsün istiyoruz. Bunun için sayfa iki tane PlaceHolder kontrolü ekleyelim ve üye kaydı ile giriş işlemlerinde kullanacağımız diğer kontrolleri çalışma zamanında bu PlaceHolder kontrollerine ekleyelim
PLACE HOLDER
PLACE HOLDER
KAYNAK C# ile ASP.NET Zafer Demirkol