Blog

Watermark Extender

Textbox Watermark ASP.NET textbox kontrollerine uyarı özelligi kazandırılabilen AJAX kontrolüdür. Textbox nesnesi bos oldugunda kullanıcıya mesaj verilebilir. Yine CSS ekleyerek textbox'ın görünüm özelliklerini degistirip kullanıcıyı daha fazla bilgilendirebiliriz. Kullanıcı textbox'tan baska bir yere odaklandıgında belirlemis oldugumuz "watermark text" kullanıcıya gösterilir. Kullanıcıya daha fazla bilgi verilmek istediginde çok kullanıslıdır.

Özellikleri; 

TargetControlID="TextBox1" // Baglı olacagı ASP.NET Textbox kontrolü
WatermarkText="Lütfen Mail Adresini Giriniz" // Kullanıcıya verilecek mesaj
WatermarkCssClass="watermarkCSS" // Hata verilecegi zaman textbox nesnesine uygulanacak sitilin adı.

Nesnemizi ve özelliklerini inceledikten sonra dilerseniz bir örnek ile konuyu daha iyi kavrayalım. Örnegimiz su sekilde olacak; bir web sitesi üzerinde maillist olusturdugumuzu varsayalım. Kullanıcıdan mail adresini isteyip veritabanına kaydedecegiz. Eger kullanıcı mail adresini girmediyse textbox nesnesine bizim belirleyecegimiz sitil ve uyarı mesajını gösterecegiz.

Bunun için Visual Studio 2005 açıp bir atlas projesi açalım.

Formumuz üzerine 1 adet Textbox, 1 adet Buton ekleyelim. Textbox kullanıcıdan mail adresini alacak ve database'e kaydedecek. (Bu sadece örnek amaçlıdır. Database'e kaydetme islemini bu örnekte yapmayacagız.)

Dizaynımızı tamamladıktan sonra, sayfamıza TextBoxWatermarkExtender nesnesi ekleyelim.

Evet, form tasarımımızı tamamladık. Simdi artık Projemize atlas özelliklerini kazandırabiliriz. Bunun için Sayfamızın HTML kısmını açıp ilk olarak bir textbox için bir CSS olusturalım.

<style type="text/css">

.SemSitil

{

background-color: #333366;

color:Yellow;

}

</style>

Formumuzun Head tagları arasını yukarıdaki sitil dosyasını ekleyelim.  Son adım olarak WatermarkExtender nesnesini özelliklerini de yazalım.

        <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">

        <cc1:TextBoxWatermarkProperties TargetControlID="TextBox1" WatermarkCssClass="SemSitil" WatermarkText="Lütfen E-mail Adresini Giriniz">

        </cc1:TextBoxWatermarkProperties>

        </cc1:TextBoxWatermarkExtender>

Evet artık örnegimizi çalıstırabiliriz.

Simdi Textbox içerisine girelim;

Textbox1 nesnesi içerisine girdigimizde textbox'ın içerisi bosalır. Eger bos bırakıp baska bir yere geçersek yine yukarıdaki gibi bizi uyaracaktır. Eger bir seyler yazarsak yazdıgımız sekilde kalır.

Popup Control Extender

Popup control extender kontrolü içerige ek olarak eklenen bir açılabilir pencere (Popup) özelligi kazandırır. Bu pencere update panel içerisinde çalısır, bu yüzden server side çalısmasına ragmen sayfanın refresh etmesini engeller. Bu popup ayrıca 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 - Popupun sonucu

·                  CommitScript - Popup sonucuna ek bilgi koymak için script

Evet, bu kontrolümüzü de tanıdıktan sonra yeni bir örnek ile bu konuyu da pekistirelim.

Örnegimizde bir mail formu tasarlayacagız ve mail gönderecegimiz kisiyi popup pencereden seçtirecegiz.

Bunun için projemize yeni bir sayfa daha ekleyelim. Sayfamız üzerine

1-     Script Menager

1-     PopupControlExtender

1-     Update panel

1-     Panel

1-     RadioButtonList Kontrolü ekleyelim.

1-     Textbox

1-  Buton ekleyelim

Benim tasarlamıs oldugum form asagıdaki gibidir.

Simdi ilk olarak AtlasControlToolkit'i projemize import edelim.

Imports AtlasControlToolkit

Daha sonra

RadioButtonList1SelectedIndexChanged ewentine asagıdaki kodları 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 sayfamızın HTML kısmına gidip Popup Control Extender kontrolünün özelliklerini ayarlayalım.

    <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 ayarladıktan sonra artık bu örnegimizi de çalıstırabiliriz.

Ilk olarak kime isimli textbox üzerine tıklayalım ve popup formumuz açıldıgını görelim

Açılan 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üsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET

Örnek Kodlar için mail adresimi kulalnabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net