Asp.net mvc ve jquery ile sunucudan json verisi okuma
1.
2. type özelliği ile nasıl bir web isteği göndereceğimizi belirtiyoruz. Bu özelliği belirtmediğimiz durumda otomatik olarak GET isteği gönderilecektir. (NOT: Burada POST isteği kullanırsak sunucu tarafında GET isteğine izin vermemize gerek kalmayacaktır.)
3. dataType özelliği ile sunucudan gelecek veri yapısının nasıl olacağını belirtiyoruz. Bu özelliği belirtmediğimiz durumda jQuery gelen veriyi inceleyerek en uygun formatı seçecektir.
4. Son olarak success özelliğinde isteğimizi sonucu başarılı bir şekilde geldiğinde ne yapacağımızı belirtiyoruz.jQuery ajax fonksiyonu ile ilgili data detaylı bilgiyi http://api.jquery.com/jQuery.ajax/ adresinde bulabilirsiniz.<br />Yukarıdaki yöntemin yanı sıra jQuery kütüphanesi GET tipi bir istekle sunucudan JSON verisi almak istediğimizde kullanabileceğiz başka bir fonksiyon daha sunuyor. getJSON isimli bu fonksiyonda sadece isteği göndereceğimiz adresi ve başarılı sonuç geldiğinde ne yapacağımızı söylememiz yeterli. jQuery bizim verdiğimiz özellikleri ajax fonksiyonunu çağıracaktır.<br />Jquery getJSON fonksiyonunu kullanarak fonksiyonumuzu şu şekilde yazabiliriz.<br /> function SunucudanGuncelle2() { $.getJSON('/Home/VeriGetir', function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); }); }jQuery getJSON ile asenkron JSON verisi getirme.<br />Bu fonksiyonun ajax fonksiyonu kullanarak yazılmış tam karşılığı ise şu şekilde<br />function SunucudanGuncelle2Ajax() { $.ajax({ dataType: 'json', url: '/Home/VeriGetir', success: function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); } });}getJSON fonksiyonunun ajax fonksiyonuna dönüştürülmesi<br />Fark ettiğiniz gibi jQuery dataType özelliğini json olarak belirleyip yine ajax fonksiyonunu çağırıyor.<br />Son olarak “Getir” butonunun Guncelle yerine SunucudanGuncelle1 fonksiyonunu çağırması için aşağıdaki değişikliği yapıyoruz.<br />$(document).ready(function () { $('#btnGetir').click(SunucudanGuncelle); });<br />Son Söz<br />Bu makalemizde JSON verisini asenkron olarak getirip sayfamızda nasıl gösterebileceğimizi inceledik. Bunu gerçekleştirirken ASP.NET MVC ve jQuery içerisinde JSON ile ilgili fonksiyonlara da göz atma şansımız oldu. Makalemiz boyunca kullandığımız dosyaların son durumlarını aşağıda bulacaksınız. <br />Kullanılan Dosyaların Son Durumu<br />Script.js/// <reference path=quot;
jquery-1.4.1-vsdoc.jsquot;
/>var veri = { isim: 'Ali', aksiyon: 'Gel'};function Guncelle() { $('#isim').html(veri.isim); $('#is').html(veri.aksiyon);}function SunucudanGuncelle1() { $.ajax({ type: 'POST', dataType: 'json', url: '/Home/VeriGetir', success: function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); } });}function SunucudanGuncelle2() { $.getJSON('/Home/VeriGetir', function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); });}function SunucudanGuncelle2Ajax() { $.ajax({ dataType: 'json', url: '/Home/VeriGetir', success: function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); } });}$(document).ready(function () { $('#btnGetir').click(SunucudanGuncelle2);});<br />Site.Master<%@ Master Language=quot;
C#quot;
Inherits=quot;
System.Web.Mvc.ViewMasterPagequot;
%><!DOCTYPE html PUBLIC quot;
-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;
><html xmlns=quot;
http://www.w3.org/1999/xhtmlquot;
><head runat=quot;
serverquot;
> <title><asp:ContentPlaceHolder ID=quot;
TitleContentquot;
runat=quot;
serverquot;
/></title> <link href=quot;
../../Content/Site.cssquot;
rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
/> <asp:ContentPlaceHolder ID=quot;
HeadContentquot;
runat=quot;
serverquot;
></asp:ContentPlaceHolder></head><body> <div class=quot;
pagequot;
> <div id=quot;
headerquot;
> <div id=quot;
titlequot;
> <h1>My MVC Application</h1> </div> <div id=quot;
logindisplayquot;
> <% Html.RenderPartial(quot;
LogOnUserControlquot;
); %> </div> <div id=quot;
menucontainerquot;
> <ul id=quot;
menuquot;
> <li><%: Html.ActionLink(quot;
Homequot;
, quot;
Indexquot;
, quot;
Homequot;
)%></li> <li><%: Html.ActionLink(quot;
Aboutquot;
, quot;
Aboutquot;
, quot;
Homequot;
)%></li> </ul> </div> </div> <div id=quot;
mainquot;
> <asp:ContentPlaceHolder ID=quot;
MainContentquot;
runat=quot;
serverquot;
/> <div id=quot;
footerquot;
> </div> </div> </div></body></html><br />Index.aspx<%@ Page Language=quot;
C#quot;
MasterPageFile=quot;
~/Views/Shared/Site.Masterquot;
Inherits=quot;
System.Web.Mvc.ViewPagequot;
%><asp:Content ID=quot;
Content1quot;
ContentPlaceHolderID=quot;
TitleContentquot;
runat=quot;
serverquot;
> Home Page</asp:Content><asp:Content ID=quot;
Content2quot;
ContentPlaceHolderID=quot;
MainContentquot;
runat=quot;
serverquot;
> <fieldset> İsim: <span id=quot;
isimquot;
></span> <br /> İş: <span id=quot;
isquot;
></span> <br /> <input type=quot;
buttonquot;
value=quot;
Getirquot;
id=quot;
btnGetirquot;
/> </fieldset></asp:Content><asp:Content ID=quot;
Content3quot;
ContentPlaceHolderID=quot;
HeadContentquot;
runat=quot;
serverquot;
> <script src=quot;
../../Scripts/jquery-1.4.1.jsquot;
type=quot;
text/javascriptquot;
></script> <script src=quot;
../../Scripts/script.jsquot;
type=quot;
text/javascriptquot;
></script> </asp:Content><br />HomeController.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcApplication1.Controllers{ [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData[quot;
Messagequot;
] = quot;
Welcome to ASP.NET MVC!quot;
; return View(); } public ActionResult About() { return View(); } public ActionResult VeriGetir() { var model = new { isim = quot;
Aliquot;
, aksiyon = quot;
Gelquot;
}; return Json(model, JsonRequestBehavior.AllowGet); } }}<br />
![ASP.NET MVC ve jQuery ile sunucudan JSON verisi okuma<br />Erdem Ergin http://about.me/erdemergin@erdemergin<br />Bu makalemizde ASP.NET MVC projemizde sunucudan JSON verisini asenkron olarak nasıl getireceğimizi inceleyeceğiz. Makalemiz 4 aşamadan oluşacak. İlk aşamada sunucudan aldığımız veriyi gösterecek DOM yapısını oluşturacağız, daha sonra JavaScript kullanarak istemci tarafında DOM’u nasıl güncelleyebileceğimize bakacağız. Bu aşamada elimizde çalışan bir örneğimiz olacak. (Agile makale Sprint 1 )<br />Daha sonra sunucu tarafında JSON verimizi hazırlayıp, makalemizi tamamlarken JavaScript ile bu veriyi sunucudan asenkron olarak nasıl alabileceğimize bakacağız.<br /> Tüm bunları yaparken jQuery kütüphanesine de kıyısından bir giriş yapmış olacağız. Henüz bu kütüphane hakkında bilgi sahibi değilseniz, bu yazıdan sonra www.jquery.com adresine de bir göz atmanızı öneririm.<br />-91440323913500Hazırlık<br />Örneğimizi oluşturmaya Visual Studio ile yeni bir “ASP.NET MVC 2 Web Application” tipinde proje yaratarak başlıyoruz. Bu komut ile Visual Studio çalıştırabilir, içerisinde örnek kodlar olan bir web sitesi yaratıyor. ASP.NET MVC projesi yaratma ve projenin klasör yapısı ile ilgili daha detaylı bilgiyi http://www.yazgelistir.com/Makaleler/1000002168.ygpx adresinde bulunan makalede bulabilirsiniz.<br />Öncelikle örneğimizde kullanacağımız dosyalara bakalım. Geliştireceğimiz c# kodumuzu HomeController.cs dosyasına ekleyeceğiz. Html ile ilgili yapacağımız değişiklikleri Site.Master ve Index.aspx dosyaları içerisinde gerçekleştireceğiz. Bunun yanı sıra Scripts klasörü altına içine JavaScript kodumuzu yazacağımız script.js isimli bir Jscript dosyası ekliyoruz.<br />Örneğimizde veriyi göstermede kullanacağımız html kodunu Index.aspx View’ında MainContent bölümünün içerisine ekliyoruz.<br /> <fieldset> İsim: <span id=quot;
isimquot;
></span> <br /> İş: <span id=quot;
isquot;
></span> <br /> <input type=quot;
buttonquot;
value=quot;
Getirquot;
id=quot;
btnGetirquot;
/> </fieldset>View.aspx sayfasında MainContent’e eklenecek kod parçası<br />Bu sayfada “Getir” butonunu basıldığında isim ve iş bilgisini getirmek istiyoruz.<br />JavaScript ile html’i güncelleme<br />İlk etapta sunucu tarafını için işine dahil etmeden istemci tarafında JavaScript kullanarak html’e veriyi nasıl ekleyeceğimize bakalım.<br />Öncelikle sayfamızdan kullanacağımız JavaScript dosyalarına referans vermemiz gerekiyor. Referanslarımızı Master Page içerisinde yer alan <head> tagı içerisine eklememiz gerekiyor, ancak direk olarak bu sayfada referanslarımızı eklememiz projemizde yer alan tüm sayfalarımızda bu referansların yer almasına neden olacaktır. Sadece Index.aspx sayfamızda bu referansı kullanmak için Site.Master sayfasında <head> tagleri içerisine yeni bir ContentPlaceHolder ekliyoruz.<br /><asp:ContentPlaceHolder ID=quot;
HeadContentquot;
runat=quot;
serverquot;
></asp:ContentPlaceHolder>Site.Master’da head alanına yeni bir content placeholder<br /> <br />Bu yeni PlaceHolder’ı kullanarak Index.aspx sayfamıza özel olarak referans ekleyebiliriz. Bunun için Index.aspx sayfamızın en altına aşağıdaki kodu ekliyoruz.<br /><asp:Content ID=quot;
Content3quot;
ContentPlaceHolderID=quot;
HeadContentquot;
runat=quot;
serverquot;
> <script src=quot;
../../Scripts/jquery-1.4.1.jsquot;
type=quot;
text/javascriptquot;
></script> <script src=quot;
../../Scripts/script.jsquot;
type=quot;
text/javascriptquot;
></script></asp:Content>Index.aspx sayfasına eklenecek Content kodu<br />Böylece Index.aspx sayfamızdan JavaScript kodumuzu yazacağımız script.js dosyasına ve JavaScript kodumuzda kullanacağımız jQuery kütüphanesine referans verdik.<br />JavaScript kodumuzu yazmaya başlamadan önce script.js dosyamızda jQuery ile ilgili fonksiyonlarda IntelliSense desteği alabilmek için “jquery-1.4.1-vsdoc.js” dosyasına referans vermemiz gerekiyor. Bunu Visual Studio içerisinde “jquery-1.4.1-vsdoc.js” dosyasını “script.js” dosyasının içine sürükleyip bırakarak ya da aşağıdaki satırı script.js dosyasının başına ekleyerek yapabiliriz.<br />/// <reference path=quot;
jquery-1.4.1-vsdoc.jsquot;
/>jQuery IntelliSense için script.js dosyamıza eklememiz gereken satır<br />İlk önce verimizi tutacağımız bir nesneye ihtiyacımız olacak. Bu veri nesnesini JavaScript kodumuzda aşağıdaki şekilde tanımlayabiliriz.<br /> var veri = { isim: 'Ali', aksiyon: 'Gel' };<br />Aşağıdaki şekilde bir fonksiyon ile veri nesnemizde sakladığımız değerleri, sayfamızda kullanabiliriz.<br /> function Guncelle() { $('#isim').html(veri.isim); $('#is').html(veri.aksiyon); }<br />Fonksiyonumuzda jquery selector “$” fonksiyonunu kullanarak id değerini verdiğimiz dom objesini bulup, html fonksiyonu ile bu dom objesinin içerisine daha önce tanımladığımız verimizi yazdırıyoruz.<br />İlk aşamayı bitirebilmek için butona basıldığında bu fonksiyonu çağırmamız gerekiyor. Bunu iki şekilde sağlayabiliriz; birincisi input elemanın onClick özelliğini kullanmak, ikincisi ise yine javascript kullanarak input elemanına “Guncelle” fonksiyonunu çağırma özelliğini eklemek.<br />Ben yazılım geliştirmede en önemli kurallardan biri olan “Seperation Of Concerns” ilkesini dikkate alarak, html ile javascript kodunu ayırma taraftarıyım. Bu nedenle butona fonksiyonumuz çağırma özelliğini ikinci yöntemi kullanarak veriyoruz.<br /> $(document).ready(function () { $('#btnGetir').click(Guncelle); });<br />Yukarıdaki javascript kodu sayesinde istemcide dokümanın yüklenmesi bittikten sonra butonumuzu bulup, click event’inde “Guncelle” fonksiyonunu çağıracak değişikliği yapıyoruz.<br />Sayfamızı bu şekilde test ettiğimizde, butona basıldığında verinin ekrana geldiğini görüyoruz.<br />Sunucudan Veri Getirme<br />JSON (JavaScript Object Notation), insanlar için okuması ve yazması, makineler içinde üretmesi ve ayrıştırması kolay bir veri taşıma formatıdır. JSON temel olarak iki yapıdan oluşur. İlk yapı anahtar/değer ikilileridir, bunlar “anahtar = değer” şeklinde tanımlanır. Diğer yapı ise programlama dillerinde “array”, “vector” ya da “list” gibi isimlerle anılan sıralı değerler dizisidir. Bunlarda “[deger1, deger2 ...]” şeklinde tanımlanır. JSON ile ilgili daha detaylı bilgiyi www.json.org sitesinde bulabilirsiniz.<br />Öncelikle ihtiyacımız olan JSON yapısını sunucu tarafında oluşturmamız gerekiyor.<br />MVC 2 ile gelen JsonResult sınıfı bize .net objesini JSON formatında istemciye gönderme olanağı sağlıyor. JsonResult .net objesini JSON’a çevirmek için System.Web.Extensions.dll kütüphanesinde yer alan JavaScriptSerializer sınıfını kullanıyor. <br />JavaScript kodumuzda veri nesnemizi iki anahtar/değer ikilisi kullanarak oluşturmuştuk. JavaScriptSerializer sınıfı tarafından anahtar/değer ikilisine dönüştürülecek yapıyı c# nesnemizde Property olarak tanımlayabiliriz. JavaScriptSerializer Property’minizin adını anahtar, değerini de değer olarak JSON yapısına çevirecek.<br />Sunucu tarafımızda istediğimiz yapıda JSON’a dönüşecek .net nesnemizi “anonymous” sınıf yapısını kullanarak şu şekilde üretebiliriz.<br />var model = new { isim = quot;
Aliquot;
, aksiyon = quot;
Gelquot;
};<br />Sunucu tarafında yaptığımız bir isteğe karşılık olacak bu JSON yapısını dönecek bir Action’a ihtiyacımız var. Bu Action’ı HomeController.cs dosyası içerisinde aşağıdaki fonksiyon ile tanımlayabiliriz.<br /> public ActionResult VeriGetir() { var model = new { isim = quot;
Aliquot;
, aksiyon = quot;
Gelquot;
}; return Json(model); }<br />Burada JSONResult nesnemizi Controller üzerinde bulunan JSON fonksiyonu ile yaratıyoruz. Controller üzerinde bulunan buna benzer yardımcı fonksiyonlar bize ActionResult türevlerini yaratırken, bazı özellikleri otomatik olarak belirleyip bize kolaylık sağlıyor. <br />Kodumuzun doğru çalıştığını test etmek için tarayıcımız üzerinden direk olarak bu Action’ı tetikleyecek bir istek gönderebiliriz. Bunu için tarayıcımıza http://websayfası/Home/VeriGetir adresini giriyoruz. Bu istek sonucunda aşağıdaki gibi bir hata mesajı ile karşılaşacaksınız.<br />Asp.net MVC’nin en güzel yanlarından biri açıklayıcı hata mesajları. Hata mesajı VeriGetir Action’ımızın GET tarzı isteklere cevap vermeyecek şekilde ayarlandığını söylüyor. Bunun detay ise Controller üzerinde bulunan JSON fonksiyonunda gizli.<br /> protected internal JsonResult Json(object data) { return Json(data, null /* contentType */, null /* contentEncoding */, JsonRequestBehavior.DenyGet); }<br />Bu sorunu gidermek için VeriGetir Action’ında JSON fonksiyonunu aşağıdaki şekilde kullanmamız gerekiyor.<br />public ActionResult VeriGetir() { var model = new { isim = quot;
Aliquot;
, aksiyon = quot;
Gelquot;
}; return Json(model, JsonRequestBehavior.AllowGet); }<br />İstemci tarafında bu Action’ı çağırmak ve JSON verisini almak için bir AJAX isteği üretmemiz gerekiyor. jQuery kütüphanesini kullanarak AJAX isteğimizi bir kaç şekilde yaratabiliriz. İlk olarak AJAX isteğimiz üzerinde tam kontrole sahip olduğumuz ajax fonksiyonuna bakalım.<br />function SunucudanGuncelle1() { $.ajax({ type: 'POST', dataType: 'json', url: '/Home/VeriGetir', success: function (data) { $('#isim').html(data.isim); $('#is').html(data.aksiyon); } });}jQuery ajax ile asenkron JSON verisi getirme.<br />Yukarıdaki fonksiyonda kullandığımız özellikleri incelersek:<br />,[object Object]](https://image.slidesharecdn.com/asp-netmvcvejqueryilesunucudanjsonverisiokuma-101216135404-phpapp02/85/aspnet-mvc-ve-jquery-ile-sunucudan-json-verisi-okuma-1-320.jpg)
