alperozhan.com: ASP.NET Ajax & Linq to SQL

Merhabalar.
Bugun ASP.NET ile birlikte gelen ScriptManager Extension’u kullanarak, Web sayfamizda, Ajax’i etkin hale getirerek, sadece belirtecegimiz bir alanin dinamik olarak guncellenmesini saglayacagiz.
Ajax (Asynchronous JavaScript and XML) web applicationlarimizda XMLHttpRequest objesini kullanarak, veri transferini saglar. Ne kadar XML yazsada, XML kullanimi gerekli degildir, ve Requestlerimiz de asenkronik olmak zorunda da degil.
XMLHttpRequest (XHR) bir API yani Application Programming Interface olmakla beraber Web Browser Scripting Languages (WBSL) lerde bulunur, JavaScript’de buna dahildir. Calisma prensibi, Web Server’a HTTP ve ya HTTPS Requestleri gonderip, yaniti yani Response’i Script’in icine yuklemektir.
PHP’den Ajax’a asina olanlar hatirlarlar,

if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {}
//Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
throw new Error("This browser does not support XMLHttpRequest.");
}

Bu ve bunun gibi scriptleri kullanmak zorunda kaldigimizi. Fakat ASP.NET’de kullanilan ScriptManger ogesini kullanarak (Bu oge, kendisini kullanacagimiz yerden once sayfaya eklenmelidir, server=”runat” iceren bir HTML Form icine konulmalidir.) cok rahat bir sekilde, Ajax kullanmamizi sagliyor. Tabi isteyenler hala eski yontemi kullanabilir.
Ajax Eklentimizi’ Toolbox’dan tutup, formumuzun icine surukluyoruz.

Daha sonra iceriginin guncellenmesini istedigimiz bir alan yaratmak zorundayiz. Bu alan icerisinde disaridan kod cagiramayiz(<% Function1(); %> seklinde) ve bu alana CodeBehind’dan erisecegimiz icin, unique bir ID’ye ve runat=”server” attribute’una sahip olmak zorunda.
Guncellenecek alan UpdatePanel icerisinde bulunmali. Onu da, Toolbox’da Ajax Extensions tabinin altinda bulmaniz mumkun. Onun icerisine bir onceki paragrafda bahsettigim gibi bir alan aciyorum(<div>) ve ona ID veriyorum.

Icine ID’si GridView1 olan bir GridView yerlestirince tamamdir.

Simdi neredeyse hersey hazir. Guncellenmeyi tetikleyen bir ogeye ihtiyacigimiz var. Bunun icin bir LinkButton ekleyecegim. LinkButton guncellenmeyi tetikleyici bir obje olacagindan, bunu UpdatePanel Icerisinde belirtmeliyiz. Bunun icin sirasiyla;

Div Ekleyelim

LinkButton Ekleyelim

UpdatePanel’e Trigger Olarak LinkButton Click Event’ini Tanitalim.

Islemlerden sonra kodumuz su halde olacak.

Simdi Trigger hakkinda konusmak gerekirse, ismi uzerinde Tetikleyici. AsyncPostBackTrigger’i Sayfadaki herhangi bir kontrolu degistirecek bir Trigger’i kullanmak istiyorsak kullaniyor. Bir baska Tetikleyici ise PostBackTrigger’dir.
Projeye gore, LinkButton tiklandiginda bir DataGrid olusturulacak ve Veritabanindaki tablo ile Bind edilecek.
Bunun icin ilk olarak bir Database ekleyelim. Icinde Names adinda bir tablo olusturalim, 3 Column’a sahip (Id, Name, Surname)

Projeye baslarken veri tabanindan veriyi Linq ile alacagimizi soyledigimden, bu verileri Linq to SQL ile cekecegiz. Bunun Icin Proje’ye New Item sekmesinden LINQ to SQL Class’i ekleyelim. Adi Names olacak.

Daha sonra Veritabani Tablomuzu, Names.dbml isimli Linq Classimiza surukleyip birakiyoruz, yaptigimiz degisiklikleri kaydediyoruz.

Evet, Simdi LinkButton’un CodeBehind kismina girecegiz. LinkButton’a tiklandiginda bir DataGrid yaratacak ve onu Database’den cekilecek veriyle dolduracak.

Gordugumuz gibi LinkButton’a tiklandiginda, GridView guncelleniyor.
Simdi LinkButtonumuzun textini Show All olarak degistirelim. Altina ise sirasiyla Label, TextBox ve yeni bir LinkButton ekleyelim. Bir alt satirlarina ise bir ListBox. Ardindan UpdatePanel’e yeni bir Trigger verelim ve Event olarak Yeni LinkButton’un Click eventini verelim.

Son Eklenen LinkButtonun (Lbtn2) Click eventine asagidaki kodlari yaziyoruz.

Simdi ise oneri kismini ekleyecegiz, bir nevi Google’in arama tahmin yontemi.
ListBox’in cevresine bir update panel daha ekliyoruz ve trigger olarak TextBox(TBox1)in TextChange eventini veriyoruz

Burada dikkat etmemiz gereken nokta TextBox’a(TBox1′) AutoPostBack attribute’unu vermemiz gerektigi. Boylece Sayfa post edilmeden once, TBox1′in icerigi degistirildigi anda post ederek, TextChanged eventini yakalayabilecegiz.
TextChanged eventini yakalamak ASP.NET de oldukca yorucu. Siz baska bir yere focus yapmadiginiz surece AutoPostBack ise yaramiyor. Bu nedenle bu eventi elle yakalayacagiz. Bunun icin Page_Load’a

TBox1.Attributes.Add("onkeypress", "javascript:document.getElementById('TBox1').blur();javascript:document.getElementById('TBox1').focus();");

Eklemek yeterli. Fonksiyon TBox1′i blur edip, yeniden focusluyor boylece triggerimiz calisiyor.
TBox1′in textchange eventine giriyoruz code behinddan.