AJAX Validator Callout Extender

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Validator Callout Extender nesnesini ele alacağız.

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