Çok uzun zamandır programlamaya yönelik bir yazı yazmadığımı farkettim ve bir süredir uğraştığım bu konu ile ilgili bir şeyler karalamaya karar verdim.
Konu: Asp.Net tabanlı bir web sayfasında JQuery kullanarak JSON formatında veri alarak bu veriyi işlemek.
İlk bakışta her şey gayet güllük gülistanlık gibi duruyor. Asp.Net zaten çalıştığımız ortam. JQuery, sağolsun, süper ötesi bir kütüphane ile karşımıza çıkıyor ve gayet kısa kodlar kullanarak sağa sola sorgu göndermemizi kolaylaştırıyor. JSON dediğimiz şey ise basitçe {“ad”:”Çağdaş”,”soyad”:”Korkut”} biçiminde bir veri türü olarak tanımlanabilir.
İlk önce Asp.Net web projemize bir adet Web Service ekliyoruz ki JQuery ile bu Web Service’e bağlanarak verileri alalım. Web Service’imizin adını HelloJson koyuyoruz.
Web Service’i projeye eklediğimizde IDE otomatik olarak bir “Hello World” metodunu bizim için eklemiş olacak. Bu metodun çıktısını azıcık değiştirerek JSON formatına getiriyoruz ki amacımıza uygun adımlar atabilmiş olalım. Eklediğimiz Web Service’in Hello World metodunu aşağıdaki biçimde değiştiriyoruz.
[WebMethod]
public
string HelloWorld() {
return
"{"Hello":"World"}";
}
En basit hali ile bir JSON çıktısı üreten Web Service’imizi hazırlamış olduk.
Şimdi bir Asp.Net Web Form‘u açarak .aspx uzantılı dosyanın <head> tagini şu şekilde değiştiriyoruz.
<head
runat=”server”>
<script
type=”text/javascript”
src=”jquery.js”></script>
<script
type=”text/javascript”
src=”json.js”></script>
<script
type=”text/javascript”
language=”javascript”>
function gitAl(){
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8″,
url: “HelloJson.asmx/HelloWorld”,
dataType: “json”,
data: “{}”,
success: function(msg){processData(msg);}
});
}
function processData(jsonData)
{
var jsText;
jsonData = JSON.parse(jsonData);
alert(jsonData[0].name);
}
</script>
<title>SüperSonik Sayfa</title>
</head>
Hemen açıklıyorum.
Sayfamıza eklediğimiz iki adet javascript dosyası ve ayrıca yazdığımız 2 adet fonksiyon var. Bunların ilki jquery.js adından anlaşıldığı gibi JQuery sorgularımızı yaparken kullandığımız fonksiyonları içeriyor.
Buradaki ikinci javascript dosyası ise json.js. Bu dosya benim can simidim oldu. Şimdilik oraya ekleyelim. Ne amaçla kullandığımıza geleceğim.
Bu iki javascript dosyasını yazının sonunda bulunan linkleri kullanarak indirebilirsiniz. Benim sunucumdaki dosyalar güncel dosyalar olmayabilir. Onun için bu dosyaları orjinal kaynaklarından indirmenizi tavsiye ederim. [JQuery] [JSON]
Yazdığımız fonksiyonlara gelince. gitAl isimli fonksiyon, çağrıldığı zaman belirttiğimiz adrese bir sorgu yapıyor. Sorgu başarılı olursa, aldığı yanıtı veriyiIsle() fonksiyonuna gönderiyor. veriyiIsle fonksiyonu ise veriyi işliyor. Sorgunun sonucunda gelen veriye ne yapmak istiyorsak hep bu fonksiyonda yapacağız.
Asıl JQuery sorgumuzu gitAl fonksiyonu yapıyor. Hemen yakından inceleyelim:
$.ajax(); şeklinde bir fonksiyon var. Bu fonksiyon include ettiğimiz jquery.js dosyasında bulunuyor. Normalde, XMLHttpRequest ile yapıyor olsak IE için ayrı FF için ayrı kodlar yazmamız gerekecekti fakat bu fonksiyon o işleri bizim için yapıyor ve biz sadece $.ajax yazıp gerekli parametreleri veriyoruz… İşte o parametreler:
- type: burada sorguyu gönderirken yanında göndereceğimiz parametreleri hangi yöntem ile göndereceğimizi belirtiyoruz. POST veya GET.
- contentType: bu parametre web servisinden istediğimiz veri tipini(application/json) ve karakter kodlama biçimini(utf-8) içeriyor.
- url: sorgu yapacağımız web servisinin adresi
- dataType: web servisine göndereceğimiz parametrenin tipi
- data: web servisine göndereceğimiz parametre. Açıkçası ben, bulduğum dökümanda “data parametresine “{}” girmediğimiz zaman JQuery, geri dönen verinin tipini algılayamayabiliyor” diye okumuştum
- success: ve son olarak, başarılı bir sorgunun ardından dönen veriyi sokacağımız fonksiyon.
Görüldüğü gibi son derece kullanışlı bir $.ajax() fonksiyonumuz var.
Yazdığımız ikinci fonksiyon(veriyiIsle) ise gelen veriye çeki düzen verecek fonksiyon. Web servisinden bize JSON tipinde bir very döneceğini biliyoruz. Normalde JSON tipinde bir veriyi fonksiyonumuz içinde tanımlayıp kullanıyor olsaydık JSON.parse işlemine gerek olmayacaktı. Ama very bize dışarıdan geldiği için ve üstelik string formatında geldiği için öncelikle bu string’i JSON olarak tanıtmamız gerekiyor. Bu işlemi de include ettiğimiz json.js javascript’inde bulunan JSON.parse() fonksiyonu ile yapacağız.
Bu fonksiyon bir adet string parametre alıyor ve geriye JSON döndürüyor. Biz de fonksiyonun bu zayıf noktasını kullanarak:
jsonData = JSON.parse(jsonData);
yapacağız. Böylece jsonData değişkenimizin içeriği artık gerçekten bir JSON nesnesi içeriyor olacak. Sonra bu JSON nesnesinin içindekileri parmağımızda oynatarak istediğimiz yere yerleştirebiliyor olacağız. Bu iş için de JQuery’nin nimetlerini kullanıyoruz. $(‘#ID’) şeklinde bir kullanım ile sayfa üzerindeki istediğimiz ID‘ye sahip nesneye erişebiliyoruz. Sonra da $(‘#nesneID’).html(); fonksiyonu ile bu nesnenin içine istediğimiz html kodunu yazabiliyoruz. Benzer bir işlem $(‘#nesneID’).text(); fonksiyonu ile de yapılabiliyor. Bu fonksiyonda da html değil de yazı yazıyoruz nesnenin içine.. neyse.
Aspx sayfamızın son hali aşağıdakini andırıyor olacak:
<head
runat=”server”>
<script
type=”text/javascript”
src=”jquery.js”></script>
<script
type=”text/javascript”
src=”json2.js”></script>
<title>SüperSonik Sayfa</title>
</head>
<body>
<form
id=”form1″
runat=”server”>
<div>
<script
type=”text/javascript”
language=”javascript”>
function gitAl(){
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8″,
url: “HelloJson.asmx/HelloWorld”,
dataType: “json”,
data: “{}”,
success: function(msg){processData(msg);}
});
}
function processData(jsonData)
{
var jsText;
jsonData = JSON.parse(jsonData);
$(‘#denemeTahtasi’).html(jsonData.Hello);
}
</script>
<div
id=”denemeTahtasi”>İçi boş bir div.</div>
<a
href=”javascript:gitAl();”>Hello??</a>
</div>
</form>
</body>
Ne oldu? Mis gibi JQuery sorgusu yapan bir sayfamız oldu. Ama o da ne? Sayfayı çalıştırdığımızda aşağıdaki hata ile karşılaştık:
Only Web services with a [ScriptService] attribute on the class definition can be called from script.
Hemen gerekeni yapıyoruz. HelloJson isimli web servisimizin cs kodunu açıyoruz ve class tanımlamasının hemen üzerine şunu ekliyoruz:
[System.Web.Script.Services.ScriptService]
ve artık Hello sorusuna World diye cevap veren bir JQuery & Web Service ikilimiz var.
Örnekte kullanılan javascript dosyaları
İlgili yazılar:
Merhaba;
Uygulama çok güzel olmuş, ama asp.net 2.0 ile yapamadım ben. Acaba sen 3.5 mu kullandın?
@Serdar, ben de asp.net 2.0 kullandım.. nasıl bir hata aldın veya nasıl bir sorun oldu.. farkedebildiğin bir hata oldu mu?
ilk başta ben de framework 3.5 olmadığı için çalışmıyor sanmıştım ama ufak tefek problemleri halledince çalıştı.
mail de atabilirsin
kolay gelsin
@Chakian;
Ben asp.net 2.0 ile yapmayı bayağı uğraşmama rağmen yapamadım. Öncelikle şunları sorayım projenin ajax enabled olması ve sayfamızda scriptmanager kontrolü olması gerekiyor mu? Gerçi ben her iki türlüsünü de denememe rağman yapamadım.
Bu arada heryerde mailini aramama rağmen bulamadım. O yüzden tekrar buraya yazdım kusura bakma
Sitemi şantiyeye çevirdiğimi unutmuşum. Asıl sen kusura bakma
Benim kullandığım halinde, ScriptManager varmış.. ama o olmadan da çalıştığını daha önce gördüğüm için ScriptManager’ı kaldırarak tekrar denedim ve çalıştı. Her ne kadar kodu görünmese de çalışır hali Anasayfa‘mdaki linkler bölümünde bulunuyor.
Şimdi mail atıyorum
[...] JQuery kütüphanesinin bu sayfada yüklenmiş olması gerekiyor. O nasıl olacak diyorsanız sizi şu sayfaya [...]
http://www.mehmetduran.com/ adresinde jQuery ve Asp.Net servisleri ile yapılmış çok güzel örnekler var.
Bir de biliyormusunuz bilmem ama veb servisinden geriye {“veri”:”veri”} şeklinde string dönüştürmenize gerek yok. Asp.Net servisine json bi istek geliyorsa servis otomatik olarak json döndürür. Aksinde ml döndürür. Tabi bunların ince ayarları var. Blogu inceleyin…