ASP.NET JQUERY AJAX Kullanımı

Herkese merhaba; bu makalede ASP.NET ile geliştirdiğiniz projelerde JQUERY ile AJAX işlemlerini nasıl yapabileceğimizi anlatmaya çalışacağım. Bildiğiniz gibi JQUERY, JAVASCRIPT dünyasının olmazsa olmaz ve en çok kullanılan kütüphanelerinden biri. AJAX metodu, sayfa yenilenmesini (POST) gerektirmeden veri alışverişi yapılabilen hızlı ve esnek bir yapı.

Örnek projemize başlamadan önce; JQUERY kütüphanesinin son versiyonunu projemize dahil etmemiz gerekiyor. Bu işlemi iki yolla yapabiliriz;

1. JQUERY Kütüphanesini http://jquery.com/download/ adresinden indirip projenize dahil edebilirsiniz.
2. CDN yoluyla head tagları arasına
   adresini ekleyebilirsiniz. Şahsen ben bu yolu tercih ediyorum.

JQUERY Kütüphanesinin doğru yüklendiğinden emin olmak için aşağıdaki scripti yazmanız yeterlidir; uyarı penceresini gördüyseniz aşağıdan devam edebilirsiniz;

$(document).ready(function () { alert('jquery yüklemesi başarılı'); });
     

Yapacağımız örnekte textbox içerisine yazdığımız ürün isimlerinin veritabanında olup olmadığını kontrol edecek, var ise her biri için alt alta linkler oluşturacaktır. Genelde alışveriş sitelerinin arama kısımlarındaki çalışma mantığının çok basit bir hali.

İşlemi yapabilmek için ilk önce aşağıdaki gibi bir tabloya sahip olmamız gerekmekte. Id ve UrunAdi isminde iki kolon içermekte. Create cümlesi şu şekilde;

CREATE TABLE [dbo].[TestTablo](
 [Id] [int] IDENTITY(1,1) NOT NULL,
 [UrunAdi] [nvarchar](50) NULL,
 CONSTRAINT [PK_TestTablo] PRIMARY KEY CLUSTERED 
(
 [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Şimdi gelelim ASP.NET Tarafına. ilk olarak basit bir form tasarlayalım. Formumuzda 1 adet textbox, 1 adet buton bulunsun.Buton kontrolü, linkleri ve textbox 'ı temizlesin. Arama işlemini textbox kontrolünün Oninput olayında gerçekleştireceğiz. Yani textbox üzerindeki her bir değişiklikte fonksiyonumuz çalışacak. sonuçları göstereceğimiz bir adet div nesnesi de tanımlayacağız.

Şimdi javascript fonksiyonlarımızı yazalım;

İlk fonksiyonumuz ekran temizleme fonksiyonu;

function EkranTemizle() {
            $('#txtUrunAd').val(null);
            $('#sonuc').html(null);
            $('#txtUrunAd').focus();
        }

İkinci fonksiyonumuz ise arama yapacak olan fonksiyon;

function UrunBilgiGetir() {
            var qTextboxDeger = $('#txtUrunAd').val();
            if (qTextboxDeger != '') {
                $.ajax({
                    type: "POST",
                    url: "../Default.aspx/SyncUrunGetir",
                    data: "{ 'qUrunAdi': '" + qTextboxDeger + "' }",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    success: function (result) {
                        $('#sonuc').html('');
                        if (result.d == '') {
                            $('#sonuc').html('Kayıt bulunamadı');
                        }
                        jQuery.each(result.d, function (index, item) {
                            $('#sonuc').append('' + item + '
');
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText);
                    }
                });
            }
        }

UrunBilgiGetir fonksiyonunu biraz açacak olursak;

Bu satır ile TextBox nesnesinin değerini javascript değişkene alıyoruz

var qTextboxDeger = $('#txtUrunAd').val();

harici bir istekle aynı veya farklı bir sayfaya parametre ile istekte bulunacağımız için POST metodunu kullanıyoruz.

type: "POST" 

İstekte bulunacağımız metodun bulunduğu sayfanın adresini yazıyoruz.

url: "../Default.aspx/SyncUrunGetir" 

İsteği gönderdiğimiz metoda ait var ise parametreleri ekliyoruz. (Buradaki parametre isimleri, metoda ait parametre isimleri ile uyuşmalıdır. Örn. qUrunAdi)

data: "{ 'qUrunAdi': '" + qTextboxDeger + "' }", 

Aşağıdaki satırlar ile içerik tipi ve karakter desteğini ayarlamaktayız. Ayrıca veri alışverişi json formatı ile yapmakta olduğumuzu bildiriyoruz.

contentType: 'application/json; charset=utf-8',
dataType: "json", 

Eğer yaptığımız AJAX talebi başarılı ise, çalışacak olan kısım aşağıdaki gibidir.
Burada sonuc id li div elementinin içeriğini ilk önce temizliyoruz. ardından gelen veriyi result isimli nesneye alıyoruz. result.d size direkt olarak gelen yanıtı verir.biz, birden çok kayıt alabildiğimizden dolayı örn. "otomobil,otobüs" şeklinde; o nedenle foreach döngüsü ile her değerin içerisinde dönüp ekrana yazdırma işlemini yapıyoruz.

success: function (result) {
                        $('#sonuc').html('');
                        if (result.d == '') {
                            $('#sonuc').html('Kayıt bulunamadı');
                        }
                        jQuery.each(result.d, function (index, item) {
                            $('#sonuc').append('' + item + '
');
                        });
                    }
 

Eğer isteğimizde hata alırsak, aşağıdaki kısım çalışacaktır.

error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);

Javascript kısmı bu kadar. Şimdi gelelim; isteğimizi cevaplayacağımız CSHARP Fonksiyonuna;

[WebMethod]
    public static List SyncUrunGetir(string qUrunAdi)
    {
        List qDonus = new List();
        DataTable qTablo = new DataTable();
        SqlConnection qcon = new SqlConnection("Bağlantı cümleniz");
        qcon.Open();
        SqlDataAdapter qadap = new SqlDataAdapter(String.Format("SELECT * FROM TestTablo WHERE UrunAdi LIKE '%{0}%'",qUrunAdi), qcon.ConnectionString);
        qadap.Fill(qTablo);
        qcon.Close();
        foreach(DataRow dr in qTablo.Rows)
        {
            qDonus.Add(dr["UrunAdi"].ToString());
        }
        return qDonus;
    }

[WebMethod] özelliği, tanımlandığı metodun bir web servis metodu olduğunu ve farklı kaynaklar üzerinden XML/SOAP/AJAX yoluyla çağırılabileceğini belirtir. Metod mutlaka statik olmalıdır.Yukarıdaki fonksiyon kısaca JQUERY AJAX metodundan gönderilen parametreyi alır, TestTablo isimli tabloya giderek ürün adı uyuşan kayıtları getirir, ardından qDonus isimli List içerisine alarak çağrıldığı yere geri gönderir.


İşte ilgili işlemler bu kadar basit. Bu tarz işlemler ile fazladan server-side kodu yazmadan, JQUERY ile HTML nesneleri üzerinde kolayca işlem yapabilirsiniz.Umarım basit bir anlatım olmuştur. aşağıdaki bağlantı üzerinden çalışan örneği indirebilirsiniz.

https://drive.google.com/file/d/1kO88IvLzR6ILvRKs625CN7SK5I6q8ocr/view?usp=sharing