Alperdotnet's Web Log

Ağustos 20, 2008

AspDotNet ve Ajax

Merhabalar;

Şuan ki günümüzde en çok tartışılan konuların başında Ajax geliyor. Özellikle de bizler gibi yazılım uzmanı kişilerin seçimlerine maruz kalan bu Javascript araci web’de ve windows form’larimiz da çok büyük yardımcı oluyor. Ajax Web2.0 gibi yeni teknolojilerin getirdiği olanakların ilk başını çekmektedir. AspDotNet ‘e bunun için ek bir eklenti gelmiştir ki bu Ajax ile kodladığımız program veya websitelerimiz de gayet kolaylık sağlamaktadır. Özelllikle de Visual Web Developer ve Visual Studio kullananlar için yapılan bu extension ‘lar ile gayet hızlı Ajax kurulumu yapıp kullanmaya başlayabiliyorsunuz.

http://www.asp.net/ajax/downloads/

Adresinden indireceğiniz Toolkit ve Extension paketlerini kurduktan sonra Ajax kullanıma başlayabiliriz.

İlk önce yapacağımız yeni bir websitesi oluşturmak fakat My Templates bölümünden AJAX Control Toolkit Web Site ‘ı seçmeliyiz ki bu bize çok büyük yarar sağlayacaktır. Seçtiğimiz Template’imizi oluşturduktan sonrasında Default.aspx sayfamıza geliyoruz. Burada şu şekilde bir kod olacaktır ki bu yine <div></div> arasında olması gerekmektedir.

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

Hemen bunun altına deneme olarak yaptığımız Update Panel kodumuzu yerleştiriyoruz.

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”>
<ProgressTemplate>
<img src=”images/ajaxloading.gif” alt=”Loading Image” />
</ProgressTemplate>
</asp:UpdateProgress>

Elbette ki bu ajaxloading.gif’i istediğiniz şekilde bir loading imajı ile değiştirebilirsiniz. Sonrasında sorgumuzu yapmak için ekleyeceğimiz UpdatePanel’imiz olacaktır.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”Button1″ EventName=”Click” />
</Triggers>
<ContentTemplate>
<asp:Label ID=”Label1″ runat=”server” Text=””>
<asp:Button ID=”Button1″ runat=”server” Text=”Uygula” />
</ContentTemplate>
</asp:UpdatePanel>

Şimdi bu kısmı açıklamak gerekir ise Ajax extension’ı ile gelen script’lerimizi kontrol etmemiz için bir update panel’imiz vardır. Bu update panelimizin Trigger Bölümünde gördüğünüz üzere AsyncPostBackTrigger alt element’inin ControlID’si Button1 ‘i göstermektedir ve EventName’i ise Click’dir. Burada yapılan işlem sorguyu sayfayı yeniden başlatmadan Ajax’ın innerhtml yöntemi ile otomatik olarak uygulaması demektir. Şimdi objemizi incelemeye devam edersek her control objelerinde görülen contenttemplate kısmı vardır ki burada html ve asp controller’ını rahatça kullanbilemekteyiz.

Codebehing kısmına gelecek olursak orada normal olarak yaptığımız gibi Button1 objemizin Event’ı olan Click’i seçtikten sonra ki kodlarımız şu şekilde olacaktır:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Label1.Text = “Ajax Yüklenmiştir.”

End Sub

Gördüğünüz üzere herhangi bir sorun olmadan kurulumunu yaptığınız AJAX artık AspDotNet’imiz de rahat rahat çalışmaktadır. Önümüzde ki günler de size Ajax ile çok daha fazla yapılabilen örnekler sunacağımdır.

Alper TAYFUN

WordPress.com'da ücretsiz bir web sitesi ya da blog oluşturun.