Asp.NET MVC – JSON

Yapısal olarak XML diline benzeyen, veri taşımak için oluşturulmuş standart bir Object JavaScript dilidir.JSON(JavaScript Object Notation), JavaScript içerisinde kolayca işlenebilme özelliğine sahiptir.Bu özelliği yüzünden genellikle Ajax platformunda tercih edilmektedir.JSON ile düzenlenen bir veri yapısına JavaScript komutlarıyla çok hızlı ve esnek bir şekilde erişilebilmektedir.Yapısal olarak her ne kadar XML diline benzesede, XML’e göre daha hızlı parse edilmekte ve fiziksel boyut olarakta az yer kaplamaktadır.Bunun nedeni ise, JSON’da XML’de olduğu gibi “node” açıp kapatmayla uğraşılmamakta, onun yerine satırlar ve elementler birbirlerinden noktalama işaretleri ve parantezler ile ayrılmaktadırlar.Şimdi gelin beraber Asp.NET MVC yapısıyla JSON mimarisini birlikte daha detaylı inceleyelim.

Öncelikle JSON yapısında kullanılan veri tiplerini görelim.
“string“, “number“, “bool“, “array“, “object” ve “null”

Şimdi hemen bir Asp.NET MVC projesinde örneklendirme yapalım.

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult OgrencileriGetir()
        {
            List<ListItem> Liste = new List<ListItem>() {
            new ListItem{ Value = "1" , Text = "Ahmet"},
            new ListItem{ Value = "2" , Text = "Mehmet"},
            new ListItem{ Value = "3" , Text = "Ali"},
            new ListItem{ Value = "4" , Text = "Ayşe"},
            new ListItem{ Value = "5" , Text = "Gençay"},
            };

            return Json(Liste, JsonRequestBehavior.AllowGet);
        }

Yukarıdaki kod bloğunu incelersek eğer, “JsonResult” tipinden “OgrencileriGetir” isimli metodumuzda bir öğrenci bilgisini tutan liste mevcut ve metodumuz bu listeyi JSON yapısında döndürmektedir.

Şimdi bu listeyi “Index” isimli Action metodumuzun View katmanından çekeceğiz.

<script type="text/javascript">// <![CDATA[
    $(function () {
        $('#btnOgrencileriGetir').click(function () {
            $.getJSON("/Home/OgrencileriGetir", null, function (data) {
                jQuery.each(data, function (i, eleman) {
                    $("#OgrenciListesi").append(eleman.Value + " " + eleman.Text + "<br>
");
                });
            });
        });
    });
</script>

<input id="btnOgrencileriGetir" type="button" value="Öğrencileri Getir" />
<div id="OgrenciListesi"></div>

Yukarıdaki kod bloğunu incelerseniz eğer, “btnOgrencileriGetir” isimli butona tıklandığı zaman tetiklenecek JavaScript kodunu yazıyoruz.”getJSON” metodu ile JSON verisini alıyoruz.Birinci parametreye JSON döndüren metodumuzu, ikinci parametreye ise bu metoda göndereceğimiz parametreyi yazıyoruz.”function (data)” metodu ile JSON verimiz “data” isimli parametreye yükleniyor.”jQuery.each” metodu C#’ta ki “foreach” döngüsüne benzer niteliktedir ve bu metod sayesinde liste halinde gelen verimizi ayrıştırıp gerekli alana yansıtıyoruz.

Bu işlemin ekran görüntüsü aşağıdaki gibi olacaktır.

Buraya kadar Server’dan JSON formatında nasıl veri alındığını gördük.Şimdide Server’a JSON formatında veri göndermeyi inceleyelim.

Bu örneklendirmeyi bir model üzerinden gerçekleştireceğimiz için öncelike “Ogrenci” isminde bir model tanımlıyorum.

    public class Ogrenci
    {
        public int OgrenciNo { get; set; }
        public string Adi { get; set; }
        public string SoyAdi { get; set; }
    }

Şimdi bu modeli POST edebilecek yapıda bir View sayfası tasarlayalım.(Örnek olarak “Home(Controller).cs” isimli Controller sayfasının “Index” Action metodunun .cshtml uzantılı dosyasında)

<div>@Html.TextBox("OgrenciNo")</div>
<div>@Html.TextBox("Adi")</div>
<div>@Html.TextBox("SoyAdi")</div>
<div><input id="btnGonder" type="submit" value="Ogrenciyi JSON Olarak Gönder" /></div>

Şimdi ise oluşturduğumuz bu formdaki bilgileri Server’a JSON tabanlı POST edecek JQuery kodlarımızı yazalım.

<script type="text/javascript">
    $('#btnGonder').click(function () {
        var Ogrenci = {
            OgrenciNo: $('#OgrenciNo').val(),
            Adi: $('#Adi').val(),
            SoyAdi: $('#SoyAdi').val()
        };
        $.ajax({
            url: '/Home/GelenOgrenci',
            type: 'POST',
            data: JSON.stringify(Ogrenci),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8'
        });
        return false;
    });
</script>

Yukarıdaki kod bloğunu incelersek eğer, “btnGonder” isimli butonumuz tetiklendiği an “Home(Controller).cs” isimli Controller sınıfındaki “GelenOgrenci” isimli metodun çalışacağı bildirilmiştir.”data” parametresi ile JSON formatında oluşturulan “Ogrenci” isimli nesnemiz Server’a gönderilecektir.

Şimdide son olarak “Home(Controller).cs” Controller sınıfımızdaki “GelenOgrenci” metodunu oluşturalım.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GelenOgrenci(Ogrenci ogrenci)
        {
            return View();
        }
    }

Projemizi “GelenOgrenci” metoduna Break – Point koyarak, bu şekilde derleyip çalıştırdığımız zaman aşağıdaki ekran görüntüsüyle karşılaşacağız.

Son olarak dikkat etmemiz gereken bir hususa değinmek gerekirse, JQuery kütüphanesindeki “JSON.stringify()” metodu IE9 ve üzeri browserlarda desteklenmektedir.

Sonraki yazılarımda görüşmek ümidiyle..
Faydalanmanız dileğiyle..
İyi çalışmalar..