Birçok alanda kullanıcının doldurduğu alanları kontrol etmek isteriz. Misal olarak kullanıcının bir web sitesine kayıt olmak istemesi durumunda, bu kullanıcı adının ya da belirtilen e-posta adresinin daha önce sisteme kayıt edilmiş olup olmadığını kontrol etmek ve buna göre kullanıcıyı yönlendirmek isteriz. Bu gibi durumlarda server side kontrol etmek çok da istenen bir durum olmaz, çünkü sayfanın tekrar çalıştırılması anlamına geldiği için yavaşlık olur ve hatta kullanıcının o esnada doldurduğu bazı alanlar da silinebilir. En doğru yöntem javascript vasıtasıyla web service ve ajax kullanarak client side bu işi çözmek gözüküyor.
Bir örnek ile kullanımını anlatmaya çalışacağım. Mesela senaryomuzda bir websitesinin kayıt işlemi için kullanıcı e-posta adresini belirtiyor olsun, bu e-posta adresi sisteme kayıtlı mı bunu belirlemek isteyelim. Tabi bir de girilen e-posta adresi doğrumu ona da bakalım. E-posta adresinin format'ının doğru olup olmadığının kontrolü sayesinde web service'imizide gereksiz zamanlarda çağırmamıza gerek kalmadığı için site trafiğini de azaltabiliriz.
1. adım: Bir web service ekleyelim projemize, mesela UserService.asmx olsun ve aşağıdakine benzer bir koda sahip olmamız gerekiyor. Burada dikkat edilecek husus [System.Web.Script.Services.ScriptService] satırının kesinlikle eklenmiş olması, yoksa ajax ya da script vasıtasıyla çağırılmasına izin verilmez.
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Security;
[WebService(Namespace = "http://www.tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class UserServices : System.Web.Services.WebService {
public UserServices () {
}
[WebMethod]
public bool IsUsernameAvailable(string CheckFor) {
if (Membership.GetUser(CheckFor, false) == null)
return true;
else
return false;
}
}
3. adım: Bir sayfa yaratalım. Mesela default.aspx olsun.
4. adım: Bu sayfaya bir ScriptManager ya da ToolkitScriptManager ekleyelim.
5. adım: Eklediğimiz ScriptManager'ın services özelliğine yarattığımız web service'i ekleyelim. Ekledikten sonra aşağıdakine benzer bir kod elde edilmiş olması gerekiyor.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/services/UserServices.asmx" />
</Services>
</cc1:ToolkitScriptManager>
6. adım: Sayfamıza bir TextBox ekleyelim adını txtEmail koyalım ve bir Label koyalım adını da lblErr koyalım.
7. adım: Sayfamızın Page_Load event'ine aşağıdaki kodu koyalım.
txtEmail.Attributes.Add("onkeyup", "checkName()");
8. adım: Sayfamızın koduna aşağıdaki javascript'i ekleyelim.
<script type="text/javascript">
function checkName() {
var eml = document.getElementById(<% ="\'" + txtEmail.ClientID + "\'" %>);
var regexf = /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i;
if(regexf.test(eml.value))
{
UserServices.IsUsernameAvailable(eml.value, onIsAvailableCompleted);
}
}
function onIsAvailableCompleted(result) {
if(result != null)
{
alert(result);
var lblErr = document.getElementById(<% ="\'" + lblErr.ClientID + "\'" %>);
if(result)
{
lblErr.innerText = 'E-postaniz kontrol edildi.';
lblErr.style.color='green';
}
else
{
lblErr.innerText = 'Bu kullanici zaten mevcut, baska bir kullanici deneyin.';
lblErr.style.color='red';
}
}
}
</script>
Bu kadar. checkName fonksiyonu içine yazdığımız regexf değişkeni e-posta için validator olarak kullanılıyor ve txtEmail içine kullanıcının yazmış olduğu yazının format'ını kontrol ediyor, eğer doğru bir e-posta formatındaysa o zaman web service'in IsUsernameAvailable fonksiyonunu çağırıp lblErr içine gerekli yazıyı yazıyor. Bu örnek geliştirilebilir tabii. Misal olarak eğer doğru ve kullanılabilir bir e-posta adresi belirtilmemiş ise submit butonunun enabled değeri false olarak işaretlenebilir ve formun submit edilmesi engellenebilir.
Bu tür işlerin istemci tarafında çözülmesi hem performans hem de trafik açısından daha doğru oluyor.
Düzeltme: Bu yazıdaki RegEx kodu eski kaldı bu sebeple RegEx ile E-Posta uygunluk kontrolü için kod başlığıyla yazdığım yazıyı okumanızı tavsiye ederim. Merak etmeyin kısa tuttum ve kodu hemen görebilirsiniz orada.
Öyle işte.