﻿
{"id":1753,"date":"2013-06-20T00:10:53","date_gmt":"2013-06-20T00:10:53","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=1753"},"modified":"2015-09-09T22:26:21","modified_gmt":"2015-09-09T22:26:21","slug":"asp-net-mvcde-jquery-ile-ic-ice-bagimli-dropdownlistcascading-dropdownlist","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvcde-jquery-ile-ic-ice-bagimli-dropdownlistcascading-dropdownlist\/","title":{"rendered":"Asp.NET MVC&#8217;de JQuery \u0130le \u0130\u00e7 \u0130\u00e7e Ba\u011f\u0131ml\u0131 DropDownList(Cascading DropDownList)"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>\u0130nternet kullan\u0131c\u0131lar\u0131 olarak bir foruma ya da sisteme kay\u0131t olurken genellikle kay\u0131t formlar\u0131nda DropDownList nesnesi sayesinde bulundu\u011fumuz \u015fehri se\u00e7ip ard\u0131nda ilgili \u015fehirle alakal\u0131 il\u00e7elerin di\u011fer DropDownList nesnesinde listelendi\u011fini g\u00f6r\u00fcr\u00fcz.Bu i\u015flem Asp.NET Web Form platformunda UpdatePanel yard\u0131m\u0131yla \u00e7ok kolay bir \u015fekilde yap\u0131labilir.Ama mevzu Asp.NET MVC mimarisine gelince JQuery deste\u011fi almam\u0131z gerekmektedir.Tabi Post i\u015flemi olmaks\u0131z\u0131n ko\u015fullardan bahsediyorum.Bu makalemizde Asp.NET MVC mimarisinde JQuery ile i\u00e7 i\u00e7e ba\u011f\u0131ml\u0131 DropDownList yani Cascading DropDownList mant\u0131\u011f\u0131n\u0131 ve yap\u0131m\u0131n\u0131 irdeleyim.<br \/>\n<!--more--><br \/>\n\u00d6ncelikle yukar\u0131daki a\u00e7\u0131klamadan bir \u015fey anlamayanlar i\u00e7in a\u015fa\u011f\u0131da ufak bir anlat\u0131m daha yapmay\u0131 \u00f6ng\u00f6r\u00fcyorum.<br \/>\nMesela &#8220;A&#8221;,&#8221;B&#8221;,&#8221;C&#8221; ve &#8220;D&#8221; olmak \u00fczere d\u00f6rt ana kategorimiz olsun ve bu d\u00f6rt ana kategorimize iki\u015fer tane alt kategori olu\u015ftural\u0131m.<\/p>\n<div align=\"center\">\n<table style=\"width: 50%;\">\n<tbody>\n<tr>\n<th>A<\/th>\n<th>B<\/th>\n<th>C<\/th>\n<th>D<\/th>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">e<\/td>\n<td style=\"text-align: center;\">f<\/td>\n<td style=\"text-align: center;\">g<\/td>\n<td style=\"text-align: center;\">\u011f<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">h<\/td>\n<td style=\"text-align: center;\">\u0131<\/td>\n<td style=\"text-align: center;\">i<\/td>\n<td style=\"text-align: center;\">o<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>\u015eimdi ana kategorilerimizi g\u00f6sterecek DropDownList nesnemizde sadece &#8220;A&#8221;,&#8221;B&#8221;,&#8221;C&#8221; ve &#8220;D&#8221; kategorileri mevcut olacakt\u0131r.E\u011fer ben bu DropDownList nesnemizden &#8220;B&#8221; kategorisini se\u00e7ersem, alt kategorileri listeleyek olan DropDownList nesnemizde sayfa Post olmadan JQuery sayesinde &#8220;f&#8221; ve &#8220;\u0131&#8221; kategorileri listelenecektir.<\/p>\n<p>Mant\u0131k bu \ud83d\ude42<\/p>\n<p>\u015eimdi gelelim ger\u00e7ek bir proje \u00fczerinde bu i\u015flemin nas\u0131l yap\u0131laca\u011f\u0131na.<br \/>\n\u00d6ncelikle bo\u015f bir MVC projesinde, Model katman\u0131nda &#8220;Kategori.cs&#8221; ve &#8220;AltKategori.cs&#8221; isminde iki s\u0131n\u0131f olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki gibi i\u00e7lerini doldural\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    public class Kategori\r\n    {\r\n        public int ID { get; set; }\r\n        public string KategoriAdi { get; set; }\r\n    }\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    public class AltKategori\r\n    {\r\n        public int ID { get; set; }\r\n        public int UstKategoriID { get; set; }\r\n        public string KategoriAdi { get; set; }\r\n    }\r\n<\/pre>\n<p>Controller katman\u0131m\u0131zda, &#8220;Kategori(Controller).cs&#8221; ad\u0131nda bir Controller s\u0131n\u0131f\u0131 olu\u015ftural\u0131m ve &#8220;Index&#8221; isimli ActionResult tipinden olan metodumuzu a\u015fa\u011f\u0131daki gibi doldural\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    public class KategoriController : Controller\r\n    {\r\n        public ActionResult Index()\r\n        {\r\n            Kategori Kategori1 = new Kategori { ID = 1, KategoriAdi = &quot;A&quot; };\r\n            Kategori Kategori2 = new Kategori { ID = 2, KategoriAdi = &quot;B&quot; };\r\n            Kategori Kategori3 = new Kategori { ID = 3, KategoriAdi = &quot;C&quot; };\r\n            Kategori Kategori4 = new Kategori { ID = 4, KategoriAdi = &quot;D&quot; };\r\n\r\n            List&lt;Kategori&gt; Kategoriler = new List&lt;Kategori&gt; { Kategori1, Kategori2, Kategori3, Kategori4 };\r\n\r\n            ViewBag.KategoriListesi = new SelectList(Kategoriler, &quot;ID&quot;, &quot;KategoriAdi&quot;);\r\n            return View();\r\n        }\r\n    }\r\n<\/pre>\n<p>\u015eimdi bu Index Action metodumuzun View katman\u0131ndaki g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki gibi kodlayal\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n    $(document).ready(function () {\r\n        \/\/ Kategori se\u00e7ildi\u011finde bu fonksiyonumuz \u00e7al\u0131\u015fmaya ba\u015flayacakt\u0131r.\r\n        $('#UstKategoriler').change(function () {\r\n            \/\/ Se\u00e7ilen Kategorinin ID sini al\u0131yoruz.\r\n            var KategoriID = $(this).val();\r\n            \/*Se\u00e7ilen KategoriID sini kullanarak\r\n            Kategori(Controller) s\u0131n\u0131f\u0131 i\u00e7erisindeki AltKategorileriGetir\r\n            Action metodunu \u00e7a\u011f\u0131r\u0131yoruz.\r\n            Bu metoddan d\u00f6nen liste sayesinde .each fonksiyonu ile \r\n            AltKategori isimli DropDownList nesnesini dolduruyoruz.*\/\r\n            if (KategoriID != null &amp;&amp; KategoriID != '') {\r\n                $.ajax({\r\n                    type: &quot;post&quot;,\r\n                    url: '@Url.Action(&quot;AltKategorileriGetir&quot;, &quot;Kategori&quot;)',\r\n                    data: { KategoriID: KategoriID },\r\n                    success: function (altkategoriler) {\r\n                        $.each(altkategoriler, function (index, kategori) {\r\n                            $('#AltKategoriler').append($('&lt;option\/&gt;', {\r\n                                value: kategori.ID,\r\n                                text: kategori.KategoriAdi\r\n                            }));\r\n                        });\r\n                    },\r\n                    error: function () {\r\n                        \/*Bu metod ile Ajax i\u015flemi ba\u015far\u0131s\u0131z\r\n                        olursa e\u011fer hata mesaj\u0131 verebiliyoruz.*\/\r\n                        alert(&quot;Hata&quot;);\r\n                    },\r\n                    beforeSend: function () {\r\n                        \/*Burada ise Form Post edilmeden \u00f6nce\r\n                        i\u015flemler yap\u0131labilir.\u00d6rnek olarak Loading, y\u00fckleniyor vs..*\/\r\n                    },\r\n                    complete: function () {\r\n                        \/*Burada ise Form Post edildikten sonra\r\n                        i\u015flemler yap\u0131labilir.\u00d6rnek olarak y\u00fckleme tamamland\u0131 vs..*\/\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    });\r\n&lt;\/script&gt;\r\n@Html.DropDownList(&quot;UstKategoriler&quot;, ViewBag.KategoriListesi as SelectList, &quot;---Kategori Se\u00e7iniz---&quot;)\r\n@Html.DropDownList(&quot;AltKategoriler&quot;, Enumerable.Empty&lt;SelectListItem&gt;(), &quot;---Alt Kategori Se\u00e7iniz---&quot;)\r\n<\/pre>\n<p><span style=\"color: #c0c0c0; font-size: x-small;\"><em>Dipnot !!! <strong>jquery-1.7.1.js<\/strong> k\u00fct\u00fcphanesini Layout ya da View sayfan\u0131za eklemeniz gerekmektedir.<\/em><\/span><\/p>\n<p>Yukar\u0131daki &#8220;Index.cshtml&#8221; sayfas\u0131ndaki JavaScript kodlar\u0131n\u0131 iyi inceleyiniz.\u015eimdi buna g\u00f6re &#8220;Kategori(Controller).cs&#8221; s\u0131n\u0131f\u0131m\u0131zda i\u015flemler yapaca\u011f\u0131z.Kodlar aras\u0131na bakarsan\u0131z e\u011fer yorum sat\u0131r\u0131nda &#8220;AltKategorileriGetir&#8221; isimli bir metod dan bahsetmi\u015fim.\u015eimdi bu metod isminde &#8220;Kategori(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131zda bir Action metod olu\u015fturaca\u011f\u0131z.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        public ActionResult AltKategorileriGetir(int KategoriID)\r\n        {\r\n            AltKategori Kategori1 = new AltKategori { ID = 1, KategoriAdi = &quot;e&quot;, UstKategoriID = 1 };\r\n            AltKategori Kategori2 = new AltKategori { ID = 2, KategoriAdi = &quot;f&quot;, UstKategoriID = 1 };\r\n            AltKategori Kategori3 = new AltKategori { ID = 3, KategoriAdi = &quot;g&quot;, UstKategoriID = 2 };\r\n            AltKategori Kategori4 = new AltKategori { ID = 4, KategoriAdi = &quot;\u011f&quot;, UstKategoriID = 2 };\r\n            AltKategori Kategori5 = new AltKategori { ID = 5, KategoriAdi = &quot;h&quot;, UstKategoriID = 3 };\r\n            AltKategori Kategori6 = new AltKategori { ID = 6, KategoriAdi = &quot;\u0131&quot;, UstKategoriID = 3 };\r\n            AltKategori Kategori7 = new AltKategori { ID = 7, KategoriAdi = &quot;i&quot;, UstKategoriID = 4 };\r\n            AltKategori Kategori8 = new AltKategori { ID = 8, KategoriAdi = &quot;o&quot;, UstKategoriID = 4 };\r\n\r\n            List&lt;AltKategori&gt; TumAltKategoriler = new List&lt;AltKategori&gt; { Kategori1, Kategori2, Kategori3, Kategori4, Kategori5, Kategori6, Kategori7, Kategori8 };\r\n\r\n            List&lt;AltKategori&gt; altkategoriler = TumAltKategoriler.Where(k =&gt; k.UstKategoriID == KategoriID).ToList();\r\n            return Json(altkategoriler);\r\n        }\r\n<\/pre>\n<p>Bu metodun i\u015flevi se\u00e7ilen ana kategorinin ID si JQuery ile UstKategoriID parametresine g\u00f6nderiliyor.Burada gerekli alt kategoriler \u00e7ekildikten sonra Json ile geriye veri g\u00f6nderilmekte ve alt kategorilerimiz &#8220;AltKategoriler&#8221; isimli DropDownList nesnemizde listelenmektedir.Burada dikkat etmemiz gereken noktalardan birisi, &#8220;Index.cshtml&#8221; dosyam\u0131zdaki JavaScript kodlar\u0131n\u0131 incelersek e\u011fer &#8220;success: function (altkategoriler)&#8221; sat\u0131r\u0131nda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz &#8220;altkategoriler&#8221; isminde ayn\u0131 veriyi geri g\u00f6ndermeniz gerekmektedir.Bende bu y\u00fczden &#8220;AltKategori&#8221; tipinden olan koleksiyon nesnesinin referans ad\u0131n\u0131 &#8220;altkategoriler&#8221; olarak verdim.<\/p>\n<p>Son olarak projemizi derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131z zaman ekran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/06\/DropDownList.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1759\" alt=\"DropDownList\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/06\/DropDownList.png\" width=\"330\" height=\"191\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/06\/DropDownList.png 330w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/06\/DropDownList-300x173.png 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p>Asp.NET MVC mimarisinde genellikle s\u0131k\u0131nt\u0131 ya\u015fan\u0131lan ve \u00e7\u00f6z\u00fcm\u00fc nadir bulunan bu i\u015flemi sizlere elimden geldi\u011fi kadar detayl\u0131 bir bi\u00e7imde aktarmaya \u00e7al\u0131\u015ft\u0131m.Faydalanman\u0131z ve bir sonraki yaz\u0131mda g\u00f6r\u00fc\u015fmek dile\u011fiyle..<\/p>\n<p>\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>\u0130nternet kullan\u0131c\u0131lar\u0131 olarak bir foruma ya da sisteme kay\u0131t olurken genellikle kay\u0131t formlar\u0131nda DropDownList nesnesi sayesinde bulundu\u011fumuz \u015fehri se\u00e7ip ard\u0131nda ilgili \u015fehirle alakal\u0131 il\u00e7elerin di\u011fer DropDownList nesnesinde listelendi\u011fini g\u00f6r\u00fcr\u00fcz.Bu i\u015flem Asp.NET Web Form platformunda&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,18,19,780,345],"tags":[746,443,265,748,283],"class_list":["post-1753","post","type-post","status-publish","format-standard","hentry","category-asp-net-mvc","category-javascript","category-jquery","category-json","category-mvc-4-0","tag-asp-net-mvc","tag-dropdownlist","tag-javascript-2","tag-jquery","tag-mvc"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/1753","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=1753"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/1753\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=1753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=1753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=1753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}