ASP.NET uygulamalarımızda AJAX özellikleri kullanmak istersek ilk yapmamız gereken gerekli dosyaları bilgisayarımıza kuracak programı indirmek ve çalıştırmaktır.
Bu programı indirmek için www.asp.net sitesinin download bölümü ziyaret edebilirsiniz…
Visual Studio 2005 ya da Visual Web Developer ile yeni bir web projesi oluşturun. Bu projeyi oluştururken "ASP.NET AJAX-Enabled Web Application" şablonunu kullanınız.
1- Projenize "System.Web.Extensions" namespace'i referans olarak ekleyin.
2-ASP.NET AJAX-Enabled Web Application şablonunda yer alan web.config ayarlarını eksiksiz olarak kopyalayın.
Artık AJAX teknolojisini web uygulamalarınız içinde zahmetsizce kullanabilirsiniz.
Kullanabildiğimizi test etmek için basit bir uygulama geliştirelim.
Oluşturduğunuz projede bulunan default.aspx dosyanıza tasarım görünümünde 3 adet label ve 1 adet buton kontrolünü yerleştirin. Aralarına da <hr> tagi yazarak birbirlerinde görüntü olarak ayrılmasını sağlayın. Webformun kod bölümüne geçip Page_Load olayına label kontrollerin text özelliklerine o anki zamanı yazdıracak kodu ekleyin.
Kodunuz şu şekilde görünmelidir:
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 Label1.Text = DateTime.Now.ToString();
4 Label2.Text = DateTime.Now.ToString();
5 Label3.Text = DateTime.Now.ToString();
6 }
Uygulamayı test etmek için browserınızda görüntüleyin. Butona tıkladığınızda 3 label kontrolününde tıklama zamanını gösterdiğini görün.
Şu ana kadar yaptıklarımız klasik bir ASP.NET uygulamasında yapmamız gerekenlerdi. Yavaş yavaş uygulamıza AJAX unsurlarını ekleyelim.
Visual Studio Toolbox AJAX Extensions bölümünden sayfanın üst bölümüne bir adet scriptmanager kontrolü sürükleyip bırakın. Daha sonra Label2 kontrolünün yanına bir adet UpdatePanel kontrolünü sürükleyip bırakın. Sonrasında Label2 ve Button1 kontrollerini bu UpdatePanel içine sürükleyip bırakın.
İşte ilk AJAX uygulamanızı yaptınız. Uygulamaya browserda gözatıp çalışmasını görün. Butona tıkladığınızda sadece UpdatePanel içinde bir PostBack gerçekleşecek ve sadece Label2 kontrolü güncel zamanı gösterecektir.
Eğer buton update panel içinde yer almasaydı postback tüm sayfa için gerçekleşecek ve sayfanın tamamı yeniden yüklenecekti. Bu durumda sadece update paneli güncellemek için update paneli ilgili butonun tıklanma olayını dinleyecek şekilde ayarlamamız gerekir. Böylece sadece ilgili updatepanel içinde bir postback gerçekleşecektir.
Buton kontrolünün UpdatePanel dışına alınması sonrasında Update Panel için yapılması gereken ilave:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
Böylece UpdatePanel içinde yer almayan bir kontrolün tetiklenmesi ile de UpdatePaneli güncellemiş oluruz.
default.aspx sayfamızın son hali
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace WebApplication1
13 {
14 public partial class _Default : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 Label1.Text = DateTime.Now.ToString();
19 Label2.Text = DateTime.Now.ToString();
20 Label3.Text = DateTime.Now.ToString();
21 }
22 }
23 }
Klavyeleriniz şen ola…
