Asp.NET MVC – Ajax İle Post İşlemleri ve JsonResult Kullanımı

Günümüz web projelerinin en gözde özelliklerinden biriside kullanıcıya zaman kazandırmaktır.Yani kullanıcıya Post – Back işleminden bağımsız bir şekilde hizmet verebilmek oldukça önemlidir.Biliyorsunuz ki, bunu Ajax gibi Client tabanlı teknolojilerle gerçekleştirebiliyoruz.Bu yazımızın içeriğini Asp.NET MVC alt yapılı bir projede Ajax ile Post işlemi ve JsonResult kullanımı oluşturacaktır.

Öncelikle JsonResult Nedir? sorusuna cevap verelim.
JsonResult, elimizdeki modeli bize JSON(JavaScript Object Notation) veri yapısında geri döndürmemizi sağlayan bir tiptir.

Şimdi yazımızda örnek senaryo üzerinden gideceğiz.Elimizde bir “Ogrenci” isimli modelimiz olacak.Bu modelle bir öğrenciyi kapa taslak modelleyeceğiz.Daha sonra Ajax ile ID değerine sahip bir öğrenci çağırmayı ve tüm öğrenci listesini çağırmayı inceleyeceğiz.

    public class Ogrenci
    {
        public int ID { get; set; }
        public int OgrenciNo { get; set; }
        public string Ad { get; set; }
        public string SoyAd { get; set; }
        public string Sube { get; set; }
        public int Sinif { get; set; }
    }

Öncelikle ID değerine sahip bir öğrenciyi Ajax ile getireceğimizden dolayı “Index.cshtml” isimli View dosyamız aşağıdaki gibi olacaktır.

<div>
    <input type="text" id="OgrenciID" />
    <br />
    <input type="submit" id="OgrenciGetir" value="Öğrenciyi Getir" />
</div>
<div>
    <p>Öğrenci Adı : <strong id="OgrenciAdi"></strong></p>
    <p>Öğrenci Soyadı : <strong id="OgrenciSoyAdi"></strong></p>
    <p>Öğrenci Numarası : <strong id="OgrenciNumarasi"></strong></p>
    <p>Öğrenci Şubesi : <strong id="OgrenciSubesi"></strong></p>
    <p>Öğrenci Sınıfı : <strong id="OgrenciSinifi"></strong></p>
</div>

Şimdi “OgrenciID” id değerine sahip inputtan girilen ID değerini Ajax ile “Home(Controller).cs” isimli Controller sınıfımızdaki “OgrenciyiGetir” isimli Action metoda göndereceğiz ve ilgili ID değerine sahip öğrenciyi JSON olarak geri elde edeceğiz.

---Home(Controller).cs---
        [HttpPost]
        public JsonResult OgrenciyiGetir(int id)
        {
            List<Ogrenci> Ogrenciler = new List<Ogrenci>
            {
                new Ogrenci { ID = 1, Ad = "Gençay", SoyAd = "Yıldız", OgrenciNo = 1234, Sinif = 5, Sube = "A" },
                new Ogrenci { ID = 2, Ad = "Mustafa", SoyAd = "Candan", OgrenciNo = 2342, Sinif = 6, Sube = "B" },
                new Ogrenci { ID = 3, Ad = "Necati", SoyAd = "Şaşmas", OgrenciNo = 5345, Sinif = 7, Sube = "C" },
                new Ogrenci { ID = 4, Ad = "Ayşe", SoyAd = "Kündür", OgrenciNo = 5675, Sinif = 8, Sube = "D" },
                new Ogrenci { ID = 5, Ad = "Furkan", SoyAd = "Somun", OgrenciNo = 8974, Sinif = 9, Sube = "E" }
            };

            Ogrenci ogrenci = Ogrenciler.FirstOrDefault(o => o.ID == id);
            return Json(ogrenci, JsonRequestBehavior.AllowGet);
        }

Yukarıdaki “OgrenciyiGetir” isimli JsonResult tipli geri dönüş değerine sahip metodumuzu incelerseniz eğer, basit bir şekilde öğrencileri oluşturup manuel veritabanı haline getirdikten sonra ilgili ID değerine sahip öğrenciyi seçip Json() metoduyla geri gönderiyoruz.Json() metodunun ilk parametresi JSON’a çevrilip geri gönderilecek nesnemizi alırken, ikinci parametresinde JsonRequestBehavior.AllowGet komutunu vererek bu işleme izin veriyoruz.Eğer JsonRequestBehavior.AllowGet komutunu kullanmazsak nesnemiz Json veriformatına çevrilemeyecek ve hatayla karşılaşacağız.

Şimdi Ajax ile bu metodumuza Post işlemini gerçekleştirelim.

<script type="text/javascript">
    $(document).ready(function () {
        $("#OgrenciGetir").click(function () {
            var ID = $("#OgrenciID").val();
            $.ajax({
                url : '/Home/OgrenciyiGetir/' + ID,
                type:'POST',
                dataType:'json',
                success:function(data){
                    $("#OgrenciAdi").html(data.Ad);
                    $("#OgrenciSoyAdi").html(data.SoyAd);
                    $("#OgrenciNumarasi").html(data.OgrenciNo);
                    $("#OgrenciSubesi").html(data.Sube);
                    $("#OgrenciSinifi").html(data.Sinif);
                }
            });
        });
    });
</script>

Yukarıdaki Ajax kod bloğunu incelersek eğer,
url ile ajax ile post neticesinde çalıştırılacak adresi belirtiyoruz,
type ile Post işlemi yapılacağını belirtiyoruz,
dataType ile Json veri formatında çalışacağımızı belirtiyoruz,
success ile de post işlemi neticesinde geriye bir değer dönüyorsa eğer bu değer üzerinde işlemler yapabiliyoruz.Tanımlanan fonksiyondaki data isimli parametre bu değeri temsil etmektedir.Burada dikkat etmeniz gereken husus, data parametresi modelimizdeki propertylerin birebir benzerini taşımaktadır.

Asp.NET MVC - Ajax İle Post İşlemleri ve JsonResult Kullanımı

Asp.NET MVC - Ajax İle Post İşlemleri ve JsonResult Kullanımı - 2

Firebug’da ki Json veriyapısının görüntüsü.

Eğer Ajax işlemleri neticesinde hata alırsanız error bloğunu JavaScript kodlarına aşağıdaki gibi yerleştirmeniz yeterlidir.

<script type="text/javascript">
    $(document).ready(function () {
        $("#OgrenciGetir").click(function () {
            var ID = $("#OgrenciID").val();
            $.ajax({
                url : '/Home/OgrenciyiGetir/' + ID,
                type:'POST',
                dataType:'json',
                success:function(data){
                    $("#OgrenciAdi").html(data.Ad);
                    $("#OgrenciSoyAdi").html(data.SoyAd);
                    $("#OgrenciNumarasi").html(data.OgrenciNo);
                    $("#OgrenciSubesi").html(data.Sube);
                    $("#OgrenciSinifi").html(data.Sinif);
                },
                error: function (hata, ajaxOptions, thrownError) {
                    alert(hata.status);
                    alert(thrownError);
                    alert(hata.responseText);
                }
            });
        });
    });
</script>

Evet, şimdide Ajax ile öğrenci listemizin hepsini talep edelim ve Json veri formatında bunları listeletelim.

Bu işlem için öncelikle “Index.cshtml” sayfamızı yenileyelim.

<div>
    <input type="submit" id="TumOgrencileriGetir" value="Tüm Öğrencileri Getir" />
    <div id="TumOgrenciler"></div>
</div>

Şimdide “Home(Controller).cs” isimli Controller sınıfımızda “TumOgrencileriGetir” isimli metodumuzu oluşturalım.

        [HttpPost]
        public JsonResult TumOgrencileriGetir()
        {
            List<Ogrenci> Ogrenciler = new List<Ogrenci>
            {
                new Ogrenci { ID = 1, Ad = "Gençay", SoyAd = "Yıldız", OgrenciNo = 1234, Sinif = 5, Sube = "A" },
                new Ogrenci { ID = 2, Ad = "Mustafa", SoyAd = "Candan", OgrenciNo = 2342, Sinif = 6, Sube = "B" },
                new Ogrenci { ID = 3, Ad = "Necati", SoyAd = "Şaşmas", OgrenciNo = 5345, Sinif = 7, Sube = "C" },
                new Ogrenci { ID = 4, Ad = "Ayşe", SoyAd = "Kündür", OgrenciNo = 5675, Sinif = 8, Sube = "D" },
                new Ogrenci { ID = 5, Ad = "Furkan", SoyAd = "Somun", OgrenciNo = 8974, Sinif = 9, Sube = "E" }
            };
            return Json(Ogrenciler, JsonRequestBehavior.AllowGet);
        }

Evet, şimdi Ajax komutlarımızı yazalım.

<script type="text/javascript">
    $(document).ready(function () {
        $("#TumOgrencileriGetir").click(function () {
            $.ajax({
                url: '/Home/TumOgrencileriGetir',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (i, item) {
                        $("#TumOgrenciler").append(
                            "<div style='border-style:ridge;'>Öğrenci Adı : <strong>" + item.Ad + "</strong><br>" +
                            "Öğrenci Soyadı : <strong>" + item.SoyAd + "</strong><br>" +
                            "Öğrenci Şubesi : <strong>" + item.Sube + "</strong><br>" +
                            "Öğrenci Sınıfı : <strong>" + item.Sinif + "</strong><br>" +
                            "Öğrenci Numarası : <strong>" + item.OgrenciNo + "</strong></div>"
                            );
                    });
                }
            });
        });
    });
</script>

Yukarıdaki kod bloğunu incelerseniz eğer sadece success yapısı değiştirilmiştir.Bu sefer JSON ile gelen veri yapımız bir liste olduğu için each fonksiyonuyla dönerek gerekli alana listelettirme yaptık.

Asp.NET MVC - Ajax İle Post İşlemleri ve JsonResult Kullanımı - 4

Firebug’da ki Json veriyapısının görüntüsü.

Asp.NET MVC - Ajax İle Post İşlemleri ve JsonResult Kullanımı - 3

Asp.NET MVC ile JsonResult kullanımı ve genel anlamda Ajax ile Post işlemi bu şekilde gerçekleştirilmektedir.İşin en lezzetli boyutu Json veri yapısını kullanmaktır.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

8 Cevaplar

  1. ahmet dedi ki:

    Hocam anlatım için teşekkürler ama anlayamadığım bir durum var.
    Ajax ile Home/TumOgrencileriGetir actionuna post gönderiyorsunuz bu herkese mi açık yoksa sadece bizim uygulama için mi geçerli yani her gelen posta açıksa o zaman biri küçük bir uygulama ile veritabanımıza onlarca veriyi post edebilir veya get ile veri çekmişsek aynı mantıkla istemediğimiz halde kendi sitesine verileri çekebilir bunun için bir çözüm yok mudur.

  2. Ahmet dedi ki:

    Veri tabanından çekip de nasıl gösterirsin peki?

  3. Alper dedi ki:

    Fikir vermesi açısından gayet faydalı oldu. Biraz değiştirip farklı bir şekilde kullandım. Teşekkürler..

  4. brkn dedi ki:

    Aynı zamanda fotoğraf göndermek istiyorum nasıl yapabilirim

  5. borahan arslan dedi ki:

    Selam hocam,
    Dönen datayı html yerine sayfadaki modele doldurup nasıl gösterebiliriz. Bu çokmu karışık bununla ilgili bir makale bulamadım herkes html dataya basıyor. Anlayamadım bunu

  6. Ali dedi ki:

    Elinize sağlık ben veriyi ger döndürürken
    return Json(Ogrenciler);
    bu şekilde döndüre bildim

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.