Açiklama
ValidatorCallout nesnesi, varolan ASP.NET Valditarlari 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 Uyari Mesajinin Genisigi
· HighlightCssClass – Uyari mesajinin Sitili
· WarningIconImageUrl – Hata Mesajina Ait Resmin yolu
· CloseImageUrl - Kapat butonuna ait Resmin yolu
Kullanimi
<ajaxToolkit:ValidatorCalloutExtender
runat="Server" ID="Validator"
TargetControlID="rfMail"
Width="350px"
HighlightCssClass="highlight"
WarningIconImageUrl="warning.gif"
CloseImageUrl="close.gif" />
Örnek; Ilk olarak bir Ajax tabanli bir Asp.net projesi olusturalim.
Projemizi olusturduktan sonra örnekte yapacaklarimiza geçelim. Maillist olusturan bir sayfa tasarlayalim. Burada kullanici gerekli alanlari doldurdu mu yada geçerli bir mail adresi girdimi girmedi mi bunlari kontrol edecegiz.
Projemize 3 label, 2 Textbox, 1 button, 2 adet ReguiredField Validator’i ve 1 adette Regular Expression Validator’i ekleyelim. Benim Tasarladigim Form Asagidaki Gibidir.
Simdi burada ad soyad alanlarini zorunlu kilacagiz ve mail alanina girilen alaninda geçerli bir mail adresi olmasini saglayacagiz. Ekledigimiz Validarlarin özelliklerini belirleyelim.
<table style="width: 425px">
<tr>
<td colspan="3">
<asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Trebuchet MS" Font-Size="X-Small"
Text="E-Mail Listesine Katil"></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="Trebuchet MS" 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="Trebuchet MS" 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 Adinizi Ve Soyadinizi Giriniz" Font-Bold="False"
Font-Names="Trebuchet MS" Font-Size="X-Small"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 58px">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Trebuchet MS" Font-Size="X-Small"
Text="Mail"></asp:Label></td>
<td style="width: 54px">
<asp:TextBox ID="TextBox2" runat="server" Font-Bold="False" Font-Names="Trebuchet MS"
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="Trebuchet MS" 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="Trebuchet MS"
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="Trebuchet MS" Font-Size="X-Small" /></td>
<td style="width: 100px; height: 26px">
</td>
</tr>
</table>
Validatorlarimizin özelliklerini belirledik. Ama bizim yapmak istedigimiz AJAX Validator Callout Extender nesnesi ile verilerin dogu girilip girilmedigini kontrol etmekti bunun için sayfamiza 3 adet Validator Callout Extender nesnesi ekleyelim.
Eklemis oldugumuz bu nesneleri ASP.NET validatorlari 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 Alanina 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 alanina 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 yapmis oldugumuz sayfayi test Edelim.
Simdi de hatali bir mail adresi girelim.
Ortaya görsel açidan çok güzel bir şeyler çikti.
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 | MCTS
Örnek Kodlar için mail adresimi kullanabilirsiniz
askisem@hotmail.com
Kaynaklar
http://ajax.asp.net