Makale Özeti

Merhaba arkadaşlar bu makalemizde Ajax’ın watermark extender ve popup control extender kontrollerinden bahsedeceğiz.

Makale

Watermark Extender
Textbox Watermark ASP.NET textbox kontrollerine uyarı özelliği kazandırılabilen AJAX kontrolüdür. Textbox nesnesi boş olduğunda kullanıcıya mesaj verilebilir. Yine CSS ekleyerek textbox’ın görünüm özelliklerini değiştirip kullanıcıyı daha fazla bilgilendirebiliriz. Kullanıcı textbox’tan başka bir yere odaklandığında belirlemiş olduğumuz “watermark text” kullanıcıya gösterilir. Kullanıcıya daha fazla bilgi verilmek istediğinde çok kullanışlıdır.

Özellikleri; 

TargetControlID="TextBox1" // Bağlı olacağı ASP.NET Textbox kontrolü
WatermarkText="Lütfen Mail Adresini Giriniz" // Kullanıcıya verilecek mesaj
WatermarkCssClass="watermarkCSS” // Hata verileceği zaman textbox nesnesine uygulanacak sitilin adı.

Nesnemizi ve özelliklerini inceledikten sonra dilerseniz bir örnek ile konuyu daha iyi kavrayalım. Örneğimiz şu şekilde olacak; bir web sitesi üzerinde maillist oluşturduğumuzu varsayalım. Kullanıcıdan mail adresini isteyip veritabanına kaydedeceğiz. Eğer kullanıcı mail adresini girmediyse textbox nesnesine bizim belirleyeceğimiz sitil ve uyarı mesajını göstereceğiz.

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 işlemini bu örnekte yapmayacağız.)

Dizaynımızı tamamladıktan sonra, sayfamıza TextBoxWatermarkExtender nesnesi ekleyelim.
 
Evet, form tasarımımızı tamamladık. Şimdi 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 oluşturalı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 örneğimizi çalıştırabiliriz.

Şimdi Textbox içerisine girelim;

Textbox1 nesnesi içerisine girdiğimizde textbox’ın içerisi boşalır. Eğer boş bırakıp başka bir yere geçersek yine yukarıdaki gibi bizi uyaracaktır. Eğer bir şeyler yazarsak yazdığımız şekilde kalır.

Popup Control Extender
Popup control extender kontrolü içeriğe ek olarak eklenen bir açılabilir pencere (Popup) özelliği kazandırır. Bu pencere update panel içerisinde çalışır, bu yüzden server side çalışmasına rağmen sayfanın refresh etmesini engeller. Bu popup ayrıca içeriğe(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österileceği 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 pekiştirelim.
Örneğimizde bir mail formu tasarlayacağız ve mail göndereceğimiz kişiyi popup pencereden seçtireceğiz.
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ış olduğum form aşağıdaki gibidir.

Şimdi ilk olarak AtlasControlToolkit’i projemize import edelim.
Imports AtlasControlToolkit
Daha sonra
RadioButtonList1SelectedIndexChanged ewentine aşağı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 örneğimizi de çalıştırabiliriz.
İlk olarak kime isimli textbox üzerine tıklayalım ve popup formumuz açıldığını görelim

Açılan popup formdan mail göndereceğimiz kişiyi seçelim; Sem Göksu’yu seçtim ben (:

Bu makalenin de sonuna geldik, başka bir makalede görüşmek üzere başarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS
Örnek Kodlar için mail adresimi kulalnabilirsiniz
askisem@hotmail.com
Kaynaklar
http://ajax.asp.net