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 />