Watermark Extender
Textbox Watermark ASP.NET textbox kontrollerine uyari özelligi kazandirilabilen AJAX kontrolüdür. Textbox nesnesi bos oldugunda kullaniciya mesaj verilebilir. Yine CSS ekleyerek textbox’in görünüm özelliklerini degistirip kullaniciyi daha fazla bilgilendirebiliriz. Kullanici textbox’tan baska bir yere odaklandiginda belirlemis oldugumuz “watermark text” kullaniciya gösterilir. Kullaniciya daha fazla bilgi verilmek istediginde çok kullanislidir.
Özellikleri;
TargetControlID="TextBox1" // Bagli olacagi ASP.NET Textbox kontrolü
WatermarkText="Lütfen Mail Adresini Giriniz" // Kullaniciya verilecek mesaj
WatermarkCssClass="watermarkCSS” // Hata verilecegi zaman textbox nesnesine uygulanacak sitilin adi.
Nesnemizi ve özelliklerini inceledikten sonra dilerseniz bir örnek ile konuyu daha iyi kavrayalim. Örnegimiz su sekilde olacak; bir web sitesi üzerinde maillist olusturdugumuzu varsayalim. Kullanicidan mail adresini isteyip veritabanına kaydedecegiz. Eger kullanici mail adresini girmediyse textbox nesnesine bizim belirleyecegimiz sitil ve uyari mesajini gösterecegiz.
Bunun için Visual Studio 2005 açip bir atlas projesi açalim.
Formumuz üzerine 1 adet Textbox, 1 adet Buton ekleyelim. Textbox kullanicidan mail adresini alacak ve database’e kaydedecek. (Bu sadece örnek amaçlidir. Database’e kaydetme işlemini bu örnekte yapmayacagiz.)
Dizaynimizi tamamladiktan sonra, sayfamiza TextBoxWatermarkExtender nesnesi ekleyelim.
Evet, form tasarimimizi tamamladik. Simdi artik Projemize atlas özelliklerini kazandirabiliriz. Bunun için Sayfamizin HTML kismini açip ilk olarak bir textbox için bir CSS olusturalim.
<style type="text/css">
.SemSitil
{
background-color: #333366;
color:Yellow;
}
</style>
Formumuzun Head taglari arasini yukaridaki sitil dosyasini ekleyelim. Son adim olarak WatermarkExtender nesnesini özelliklerini de yazalim.
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">
<cc1:TextBoxWatermarkProperties TargetControlID="TextBox1" WatermarkCssClass="SemSitil" WatermarkText="Lütfen E-mail Adresini Giriniz">
</cc1:TextBoxWatermarkProperties>
</cc1:TextBoxWatermarkExtender>
Evet artik örnegimizi çalistirabiliriz.
Simdi Textbox içerisine girelim;
Textbox1 nesnesi içerisine girdigimizde textbox’in içerisi bosalır. Eger bos birakip baska bir yere geçersek yine yukaridaki gibi bizi uyaracaktir. Eger bir şeyler yazarsak yazdigimiz sekilde kalır.
Popup Control Extender
Popup control extender kontrolü içerige ek olarak eklenen bir açilabilir pencere (Popup) özelligi kazandirir. Bu pencere update panel içerisinde çalisir, bu yüzden server side çalismasina ragmen sayfanin refresh etmesini engeller. Bu popup ayrica içerige(HTML Elementleri) eklenecek bilgileri tutar.
Bu konrola ait özellikler
· TargetControlID – Eklenecek kontorlün ID’si · PopupControlID – Gösterilecek olan popupun ID’si · Position – Popupun gösterilecegi yer. (Left, Right, Top, Bottom, Center) · CommitProperty – Popun sonucu · CommitScript – Popup sonucune ek bilgi koymak için script
Evet, bu kontrolümüzü de tanidiktan sonra yeni bir örnek ile bu konuyu da pekistirelim.
Örnegimizde bir mail formu tasarlayacagiz ve mail gönderecegimiz kisiyi popup pencereden seçtirecegiz.
Bunun için projemize yeni bir sayfa daha ekleyelim. Sayfamiz üzerine
1- Script Menager 1- PopupControlExtender 1- Update panel 1- Panel 1- RadioButtonList Kontrolü ekleyelim. 1- Textbox 1- Buton ekleyelim
Benim tasarlamis oldugum form asagidaki gibidir.
Simdi ilk olarak AtlasControlToolkit’i projemize import edelim.
Imports AtlasControlToolkit
Daha sonra
RadioButtonList1SelectedIndexChanged ewentine asagidaki kodlari ekleyelim.
Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
If Not (String.IsNullOrEmpty(RadioButtonList1.SelectedValue)) Then
PopupControlExtender.GetCurrent(Me.Page).Commit(RadioButtonList1.SelectedValue)
End If
RadioButtonList1.ClearSelection()
End Sub
Daha sonra sayfamizin HTML kismina gidip Popup Control Extender kontrolünün özelliklerini ayarlayalim.
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="MyTextBox"
PopupControlID="Panel1"
CommitProperty="value"
CommitScript="e.value += ';';"
Position="Right" />
</atlasToolkit:PopupControlExtender>
HTML deki özellikleri de ayarladiktan sonra artik bu örnegimizi de çalistirabiliriz.
Ilk olarak kime isimli textbox üzerine tiklayalim ve popup formumuz açildigini görelim
Açilan popup formdan mail gönderecegimiz kisiyi seçelim; Sem Göksu’yu seçtim ben (:
Bu makalenin de sonuna geldik, baska bir makalede görüşmek üzere başarı ve iyi günler dilerim.
Sem GÖKSU
MCP | MCAD.NET
Örnek Kodlar için mail adresimi kulalnabilirsiniz askisem@hotmail.com
Kaynaklar
http://ajax.asp.net