Yazılımcının Günlüğü | YazilimGunlugu.Com
Arama
Makale Kategorileri
Üye Girişi
Şuanki online üyeler()
Aktif üye bulunmamaktadır.


Ajax Control Toolkit- Watermark Extender & Popup Control Extender

Yazar: Sem GÖKSU

Kategori: ASP.NET

Eklenme Tarihi: 22.05.2007 02:27:05

Merhaba arkadaşlar bu makalemizde Ajax’in watermark extender ve popup control extender kontrollerinden bahsedecegiz.

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

Yazar Hakkında Yorum Yok Yorum Yaz Yazara ait diğer Makaleler
Tema
Anket
ASP.NET MVC'yi Projeleriniz de kullandınız mı?


En Çok Okunan Makaleler
En Son Eklenen Makaleler
Soru Merkezinde Bekleyenler
Ana Sayfa | Hakkımızda | Editörler | Yazarlar | RSS RSS | İletişim
Yazılım Günlüğü 2007-2009 © Tüm Hakları Saklıdır.