<\/div>\n
G\u00fcn\u00fcm\u00fcz web projelerinin en g\u00f6zde \u00f6zelliklerinden biriside kullan\u0131c\u0131ya zaman kazand\u0131rmakt\u0131r.Yani kullan\u0131c\u0131ya Post – Back i\u015fleminden ba\u011f\u0131ms\u0131z bir \u015fekilde hizmet verebilmek olduk\u00e7a \u00f6nemlidir.Biliyorsunuz ki, bunu Ajax gibi Client tabanl\u0131 teknolojilerle ger\u00e7ekle\u015ftirebiliyoruz.Bu yaz\u0131m\u0131z\u0131n i\u00e7eri\u011fini Asp.NET MVC alt yap\u0131l\u0131 bir projede Ajax ile Post i\u015flemi ve JsonResult kullan\u0131m\u0131 olu\u015fturacakt\u0131r.<\/p>\n
\u00d6ncelikle JsonResult Nedir?<\/strong> sorusuna cevap verelim.
\nJsonResult, elimizdeki modeli bize JSON(JavaScript Object Notation)<\/a> veri yap\u0131s\u0131nda geri d\u00f6nd\u00fcrmemizi sa\u011flayan bir tiptir.<\/p>\n
\u015eimdi yaz\u0131m\u0131zda \u00f6rnek senaryo \u00fczerinden gidece\u011fiz.Elimizde bir “Ogrenci” isimli modelimiz olacak.Bu modelle bir \u00f6\u011frenciyi kapa taslak modelleyece\u011fiz.Daha sonra Ajax ile ID de\u011ferine sahip bir \u00f6\u011frenci \u00e7a\u011f\u0131rmay\u0131 ve t\u00fcm \u00f6\u011frenci listesini \u00e7a\u011f\u0131rmay\u0131 inceleyece\u011fiz.<\/p>\n
\r\n    public class Ogrenci\r\n    {\r\n        public int ID { get; set; }\r\n        public int OgrenciNo { get; set; }\r\n        public string Ad { get; set; }\r\n        public string SoyAd { get; set; }\r\n        public string Sube { get; set; }\r\n        public int Sinif { get; set; }\r\n    }\r\n<\/pre>\n\u00d6ncelikle ID de\u011ferine sahip bir \u00f6\u011frenciyi Ajax ile getirece\u011fimizden dolay\u0131 “Index.cshtml” isimli View dosyam\u0131z a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n\r\n<div>\r\n    <input type="text" id="OgrenciID" \/>\r\n    <br \/>\r\n    <input type="submit" id="OgrenciGetir" value="\u00d6\u011frenciyi Getir" \/>\r\n<\/div>\r\n<div>\r\n    <p>\u00d6\u011frenci Ad\u0131 : <strong id="OgrenciAdi"><\/strong><\/p>\r\n    <p>\u00d6\u011frenci Soyad\u0131 : <strong id="OgrenciSoyAdi"><\/strong><\/p>\r\n    <p>\u00d6\u011frenci Numaras\u0131 : <strong id="OgrenciNumarasi"><\/strong><\/p>\r\n    <p>\u00d6\u011frenci \u015eubesi : <strong id="OgrenciSubesi"><\/strong><\/p>\r\n    <p>\u00d6\u011frenci S\u0131n\u0131f\u0131 : <strong id="OgrenciSinifi"><\/strong><\/p>\r\n<\/div>\r\n<\/pre>\n\u015eimdi “OgrenciID” id de\u011ferine sahip inputtan girilen ID de\u011ferini Ajax ile “Home(Controller).cs” isimli Controller s\u0131n\u0131f\u0131m\u0131zdaki “OgrenciyiGetir” isimli Action metoda g\u00f6nderece\u011fiz ve ilgili ID de\u011ferine sahip \u00f6\u011frenciyi JSON olarak geri elde edece\u011fiz.<\/p>\n\r\n---Home(Controller).cs---\r\n        [HttpPost]\r\n        public JsonResult OgrenciyiGetir(int id)\r\n        {\r\n            List<Ogrenci> Ogrenciler = new List<Ogrenci>\r\n            {\r\n                new Ogrenci { ID = 1, Ad = "Gen\u00e7ay", SoyAd = "Y\u0131ld\u0131z", OgrenciNo = 1234, Sinif = 5, Sube = "A" },\r\n                new Ogrenci { ID = 2, Ad = "Mustafa", SoyAd = "Candan", OgrenciNo = 2342, Sinif = 6, Sube = "B" },\r\n                new Ogrenci { ID = 3, Ad = "Necati", SoyAd = "\u015ea\u015fmas", OgrenciNo = 5345, Sinif = 7, Sube = "C" },\r\n                new Ogrenci { ID = 4, Ad = "Ay\u015fe", SoyAd = "K\u00fcnd\u00fcr", OgrenciNo = 5675, Sinif = 8, Sube = "D" },\r\n                new Ogrenci { ID = 5, Ad = "Furkan", SoyAd = "Somun", OgrenciNo = 8974, Sinif = 9, Sube = "E" }\r\n            };\r\n\r\n            Ogrenci ogrenci = Ogrenciler.FirstOrDefault(o => o.ID == id);\r\n            return Json(ogrenci, JsonRequestBehavior.AllowGet);\r\n        }\r\n<\/pre>\nYukar\u0131daki “OgrenciyiGetir” isimli JsonResult tipli geri d\u00f6n\u00fc\u015f de\u011ferine sahip metodumuzu incelerseniz e\u011fer, basit bir \u015fekilde \u00f6\u011frencileri olu\u015fturup manuel veritaban\u0131 haline getirdikten sonra ilgili ID de\u011ferine sahip \u00f6\u011frenciyi se\u00e7ip Json() metoduyla geri g\u00f6nderiyoruz.Json() metodunun ilk parametresi JSON’a \u00e7evrilip geri g\u00f6nderilecek nesnemizi al\u0131rken, ikinci parametresinde JsonRequestBehavior.AllowGet komutunu vererek bu i\u015fleme izin veriyoruz.E\u011fer JsonRequestBehavior.AllowGet komutunu kullanmazsak nesnemiz Json veriformat\u0131na \u00e7evrilemeyecek ve hatayla kar\u015f\u0131la\u015faca\u011f\u0131z.<\/p>\n
\u015eimdi Ajax ile bu metodumuza Post i\u015flemini ger\u00e7ekle\u015ftirelim.<\/p>\n\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#OgrenciGetir").click(function () {\r\n            var ID = $("#OgrenciID").val();\r\n            $.ajax({\r\n                url : '\/Home\/OgrenciyiGetir\/' + ID,\r\n                type:'POST',\r\n                dataType:'json',\r\n                success:function(data){\r\n                    $("#OgrenciAdi").html(data.Ad);\r\n                    $("#OgrenciSoyAdi").html(data.SoyAd);\r\n                    $("#OgrenciNumarasi").html(data.OgrenciNo);\r\n                    $("#OgrenciSubesi").html(data.Sube);\r\n                    $("#OgrenciSinifi").html(data.Sinif);\r\n                }\r\n            });\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki Ajax kod blo\u011funu incelersek e\u011fer,
\nurl ile ajax ile post neticesinde \u00e7al\u0131\u015ft\u0131r\u0131lacak adresi belirtiyoruz,
\ntype ile Post i\u015flemi yap\u0131laca\u011f\u0131n\u0131 belirtiyoruz,
\ndataType ile Json veri format\u0131nda \u00e7al\u0131\u015faca\u011f\u0131m\u0131z\u0131 belirtiyoruz,
\nsuccess ile de post i\u015flemi neticesinde geriye bir de\u011fer d\u00f6n\u00fcyorsa e\u011fer bu de\u011fer \u00fczerinde i\u015flemler yapabiliyoruz.Tan\u0131mlanan fonksiyondaki data isimli parametre bu de\u011feri temsil etmektedir.Burada dikkat etmeniz gereken husus, data parametresi modelimizdeki propertylerin birebir benzerini ta\u015f\u0131maktad\u0131r.<\/p>\n
<\/p>\n<\/a>Firebug’da ki Json veriyap\u0131s\u0131n\u0131n g\u00f6r\u00fcnt\u00fcs\u00fc.<\/p><\/div>\n
E\u011fer Ajax i\u015flemleri neticesinde hata al\u0131rsan\u0131z error blo\u011funu JavaScript kodlar\u0131na a\u015fa\u011f\u0131daki gibi yerle\u015ftirmeniz yeterlidir.<\/p>\n\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#OgrenciGetir").click(function () {\r\n            var ID = $("#OgrenciID").val();\r\n            $.ajax({\r\n                url : '\/Home\/OgrenciyiGetir\/' + ID,\r\n                type:'POST',\r\n                dataType:'json',\r\n                success:function(data){\r\n                    $("#OgrenciAdi").html(data.Ad);\r\n                    $("#OgrenciSoyAdi").html(data.SoyAd);\r\n                    $("#OgrenciNumarasi").html(data.OgrenciNo);\r\n                    $("#OgrenciSubesi").html(data.Sube);\r\n                    $("#OgrenciSinifi").html(data.Sinif);\r\n                },\r\n                error: function (hata, ajaxOptions, thrownError) {\r\n                    alert(hata.status);\r\n                    alert(thrownError);\r\n                    alert(hata.responseText);\r\n                }\r\n            });\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nEvet, \u015fimdide Ajax ile \u00f6\u011frenci listemizin hepsini talep edelim ve Json veri format\u0131nda bunlar\u0131 listeletelim.<\/p>\n
Bu i\u015flem i\u00e7in \u00f6ncelikle “Index.cshtml” sayfam\u0131z\u0131 yenileyelim.<\/p>\n\r\n<div>\r\n    <input type="submit" id="TumOgrencileriGetir" value="T\u00fcm \u00d6\u011frencileri Getir" \/>\r\n    <div id="TumOgrenciler"><\/div>\r\n<\/div>\r\n<\/pre>\n\u015eimdide “Home(Controller).cs” isimli Controller s\u0131n\u0131f\u0131m\u0131zda “TumOgrencileriGetir” isimli metodumuzu olu\u015ftural\u0131m.<\/p>\n\r\n        [HttpPost]\r\n        public JsonResult TumOgrencileriGetir()\r\n        {\r\n            List<Ogrenci> Ogrenciler = new List<Ogrenci>\r\n            {\r\n                new Ogrenci { ID = 1, Ad = "Gen\u00e7ay", SoyAd = "Y\u0131ld\u0131z", OgrenciNo = 1234, Sinif = 5, Sube = "A" },\r\n                new Ogrenci { ID = 2, Ad = "Mustafa", SoyAd = "Candan", OgrenciNo = 2342, Sinif = 6, Sube = "B" },\r\n                new Ogrenci { ID = 3, Ad = "Necati", SoyAd = "\u015ea\u015fmas", OgrenciNo = 5345, Sinif = 7, Sube = "C" },\r\n                new Ogrenci { ID = 4, Ad = "Ay\u015fe", SoyAd = "K\u00fcnd\u00fcr", OgrenciNo = 5675, Sinif = 8, Sube = "D" },\r\n                new Ogrenci { ID = 5, Ad = "Furkan", SoyAd = "Somun", OgrenciNo = 8974, Sinif = 9, Sube = "E" }\r\n            };\r\n            return Json(Ogrenciler, JsonRequestBehavior.AllowGet);\r\n        }\r\n<\/pre>\nEvet, \u015fimdi Ajax komutlar\u0131m\u0131z\u0131 yazal\u0131m.<\/p>\n\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#TumOgrencileriGetir").click(function () {\r\n            $.ajax({\r\n                url: '\/Home\/TumOgrencileriGetir',\r\n                type: 'POST',\r\n                dataType: 'json',\r\n                success: function (data) {\r\n                    $.each(data, function (i, item) {\r\n                        $("#TumOgrenciler").append(\r\n                            "<div style='border-style:ridge;'>\u00d6\u011frenci Ad\u0131 : <strong>" + item.Ad + "<\/strong><br>" +\r\n                            "\u00d6\u011frenci Soyad\u0131 : <strong>" + item.SoyAd + "<\/strong><br>" +\r\n                            "\u00d6\u011frenci \u015eubesi : <strong>" + item.Sube + "<\/strong><br>" +\r\n                            "\u00d6\u011frenci S\u0131n\u0131f\u0131 : <strong>" + item.Sinif + "<\/strong><br>" +\r\n                            "\u00d6\u011frenci Numaras\u0131 : <strong>" + item.OgrenciNo + "<\/strong><\/div>"\r\n                            );\r\n                    });\r\n                }\r\n            });\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer sadece success yap\u0131s\u0131 de\u011fi\u015ftirilmi\u015ftir.Bu sefer JSON ile gelen veri yap\u0131m\u0131z bir liste oldu\u011fu i\u00e7in each fonksiyonuyla d\u00f6nerek gerekli alana listelettirme yapt\u0131k.<\/p>\n<\/a>Firebug’da ki Json veriyap\u0131s\u0131n\u0131n g\u00f6r\u00fcnt\u00fcs\u00fc.<\/p><\/div>\n<\/a><\/p>\n
Asp.NET MVC ile JsonResult kullan\u0131m\u0131 ve genel anlamda Ajax ile Post i\u015flemi bu \u015fekilde ger\u00e7ekle\u015ftirilmektedir.\u0130\u015fin en lezzetli boyutu Json veri yap\u0131s\u0131n\u0131 kullanmakt\u0131r.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
G\u00fcn\u00fcm\u00fcz web projelerinin en g\u00f6zde \u00f6zelliklerinden biriside kullan\u0131c\u0131ya zaman kazand\u0131rmakt\u0131r.Yani kullan\u0131c\u0131ya Post – Back i\u015fleminden ba\u011f\u0131ms\u0131z bir \u015fekilde hizmet verebilmek olduk\u00e7a \u00f6nemlidir.Biliyorsunuz ki, bunu Ajax gibi Client tabanl\u0131 teknolojilerle ger\u00e7ekle\u015ftirebiliyoruz.Bu yaz\u0131m\u0131z\u0131n i\u00e7eri\u011fini Asp.NET MVC...<\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11,600,18,19,780],"tags":[744,746,742,743,530,741,283],"class_list":["post-3203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-asp-net-mvc","category-asp-net-mvc-5","category-javascript","category-jquery","category-json","tag-ajax","tag-asp-net-mvc","tag-asp-net-mvc-ile-ajax-post","tag-javascript-object-notation","tag-json","tag-jsonresult","tag-mvc"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3203"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3203\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}