<\/div>\n

Listelenmi\u015f bir tablodan JQuery ile nas\u0131l dinamik bir \u015fekilde sat\u0131r silebiliriz?Bu i\u015flemi ger\u00e7ekle\u015ftirirken ilgili sat\u0131rdaki veriyi fiziksel olarak nas\u0131l veritaban\u0131ndan da silebiliriz? gibisinden sorularla \u00e7ok kar\u015f\u0131la\u015f\u0131yoruz.Bu sorulara cevap niteli\u011finde bu makalemizi olu\u015fturmaya karar verdim.O halde ne yapaca\u011f\u0131z biraz de\u011finelim.<\/p>\n

Senaryomuz \u015f\u00f6yle olacak.SQL Server’da “OkulVT” isminde \u00f6rnek bir veritaban\u0131 olu\u015fturaca\u011f\u0131z ve bu veritaban\u0131 i\u00e7inde “Okullar” isimli bir tablo olacakt\u0131r.Bu tablo i\u00e7erisinde manuel olarak bir ka\u00e7 okul bilgisini tutaca\u011f\u0131z ve bu bilgileri Asp.NET MVC ile bilinen y\u00f6ntemlerle listeleyece\u011fiz.Vee ard\u0131ndan Ajax ile bir yandan tablomuzdaki veriyi fiziksel olarak silerken bir yandan da JQuery ile de bu i\u015flemi listemizde de ger\u00e7ekle\u015ftirece\u011fiz.Tabi ek olarak “\u0130\u015flem ger\u00e7ekle\u015ftiriliyor” gibisinden bir aparatta ekleyece\u011fiz.<\/p>\n

Hadi ba\u015flayal\u0131m.
\n $\"Asp.NET$ <\/a>
\nVeritaban\u0131m\u0131z\u0131 ve tablomuzu g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi olu\u015fturdum.
\n $\"Asp.NET$ <\/a>
\n“Okullar” isimli tablomuza sa\u00e7ma sapanda olsa manuel olarak veriler girdim.(Dipnot!, ad\u0131m ad\u0131m sa\u00e7ma sapan okullar\u0131n a\u00e7\u0131ld\u0131\u011f\u0131 memlekette ya\u015fayan birinin b\u00f6yle bir veri \u00f6rneklendirme si gayet normaldir ;))<\/p>\n

\u015eimdi “Home(Controller).cs” isimli Controller s\u0131n\u0131f\u0131m\u0131zdaki “Index” isimli Action metodundan bu verileri \u00e7ekip, “Index.cshtml” isimli View dosyas\u0131nda listelememizi ger\u00e7ekle\u015ftirelim.Tabi \u00f6ncelikle Models katman\u0131nda .dbml uzant\u0131l\u0131 dosyam\u0131zla veritaban\u0131n\u0131n projemizle ba\u011flant\u0131s\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n

\r\n    public class HomeController : Controller\r\n    {\r\n        public ActionResult Index()\r\n        {\r\n            VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n            return View(Veri.Okullars);\r\n        }\r\n    }\r\n<\/pre>\n\r\n@using JqueryTable.Models\r\n\r\n@model IEnumerable<Okullar>\r\n\r\n<div id="Durum"><\/div>\r\n<table>\r\n    <thead>\r\n        <tr>\r\n            <th>Okul Ad\u0131<\/th>\r\n            <th>Adres<\/th>\r\n            <th>\u0130\u015flemler<\/th>\r\n        <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n        @foreach (var Okul in Model)\r\n        {\r\n            <tr>\r\n                <td>@Okul.OkulAdi<\/td>\r\n                <td>@Okul.Adres<\/td>\r\n                <td><a href="#" class="Sil" name="@Okul.ID">Sil<\/a><\/td>\r\n            <\/tr>\r\n        }\r\n    <\/tbody>\r\n<\/table>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funun ekran \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6stermeden \u00f6nce dikkatinizi \u00e7ekmem gereken bir husus var.Dikkat ederseniz e\u011fer \u015fu ana kadar klasik bir Asp.NET MVC yap\u0131s\u0131 kullan\u0131p listeleme i\u015flemi ger\u00e7ekle\u015ftirmi\u015f olduk.Buraya kadar makalemizin i\u00e7eri\u011fi amac\u0131ndan olduk\u00e7a ba\u011f\u0131ms\u0131z.Ama burada \u00f6nemli bir husus var ki, her sat\u0131rdaki <a…> <\/a> html etiketinde class=”Sil” komutu mevcuttur.Biz birazdan JQuery ile t\u0131klanan sat\u0131ra bu komuttaki “Sil” verisi ile eri\u015fece\u011fiz ve name \u00f6zelli\u011fine verdi\u011fimiz ID de\u011ferleriyle de hangi veri oldu\u011funu programatik olarak elde edebilece\u011fiz.id de\u011feri “Durum” olan div tag\u0131nada son durum bildirisini yay\u0131nlayaca\u011f\u0131z.<\/p>\nEvet, bu a\u00e7\u0131klamadan sonra yukar\u0131daki listeninde ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc getirmek farz oldu.
\n<\/a><\/p>\n
Art\u0131k b\u00fct\u00fcn i\u015flemlerimiz bu yap\u0131 \u00fczerinde ger\u00e7ekle\u015fecektir.<\/p>\n
\u00d6ncelikle Ajax ile t\u0131klanan sat\u0131rdaki veriyi veritaban\u0131ndan silelim.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $(".Sil").click(function () {\r\n            \/\/Herhangi bir sat\u0131rdaki <a..> <\/a> tag\u0131 t\u0131kland\u0131\u011f\u0131 zaman tetiklenecek olan metotdur.\r\n            if (confirm("Okulu silmek istedi\u011finizden emin misiniz?")) {\r\n                var ID = $(this).attr('name');\r\n                \/\/T\u0131klanan ilgili linkin name \u00f6zelli\u011findeki ID de\u011ferini \u00e7ekiyoruz.\r\n                $.ajax({\r\n                    url: '\/Home\/Sil\/' + ID,\/\/Ajax ile tetiklenecek ilgili adresi belirliyoruz.\r\n                    type: 'POST',\r\n                    dataType: 'json',\r\n                    success: function (data) {\r\n                        $("#Durum").html(data);\r\n                        \/\/Gelen Json veriyi ilgili taga yerle\u015ftiriyoruz.\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nEvet, yukar\u0131daki kod blo\u011fu sayesinde t\u0131klad\u0131\u011f\u0131m\u0131z sat\u0131rdaki veri, veritaban\u0131ndan Ajax ile Post edilerek ba\u015far\u0131l\u0131 bir \u015fekilde silinmektedir.<\/p>\n
“Home(Controller).cs” isimli Controller s\u0131n\u0131f\u0131m\u0131zdaki “Sil” Action’\u0131n\u0131n i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibidir.<\/p>\n
\r\n        [HttpPost]\r\n        public JsonResult Sil(int id)\r\n        {\r\n            VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n            Okullar Okul = Veri.Okullars.FirstOrDefault(o => o.ID == id);\r\n            Veri.Okullars.DeleteOnSubmit(Okul);\r\n            Veri.SubmitChanges();\r\n            return Json("<strong>" + Okul.OkulAdi + "<\/strong> isimli okul ba\u015far\u0131yla silinmi\u015ftir.", JsonRequestBehavior.AllowGet);\r\n        }\r\n<\/pre>\nYukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Sil metodu geriye JsonResult tipinden de\u011fer d\u00f6nen bir metottur.Haliyle, bu Ajax i\u015flemi neticesinde geriye bir Json veri format\u0131 d\u00f6nmekte ve biz success fonksiyonu ile o veriyi elde etmekteyiz.<\/p>\n
\u015eimdi s\u0131ra geldi, sildi\u011fimiz sat\u0131r\u0131 listeden de silmeye.<\/p>\n
Bu i\u015flemide,<\/p>\n
\r\n$(this).parent('td').parent('tr').remove();\r\n<\/pre>\nkomutu ile halledece\u011fiz.<\/p>\n
Bu komut, o anda t\u0131klanan <a..> <\/a> tag\u0131n\u0131n i\u00e7inde bulundu\u011fu sat\u0131r\u0131 temsil etmektedir.Sadece <a..> <\/a> tag\u0131 i\u00e7in ge\u00e7erli de\u011fildir tabi.Herhangi t\u0131klanan bir html nesneside olabilir.\u0130lgili nesnenin bulundu\u011fu td ve tr taglar\u0131n\u0131 aray\u0131p silme i\u015flevi g\u00f6recektir.<\/p>\n
Bu komutu Ajax ile veritaban\u0131ndan ilgili verimizi sildikten sonra \u00e7a\u011f\u0131rmam\u0131z gerekmektedir.Aksi taktirde veri silinme a\u015famas\u0131nda bir problem do\u011farsa ilgili veri tablodan silinmi\u015f olarak g\u00f6r\u00fclebilir.<\/p>\n
\u015eimdi script komutlar\u0131m\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyelim.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $(".Sil").click(function () {\r\n            \/\/Herhangi bir sat\u0131rdaki <a..> <\/a> tag\u0131 t\u0131kland\u0131\u011f\u0131 zaman tetiklenecek olan metotdur.\r\n            if (confirm("Okulu silmek istedi\u011finizden emin misiniz?")) {\r\n                var ID = $(this).attr('name');\r\n                \/\/T\u0131klanan ilgili linkin name \u00f6zelli\u011findeki ID de\u011ferini \u00e7ekiyoruz.\r\n                $.ajax({\r\n                    url: '\/Home\/Sil\/' + ID,\/\/Ajax ile tetiklenecek ilgili adresi belirliyoruz.\r\n                    type: 'POST',\r\n                    dataType: 'json',\r\n                    success: function (data) {\r\n                        $("#Durum").html(data);\r\n                        \/\/Gelen Json veriyi ilgili taga yerle\u015ftiriyoruz.\r\n                    }\r\n                });\r\n\r\n                $(this).parent('td').parent('tr').remove();\r\n                \/\/Ajax i\u015flemi ba\u015far\u0131yla sonu\u00e7land\u0131ktan sonra ilgili sat\u0131r\u0131 bu komut ile siliyoruz.\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nEvet, bu i\u015flemlerden sonra gelelim yaz\u0131m\u0131z\u0131n bonusu olan “\u0130\u015flem ger\u00e7ekle\u015ftiriliyor” mesaj\u0131n\u0131 vermeye.Bu i\u015flemi Ajax komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131yorken yapmam\u0131z a\u015fikard\u0131r.Nihayetinde Server i\u015flemleri Ajax komutlar\u0131m\u0131z\u0131n aktif oldu\u011fu anlar demektir.<\/p>\n
\r\n<div id="wait" style="display:none;width:133px;height:25px;border:0 solid black;position:absolute;top:50%;left:50%;padding:2px;text-align:center;">\r\n    <img src="~\/Content\/IslemYapiliyor.gif" \/><br>\u0130\u015fleniyor...<\/div>\r\n<\/pre>\n“\u0130\u015flem ger\u00e7ekle\u015ftiriliyor” mesaj\u0131n\u0131 verece\u011fimiz pencerenin html komutunu bu \u015fekilde ayarlayabiliriz.Tabi siz istedi\u011finiz gibi de\u011fi\u015ftirebilir, sitenizin k\u0131l\u0131f\u0131na uydurabilirsiniz.Ben bunu se\u00e7tim.Bu komutu “Index.cshtml” sayfam\u0131z\u0131n herhangi bir yerine koymam\u0131z gerekmektedir.\u00d6rnek olarak “Index.cshtml” sayfam\u0131z\u0131 a\u015fa\u011f\u0131daki g\u00fcncelledim.<\/p>\n
\r\n@using JqueryTable.Models\r\n\r\n@model IEnumerable<Okullar>\r\n\r\n<div id="Durum"><\/div>\r\n<table>\r\n    <thead>\r\n        <tr>\r\n            <th>Okul Ad\u0131<\/th>\r\n            <th>Adres<\/th>\r\n            <th>\u0130\u015flemler<\/th>\r\n        <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n        @foreach (var Okul in Model)\r\n        {\r\n            <tr>\r\n                <td>@Okul.OkulAdi<\/td>\r\n                <td>@Okul.Adres<\/td>\r\n                <td><a href="#" class="Sil" name="@Okul.ID">Sil<\/a><\/td>\r\n            <\/tr>\r\n        }\r\n    <\/tbody>\r\n<\/table>\r\n<div id="wait" style="display:none;width:133px;height:25px;border:0 solid black;position:absolute;top:50%;left:50%;padding:2px;text-align:center;">\r\n    <img src="~\/Content\/IslemYapiliyor.gif" \/><br>\u0130\u015fleniyor...\r\n<\/div>\r\n<\/pre>\nBu komut ilk a\u015famada g\u00f6z\u00fckmeyecektir.Ajax komutlar\u0131 devreye girdi\u011fi zaman bunu aktifle\u015ftirebilmek i\u00e7in a\u015fa\u011f\u0131daki g\u00fcncellemeyi yapal\u0131m.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $(".Sil").click(function () {\r\n            \/\/Herhangi bir sat\u0131rdaki <a..> <\/a> tag\u0131 t\u0131kland\u0131\u011f\u0131 zaman tetiklenecek olan metotdur.\r\n            if (confirm("Okulu silmek istedi\u011finizden emin misiniz?")) {\r\n                var ID = $(this).attr('name');\r\n                \/\/T\u0131klanan ilgili linkin name \u00f6zelli\u011findeki ID de\u011ferini \u00e7ekiyoruz.\r\n                $.ajax({\r\n                    url: '\/Home\/Sil\/' + ID,\/\/Ajax ile tetiklenecek ilgili adresi belirliyoruz.\r\n                    type: 'POST',\r\n                    dataType: 'json',\r\n                    success: function (data) {\r\n                        $("#Durum").html(data);\r\n                        \/\/Gelen Json veriyi ilgili taga yerle\u015ftiriyoruz.\r\n                    }\r\n                });\r\n\r\n                $(this).parent('td').parent('tr').remove();\r\n                \/\/Ajax i\u015flemi ba\u015far\u0131yla sonu\u00e7land\u0131ktan sonra ilgili sat\u0131r\u0131 bu komut ile siliyoruz.\r\n            }\r\n        });\r\n        $(document).ajaxStart(function () {\r\n            $("#wait").css("display", "block");\r\n        });\r\n        $(document).ajaxComplete(function () {\r\n            $("#wait").css("display", "none");\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nDikkat ederseniz e\u011fer,<\/p>\n
\r\n        $(document).ajaxStart(function () {\r\n            $("#wait").css("display", "block");\r\n        });\r\n<\/pre>\nve<\/p>\n
\r\n        $(document).ajaxComplete(function () {\r\n            $("#wait").css("display", "none");\r\n        });\r\n<\/pre>\nkomutlar\u0131yla Ajax i\u015flemlerinin ba\u015flay\u0131p(ajaxStart) bitti\u011fi(ajaxComplete) anda i\u015flem yapabiliyoruz.Tabi, “\u0130\u015flem ger\u00e7ekle\u015ftiriliyor” mesaj\u0131n\u0131n g\u00f6z\u00fckme zarf\u0131 yapt\u0131\u011f\u0131m\u0131z server i\u015flerinin y\u00fck\u00fcne ba\u011fl\u0131d\u0131r.Ee haliyle biz hem localde \u00e7al\u0131\u015f\u0131yoruz hem de iki sat\u0131r kodun i\u015fleyi\u015fini g\u00f6stermeye \u00e7al\u0131\u015f\u0131yoruz.O y\u00fczden Thread.Sleep(5000); komutu sayesinde i\u015flem ak\u0131\u015f\u0131n\u0131 uzatabilir ve ilgili pencereyi net bir \u015fekilde g\u00f6rebilirsiniz.<\/p>\n
B\u00fct\u00fcn proje bu kadar.A\u015fa\u011f\u0131daki videodan makalemizde bahsetti\u011fimiz sistemin genel \u00e7al\u0131\u015fma halini izleyip g\u00f6rebilirsiniz.<\/p>\n
<\/iframe><\/p>\n<p>Bol bol faydalanman\u0131z dile\u011fiyle&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar diliyorum&#8230;<\/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>Listelenmi\u015f bir tablodan JQuery ile nas\u0131l dinamik bir \u015fekilde sat\u0131r silebiliriz?Bu i\u015flemi ger\u00e7ekle\u015ftirirken ilgili sat\u0131rdaki veriyi fiziksel olarak nas\u0131l veritaban\u0131ndan da silebiliriz? gibisinden sorularla \u00e7ok kar\u015f\u0131la\u015f\u0131yoruz.Bu sorulara cevap niteli\u011finde bu makalemizi olu\u015fturmaya karar verdim.O&#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":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11,600,18,19,780],"tags":[744,763,762,746,265,748,283],"class_list":["post-3212","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-ajaxcomplete","tag-ajaxstart","tag-asp-net-mvc","tag-javascript-2","tag-jquery","tag-mvc"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3212","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=3212"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3212\/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=3212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}