ASP.NET Ajax

Validator Callout Extender

Açıklama
ValidatorCallout nesnesi, varolan ASP.NET Valditarları genisleten bir AJAX nesnesidir. Bu kontrolü herhangi bir Validator nesnesine baglayarak kullanabilirsiniz.

Validator Callout Extender  Postback olmadan verilerin dogru girilip girilmedigini kontrol eder.

Özellikleri

·                  TargetControlID - Uygulanacak olan Validator Nesnesinin ID'si

·                  Width - Görüntülenecek olan Uyarı Mesajının Genisigi

·                  HighlightCssClass - Uyarı mesajının Sitili

·                  WarningIconImageUrl - Hata Mesajına Ait Resmin yolu

·                  CloseImageUrl - Kapat butonuna ait Resmin yolu

Kullanımı

<ajaxToolkit:ValidatorCalloutExtender
   runat="Server"
    ID="PNReqE"
    TargetControlID="rfMail"
    Width="350px"
    HighlightCssClass="highlight"
    WarningIconImageUrl="warning.gif"
   CloseImageUrl="close.gif" />

Örnek; Ilk olarak bir Ajax tabanlı bir Asp.net projesi olusturalım.

Projemizi olusturduktan sonra örnekte yapacaklarımıza geçelim. Maillist olusturan bir sayfa tasarlayalım. Burada kullanıcı gerekli alanları doldurdu mu yada geçerli bir mail adresi girdimi girmedi mi bunları kontrol edecegiz.

Projemize 3 label, 2 Textbox, 1 button, 2 adet ReguiredField Validator'ı ve 1 adette Regular Expression Validator'ı ekleyelim. Benim Tasarladıgım Form Asagıdaki Gibidir.

Simdi burada ad soyad alanlarını zorunlu kılacagız ve mail alanına girilen alanında geçerli bir mail adresi olmasını saglayacagız. Ekledigimiz Validarların özelliklerini belirleyelim.

  <table style="width: 425px">

            <tr>

                <td colspan="3">

                    <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="E-Mail Listesine Katıl"></asp:Label></td>

            </tr>

            <tr>

                <td style="width: 58px">

                </td>

                <td style="width: 54px">

                </td>

                <td style="width: 100px">

                </td>

            </tr>

            <tr>

                <td style="width: 58px; height: 22px">

                    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="Ad Soyad"></asp:Label></td>

                <td style="width: 54px; height: 22px">

        <asp:TextBox ID="TextBox1" runat="server" Font-Bold="False" Font-Names="Verdana" Font-Size="X-Small"></asp:TextBox></td>

                <td style="width: 100px; height: 22px">

                   <asp:RequiredFieldValidator ID="rfAdSoyad" runat="server" ControlToValidate="TextBox1"

                        Display="None" ErrorMessage="Lütfen Adınızı Ve Soyadınızı Giriniz" Font-Bold="False"

                        Font-Names="Verdana" Font-Size="X-Small"></asp:RequiredFieldValidator>

                </td>

            </tr>

            <tr>

                <td style="width: 58px">

                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="Mail"></asp:Label></td>

                <td style="width: 54px">

                    <asp:TextBox ID="TextBox2" runat="server" Font-Bold="False" Font-Names="Verdana"

                        Font-Size="X-Small"></asp:TextBox></td>

                <td style="width: 100px">

                    <asp:RegularExpressionValidator ID="reMail" runat="server" ControlToValidate="TextBox2"

                        Display="None" ErrorMessage="Lütfen geçerli bi Email Adresi Giriniz" Font-Bold="False"

                        Font-Names="Verdana" Font-Size="X-Small" ValidationExpression="\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

                    <asp:RequiredFieldValidator ID="rfMail" runat="server" ControlToValidate="TextBox2"

                        Display="None" ErrorMessage="Lütfen Emalinizi Giriniz" Font-Bold="False" Font-Names="Verdana"

                        Font-Size="X-Small"></asp:RequiredFieldValidator>

</td>

            </tr>

            <tr>

                <td style="width: 58px; height: 26px">

                </td>

                <td style="width: 54px; height: 26px">

        <asp:Button ID="Button1" runat="server" Text="Gönder" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" /></td>

                <td style="width: 100px; height: 26px">

                     </td>

            </tr>

        </table>

Validatorlarımızın özelliklerini belirledik. Ama bizim yapmak istedigimiz AJAX Validator Callout Extender nesnesi ile verilerin dogu girilip girilmedigini kontrol etmekti bunun için sayfamıza 3 adet Validator Callout Extender nesnesi ekleyelim.

Eklemis oldugumuz bu nesneleri ASP.NET validatorları ile iliskilendirelim.

/*Geçerli Mail Adresi girilip Girilmedigini Kontrol Edecek*/     

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server"

        TargetControlID="reMail"

    Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

/*Adsoyad Alanına veri girilip Girilmedigini Kontrol Edecek*/     

        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"

        TargetControlID="rfAdSoyad"

    Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

     /* Mail  Adresi alanına veri girilip Girilmedigini Kontrol Edecek*/   

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server"

        TargetControlID="rfMail"

        Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

Kontrollerimizi iliskilendirdikten sonra yapmıs oldugumuz sayfayı test Edelim.

Simdi de hatalı bir mail adresi girelim.

Ortaya görsel açıdan çok güzel bir seyler çıktı.

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net

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

FilteredTextbox Extender

Açıklama:

FilteredTextBox, kullanıcıların textbox içerisine geçersiz karakter girmelerini engelleyen Atlas kontrolüdür. Örnegin sadece sayısal degerleri girmemiz, yâda sadece küçük harf girmemize izin veren bunun dısındaki karakterleri kabul etmeyen atlas kontrolüdür.

Özellikleri:

·   TargetControlID - Filtrelenecek atlas kontrolünün ID'si

·   FilterType - Filtreleme tipini belirler (Numbers, LowercaseLetters, UppercaseLetters, ve  Custom. Eger Custom Seçilirse ValidChars içerisinde izin verilecek karakterler yazılır)

·   ValidChars - Custom Type seçilmisse Geçerli olacak karakterler bura da belirtilir.

Örnek Uygulama:

Numbers , LowercaseLetters , UppercaseLetters , ve Custom özelliklerini daha iyi anlamamız için bir örnek uygulama yapacagız. Visual Studio içerisinde yeni bir atlas projesi olusturalım.

Daha Sonra projemize 4 adet Textbox, 4 adet label ve 4 adet FilteredTextBox kontrolü ekleyelim. 4 filtreleme tipini de bu textboxlarda inceleyecegiz. Benim tasarlamıs oldugum sayfa asagıdaki gibidir.

1. Textbox da Custom Tipi yani bizim belirleyecegimiz karakterleri, 2. textbox da yalnızca küçük harfteki karakterlere, 3. textbox da sadece büyük harfteki karakterlere, 4. textbox da da sadace Numeric degerlere izin veren FilteredTextboxExtender Atlas özellikleri yazacagız.

Custom  özellik için yazacagımız  FilteredTextboxExtender Özellikleri;

Burada sadece Numeric degerlere ve "," , "." Karakterlerine izin verilir.

lowercaseLetters  özellik için yazacagımız  FilteredTextboxExtender Özellikleri;

Burada sadece küçük harf girisine izin verilecek.

UppercaseLetters özellik için yazacagımız  FilteredTextboxExtender Özellikleri;

Burada sadece büyük harf girisine izin verilecek.

Numbers  özellik için yazacagımız  FilteredTextboxExtender Özellikleri;

Burada da sadece Numeric degerlere izin verilecektir. Son olarak projemizi çalıstıralım ve test edelim.

Görüldügü gibi 1. textboxda sadece Numeric degerler ve geçerli kıldıgımız "," ve "." 2. textboxda yalnızca küçük harf 3. textbox da yalnızca büyük harf. 4. textboxda da sadece Numeric degerlere izin verildi.

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 kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net

Açıklama

AlwaysVisibleControl içerik kaydırıldıgında yâda yeniden boyutlandırıldıgında sayfa background'u üzerinde float görünen sayfa kontrollerine izin veren basit bir kontroldür. Içerigi degistirseniz bile sizin belirlemis oldugunuz yerde kalır. Sayfa yüklenirken flash kontrolüne yakalanmamak için kontrolün pozisyonunu absolutely olarak belirlemeliyiz

Özellikler

·                    TargetControlID - Sürekli gösterilecek olan kontrolün ID'si

·                    HorizontalOffset - Browserin yatay kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır.

·                    HorizontalSide - Yatay olarak browser üzerindeki tarayıcının pozisyonunu belirler (Left, Center, yada  Right) Varsayılanı Left'dir.

·                    VerticalOffset - Browserin dikey kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır.

·                    VerticalSide - Dikey olarak browser üzerindeki tarayıcının pozisyonunu belirler (Top, Middle, yada Bottom) Varsayılanı Top'dır.

·                    ScrollEffectDuration - Kontrolün pozisyonunun degistiginde scroll efektinin süresinin uzunlugu. Varsayılan olarak 1 saniyedir.

Örnek Uygulama

Kontrolümüz ile ilgili bilgi edindikten sonra örnek bir uygulama yapabiliriz. Ofis içerisinde kullanılan bir Intranet uygulaması yaptıgımızı var sayalım. Bu uygulama içerisinde kullanıcılar birbirlerini mesaj gönderebiliyorlar. Kullanıcı programını açtıgı anda maili olup olmadıgını görmek isteyecektir. Yine aynı sekilde sayfa içerisinde dolasırken mesajı olup olmadıgını görmek isteyebilir. Burada Always Visible Control Extender kontrolünü kullanabiliriz. Kullanıcı sayfanın neresinde olursa olsun Always Visible Control Extender kontrolü ile mesajı olup olmadıgını görebilir. Artık örnegimize geçebiliriz, yeni bir atlas projesi olusturalım.

Projemizi olusturduktan sonra Sayfamızın scroll barların çıkması için biraz uzun bir metin, 1 panel, 1 label 1update panel ve 1 de buton ekleyelim. Benim sayfa tasarımım asagıdaki gibidir.

Kullanıcı sayfada gezinirken maili olup olmadıgını kontrol edebilecek. Bunun için ilk olarak maili olup olmadıgını kontrol edecek kodları yazalım.

Simdi artık Always Visible Control Extender kontrolümüzü çalıstıracak kodalara geçelim.

Always Visible Control Extender özelliklerinide yazdıktan sonra projemizi çalıstırabiliriz.

Evet, nesnemiz belirledigimiz gibi sag alt kösede yer alıyor.  Simdi sayfamızı asagıya dogru kaydıralım.

Gördügünüz gibi nesnemizde bizimle birlikte gelir. Simdi okunmamıs olan maili okuyalım ve atlasın baska bir nimeti olan UpdatePanel'den yararlanalım.

Evet, sayfamız yenilenmeden mesajımızı okuduk. Yeni mesajımız var mı yok mu kontrol edebiliyoruz. Normal de bir timer nesnesi ile mailimiz olup olmadıgını belirli sürelerle kontrol ettirebilirdik. Ama suan için bizim esas konumuz bu olmadıgı için sadece manuel olarak islem yaptırdık.

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 kullanabilirsiniz

askisem@hotmail.com

Kaynaklar
http://atlas.asp.net

Modal Popup Extender

Açıklama:

Modal popup extender kullanıcının sayfanın arkada kalan kısmı ile iliski kurmasını engelleyerek kullanıcının sayfayı görmesine izin verir. Modal içerik bir kontroller hiyerarsisi olabilir ve üzerine herhangi bir stil uygulanmıs bir bakcgroundun üzerinde gösterilebilir. Gösterildigi zaman sadece modal içerikle iliski kurulur ve sayfanın geri kalanına tıkladıgınızda hiç bir sey olmaz. Kullanıcı modal içerikle iliski kurarken bir ok/cancel butonunun kullanılması modal içerigin çalısmasına izin vermez ve özel bir scripti çalıstırır. Özel script genellikle modal mod aktifken yapılan degisiklikleri uygulayacaktır. Eger bir postback gerekliyse, basit olarak ok/cancel kontrolüne postback için izin verir ve sayfa yenilenir.  

Özellikleri:  

·                  TargetControlID  - Modal popup'ı açtıracak olan kontrol

·                  PopupControlID - Açılacak olan modal popup kontrolü

·                  BackgroundCssClass - Modal popup'un gösterilecegi background CSS sitil adı

·                  DropShadow - Modal  Popup'a drop-shadow özelligi kazandırmak için. Default olarak true gelir

·                  OkControlID - ModalPopup'ı çalıstıran kontrolün ID'si

·                  OnOkScript - OkControlID tıklandıgında çalısacak script.

·                  OkCancelID - ModalPopup'ı iptal eden kontrolün ID'si

·                  OkCancelScript - CancelControlID tıklandıgında çalısacak script.

Modal Popup Extender kontrolünü tanıdıktan sonra örnegimize geçelim.

Örnek Uygulama

Bir Spor Haberleri sitesi yaptıgımızı varsayalım. Burada farklı takımları tutan kisiler girecektir. Biz bu sayfadaki haberleri kullanıcıya göre özellestirmek isteyebiliriz. Kullanıcıda okudugu haberi kendi tuttugu takımın renklerin de görmek isteyebilir. Bunun için Modal Popup Extender Konrolünü Kullanabiliriz.

Yeni bir Atlas Projesi Açalım.

Sayfamızda herhangi bir haberi yayınlayacagımızı varsayalım. Sayfamıza 1 Modal Popup Extender, 1 adet linkbutton 4 input radio, 4 label ve 2 button kontrolü ekleyelim. Ben sayfama asagıdaki gibi bir haber ekledim.

Yapacagımız islemden kısaca bahsedeyim. Kullanıcı haber detayını okurken sayfasını kendine göre özellestirecek. Bunun için linkbutton'a (sayfayı özellestir) tıklayacak ve kendine göre olan sitili seçecek ve seçmis oldugu sitil sayfaya uygulanacak.

Simdi açacagımız ModalPopup' için panel ve panel içerisindeki kontrolün kodlarına geçelim

Kodlarda onClick() eventinde de gördügünüz gibi SitilBelirle adlı bir fonksiyon ve içerisinde uygulanacak sitilin adı var. Simdi isterseniz o sitilleri yazalım. 

Sitillerimizi de tamamladıktan sonra. Kullanıcı Modal Sayfasını açtıktan sonra yapacagımız degisiklikleri kullanıcının sayfasına uygulayacak kodları yazalım. Asagıdaki javascript Metin adını verdigimiz paragrafın CssClassName özelligine uygulanacak. 

Son olarak Modal Popup Extender Kontrolünün özelliklerini belirleyelim.

Evet, artık projemizi çalıstırabiliriz.

Sayfayı Özellestirin butonuna tıklayalım;

Ben en üstteki Fenerbahçe Sitili'ni seçtim (: iste sonuç (:

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 kullanabilirsiniz

askisem@hotmail.com  

Kaynaklar  

http://atlas.asp.net  

Ingilizce Çevirimlerde yardımcı olanlar: Enis Eftekin ve Dilara Kilercioglu