Ajax teknolojisinin temelinde XmlHttpRequest objesi vasıtasıyla sayfanın tümünü postback etmeye gerek duymaksızın server ile iletişimde bulunmak yatıyor.
Aslında Ajax teknolojisinin temeli ve en işlevsel yanı server tabanlı fonksiyonları istemci taraflı kodlarda kullanmaktır diyebilirim. Diğer bir değişle asp.net'te yazdığınız sınıf ve bu sınıfa ait fonksiyonları javascript fonksiyonu gibi kullanıp web projemizin uygulama katmanında (arayüzünde) postback olmadan sunucu işlemlerimizi yapıyoruz.
Aşağıda anlatacağım şekilde çok katmanlı mimariye sadık kalıp business objelerimizi javascript kodları ile kullanmaya çalışacağız.
Bir bakışta anlaşılabilmesi için örneği en basitinden seçtim.
1. İlk olarak yeni bir web projesi açıyoruz. Bir adet WebForm ve bir adette class ekliyoruz
Classımızın ismi HesapIslemleri olsun
2. Ajax namespace ve sınıflarını sunucu tarafında kullanabilmemiz için projemize Ajax.dll'ini eklememiz gerekiyor.
3.projemizin web.config dosyasına aşağıdaki düğümleri ekliyoruz.
|
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
...
<system.web>
</configuration>
|
Burada .ashx uzantılı dosyalardan gelen request'letrin Ajax.PageHandlerFactory sınıfı tarafından işlem göreceğini belirtiyoruz. Bunu neden yapıyoruz, şimdilik boşverelim.
4. HesapIslemleri sınıfımızı oluşturduktan ve bu sınıfa Ajax namespace'ini import ettikten sonra metodumuzu aşağıdaki gibi yazıyoruz.
[Ajax.AjaxMethod()]
public double KdvOraniHesapla(double hamTutar, double kdvOrani)
{
return hamTutar * (hamTutar * (kdvOrani / 100));
}
|
Burada Ajax.AjaxMethod etiketi ile bu metodun bir ajax metodu olduğunu ve javascrip kodlarımızdan bu fonksiyona erişebileceğimizi bildiriyoruz.
5. Ama bu işlemi yapabilmek için Default.aspx sayfamızın load metodunda HesapIslemleri sınıfımızın bir Ajax tipi olarak belirteceğiz.
|
public class _Default: System.Web.UI.Page{ private void Page_Load(object sender, EventArgs e){ Ajax.Utility.RegisterTypeForAjax(typeof(HesapIslemleri)); //... } //... } |
6. ReqisterTypeForAjax metodu kullanarak erişeceğimiz tipimizi sayfamızın javascript kodlarına bağlamak için aşağıdaki kodları ekliyoruz.
|
<script language="javascript" src="ajax/common.ashx"></script><script language="javascript" src="ajax/AjaxJavascriptSample.HesapIslemleri,AjaxJavascriptSample.ashx"></script>
|
7.Buraya kadar herşey güzel. Şimdi sıra javascript kodlarımızı yazmaya.
<script type="text/javascript">
function kdvOraniGoster()
{
var txtKdv = document.getElementById("<%=txtKdv.ClientID%>")
var txtMiktar = document.getElementById("<%=txtMiktar.ClientID%>");if(txtKdv.value=='')
{
alert('Lütfen bir kdv oranı belirleyiniz!');
return;
}
if(txtMiktar.value=='')
{
alert('Lütfen bir miktar giriniz!');
}
var response = HesapIslemleri.KdvOraniHesapla(txtMiktar.value,txtKdv.value);
if(response!=null)
{
alert("Kdv Dahil :" + response.value);
}
else
{
alert('˜İşlem başarısız');
}
return;
}
</script>
Bu kodlarda dikkatinizi çekmek istediğim tek nokta fonksiyonumuzun çağırımı;
var response = HesapIslemleri.KdvOraniHesapla(txtMiktar.value,txtKdv.value);
Tipimizi ve metodumuzu yazıyoruz parametrelerini gönderiyoruz ve sonuç response nesnesine atılıyor.
Bu şekilde server tabanlı tüm Business obje ve metodlarımızı postback olmaksızın istemci tarafında kotarabiliriz.
Yazdığımız kodların tümü proje halinde ektedir. Bununla alakalı daha kapsamlı ve daha spesifik konulara da değinicem ilerde.
Şimdilik hoşçakalın.
Subscribe