Ana içeriğe atla

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

Bu blogdaki popüler yayınlar

ASP.NET Sayfalar arası veri taşıma işlemleri

merhaba;

bu yazımda sizlere asp.net üzerinde sayfalar arasında veri taşıma işlemlerinden bahsetmek istiyorum.hepimizin bildiği gibi uygulamarımızda sayfalarımız arası haberleşmeler büyük önem arzetmektedir.bazı sayfalarda bazı işlemlerin yerine getirilebilmesi için diğer sayfalardan gelecek verilere ihtiyaç duyulabilir(GET).ASP.NET üzerinde veri taşıma işlemleri aşağıdaki şekillerde yapılabilir.

1-)QueryString : en yaygın ve basit kullanıma sahip olanıdır.istenilen verileri sayfayı post ettiğiniz zaman yönlendirildiğiniz sayfaya URL üzerinden taşır.

Kullanımı :

a sayfasından b sayfasına isim taşıyalım.

a sayfasında linkinizi şu şekilde değiştirirseniz:
Response.Redirect("gidileceksayfa.aspx?isim=can");
Tarayıcınızın URL kısmına baktığınızda:

www.siteadi.com/b.aspx?isim=canolarak görürsünüz.a sayfasından veri aktarımı tamamlanmıştır.bundan sonraki adım b sayfasından gelen veriyi almaktan ibarettir.o da şu şekilde yapılır:

b sayfasında "isim" adında bir değişken tanıml…

Devexpress Türkçe Dil Paketi

Merhaba,

Devexpress kontrollerinizi türkçe veya  başka bir dil ile kullanmak istiyorsanız Localized assembly leri indirmeniz gerekmektedir.Daha önceleri bu çok zorlu bir süreç oluyordu.internetteki uzun araştırmalar,yanlış veya eksik çeviriler vs. bir sürü problem ile karışılaşıyorduk.nihayet beklediğimiz gibi developer express firması bu soruna el attı ve güzel bir çözüm getirdi.artık https://localization.devexpress.com/ adresi üzerinden devexpress türkçe paketlerini en güncel ve doğru şekliyle hemen indirip kullanabilirsiniz.dil desteğini uygulayabilmek için exe nin bulunduğu path deki dll dosyalarını değiştirmeniz yeterli olacaktır.eski dll dosyaları yerine yeni dil paketindeki dosyaları yapıştırın ve uygulamanızı başlatın.bu hizmeti kullanabilmek için resmi devexpress sitesi olan http://devexpress.com/ 'a üye olmanız gerekmektedir.işlem tamamlandığında indirme linki e-posta adresinize gelmektedir.dil pakedini indirirken talep ettiğiniz paketversiyonun kullandığınız devexpress…

PAYTR SANAL POS ASP.NET C# Entegrasyonu

merhaba, bu makalede sizlere PAYTR Sanal pos yapısını .NET üzerinde nasıl çalıştıracağımız ile ilgili bilgi aktarmaya çalışacağım. Ücretsiz başlangıç sağlaması ve sabit ödeme almaması sebebiyle düşük bütçeli e-ticaret yapmak isteyen kişilerin tercih ettiği PAYTR Sanal pos entegrasyonu temelde PHP üzerine kurulmuş. Dolayısıyla .net ile e-ticaret yazmaktaysanız bu sizi bir hayli zorluyor zira firma ile birçok görüşme yapmama rağmen sağlıklı bir .net örneklemesi bulamadım. Baktım olacak gibi değil, sonunda oturdum kendi entegrasyonumu kendim yazdım :). aşağıda detaylı olarak bulabilirsiniz.

//using satırlarımızı ekleyelim; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Collections.Specialized; using System.Data; using System.Linq; using System.Net; using System.Security.Cryptography; using System.Text; using System.Web; using System.Web.Script.Serialization; using System.Web.UI; using System.Web.UI.WebControls; //aşağıdaki sabit PAYTR Fonksiyonla…