Veysel Uğur KIZMAZ

Asp.Net MVC projelerinde Action metodlarından verileri Json formatında dönüştürme işleminin nasıl yapıldığını öğrenelim.

Bu işlemi bir örnek üzerinde inceleyelim. Örnek uygulamamızda bir ürün listesi oluşturalım ve bu ürün listesini Action metodundan Json formatında döndürelim.

Asp.Net MVC projemizde ürün bilgilerini bir class üzerinde tanımlayacağız. Ürünün Id, Ad, Fiyat ve Adet (stok miktarı) bilgilerinin bulunduğu Urun sınıfını oluşturalım.

public class Urun
{
    public int Id { get; set; }
    public string Ad { get; set; }
    public double Fiyat { get; set; }
    public int Adet { get; set; }
}

Şimdi HomeController içinde Urunler isimli action metodunu oluşturalım. Json verisi döndüreceğimiz için geri dönüş tipi JsonResult olacaktır.

[HttpPost]
public JsonResult Urunler()
{
    var urunler = new List<Urun>
    {
        new Urun{ Id = 1, Ad = "Masaüstü Bilgisayar", Fiyat = 1200, Adet = 20},
        new Urun{ Id = 2, Ad = "Laptop", Fiyat = 2000, Adet = 40},
        new Urun{ Id = 3, Ad = "Tablet", Fiyat = 800, Adet = 65},
        new Urun{ Id = 4, Ad = "SmartPhone", Fiyat = 1450, Adet = 230},
        new Urun{ Id = 5, Ad = "LCD TV", Fiyat = 1100, Adet = 55},
        new Urun{ Id = 6, Ad = "LED TV", Fiyat = 2200, Adet = 90},
        new Urun{ Id = 7, Ad = "Flat TV", Fiyat = 700, Adet = 30}
    };
    return Json(urunler);
}

Geri dönüş değerinde urunler listesini Json metodu ile Json formatına dönüştürüp döndürüyoruz.

HomeController içine metodu test etmek çiin Index isminde bir Action oluşturalım.

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

Index Action’ının View’ını ekleyelim: Home > Index.cshtml .

Şimdi index sayfasına ekleyeceğimiz butona tıklandığında Jquery ile Home/Urunler actionındaki verileri alalım.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#buton').click(function () {
            $.ajax({
                type: "POST",
                url: "Home/Urunler",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg);
                }
            })
            return false;
        });
    });
</script>
<input type="button" value="Tıkla" id="buton" />

Projeyi çalıştırıp Home > Index actionına gelelim. Tarayıcının developer tool’unda alert(msg) satırına breakpoint koyalım ve butona tıklayalım.

Verilerin Json formatında geldiğini göreceksiniz.

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com