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.
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 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…
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.
Sadece ilgili uygulama için geçerli. İlgili alanda post edildiği zaman tetiklenecek actiondır.
Veri tabanından çekip de nasıl gösterirsin peki?
Fikir vermesi açısından gayet faydalı oldu. Biraz değiştirip farklı bir şekilde kullandım. Teşekkürler..
Aynı zamanda fotoğraf göndermek istiyorum nasıl yapabilirim
Merhaba,
Aşağıdaki makale adresinden istediğiniz teknik bilgiye erişebilirsiniz.
https://www.gencayyildiz.com/blog/asp-net-mvcde-ajax-ile-dosya-yukleme/
Sevgiler…
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
Elinize sağlık ben veriyi ger döndürürken
return Json(Ogrenciler);
bu şekilde döndüre bildim
Merhabalar hocam hep aynı değerleri basıyor çözüm nedir
Merhaba,
Yaptığın hatayı düzeltmek.
Belki ne yaptığına dair bilgi verebilirsen daha teknik boyutta önerilerde bulunabilirim.
Asp.net core 2.2 ‘de jquery’den success sonuç dönüyor fakat data.Ad ya da başka bir Ogrenci property’sine ulaşılamıyor.
Core’da başka bir işlem mi uygulamak gerek.
Bahsettiğiniz durum jQuery ile ilgilidir. Core ile ilgili olacağını sanmıyorum.
Güzel yazı
Peki dinamik bir table a nasıl aktarabilirim bu veriyi. Jquery den json dçnüyor fakat dinamik bir şekilde html table a verileri yazamıyoruz. Bu konuda az da olsa yardımcı olabilecek bir kod örneği verebilirseniz çok memnun olurum.
Verileri json formatında elde edebiliyorsanız yapmanız gereken client tabanlı bir çalışmayla verileri ilgili alana basmaktır. Bunun için bir JavaScript’te ki basit for döngüsünü yahut jQuery’de ki each iterasyonel fonksiyonunu tercih edebilirsiniz.
.NET Core’da JsonRequestBehavior.AllowGet tanınmıyor. Evet o olmadan da kod hata vermiyor ama fieldlar
Öğrenci Adı : undefined
Öğrenci Soyadı : undefined
Öğrenci Şubesi : undefined
Öğrenci Sınıfı : undefined
Öğrenci Numarası : undefined
gibi dönüyor. Bu konu hakkında bir fikriniz var mıdır?
Geliştirdiğiniz kod bloğunu paylaşır mısınız?
JsonRequestBehavior.AllowGet yazmanıza gerek yok (sanırım .Net sürümüyle alakalı)
Field’ların baş harfini küçük yazın bende o şekilde düzeldi.
$.each(data, function (i, item) {
debugger;
$(“#TumOgrenciler”).append(
“Öğrenci Adı : ” + item.ad + “” +
“Öğrenci Soyadı : ” + item.soyAd + “” +
“Öğrenci Şubesi : ” + item.sube + “” +
“Öğrenci Sınıfı : ” + item.sinif + “” +
“Öğrenci Numarası : ” + item.ogrenciNo + “”
);
});
Biraz geç oldu ama belki başka takılan arkadaşlar olabilir.
kral ingilizcede İ DEGİL ‘I’ belki o yüzdendir jqueste çevirmeden nasıl hata almadın onu anlamadım ama ?
Hocam Merhaba,
Paylaşımlarınız için teşekkürler.
Ajax kısmı Bende hiç bir şekilde çalışmıyor.
Controller Kısmı :
View Kısmı :
Sorun ne olabilir Hocam ?
Merhaba,
Aldığın bir hata mesajı var mı?
Hayır bir hata mesajı almıyorum.
F12 + Console’a göz attınız mı?
consol ekranında baktım hocam $(document).ready(function () { ==> burada $ is not defined hatası veriyor. $ yerine Jquery yazdım olmadı , “” ekledim maalesef buda olmadı .
Jquery kütüphanesini sayfaya dahil ettiniz mi?
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Merhabalar Gençay Hocam,
Şu anda bir Asp.net Mvc projesi üzerinde çalışmaktayım. Ajax Post işlemini ilk defa yaptım. Localde bir sıkıntı yok. Post işlemini yapıyor. Kendi makinamda kurduğum bir sanal makinadaki sunucuda da gayet güzel çalışıyor. Ancak gerçek bir sunucuda Post işlemini yapmıyor. Konsolda baktığımda jquery-3.5.1.min.js dosyasında Bad Request 400 hatası veriyor. Herhangi bir sunucuda çalışan post işlemi neden başka bir sunucuda çalışmaz?
Hmm… Cors politikalarından dolayı olabilir mi?
Merhaba hocam peki bu gonderdiğimiz modeli View tarafında başka bir modelle yakalayamaz mıyız ve alanlara o değerleri bastıramaz mıyız ?
Merhaba,
Ajax tabanlı çalışmalarda gönderilen değeri istediğiniz model ile karşılayabilirsiniz. Lakin bunun için manuel bir parse işlemi yapmanız gerekmektedir.
hocam selamlar,
aynı içerikleriniz projemde paylaşmama rağmen ‘undefined’ olarak geliyor. Yukarıda ki arkadaşın belirtmiş olduğu gibi JsonRequestBehavior görünmüyor. Ajax ile ilgili yeni olduğum için tamamen sizin kodlarınız ile yaptım, ancak ‘undefined’ olarak geliyor. Çözümü hakkında yardımcı olabilir misiniz?
Gençay hocam içerik için teşekkürler.
Acaba ajax ile ön yüzden aldığımız ID değerini farklı bir contoller’a nasıl yönlendirebiliriz.
Örneğin RedirectToAction(“Index”,”Home”,ID) şeklinde yaptığımda ID değeri her seferinde 0 olarak geliyor. Bilen Arkadaşlar da cevaplayabilir iyi günler