Asp.Net Mvc'de Ajax ile Sayfa Yenilenmeden Çoklu Veri Silme

İbrahim     13 Eylül 2017     1353     2    
Bu paylaşımda mvcde sayfa yenilenmeden anlık olarak,tabloda seçili olan checkboxlara göre veriler nasıl silinir onu göstereceğim.

'Mvc de sayfa yenilenmeden veri çekme'  adlı paylaşımımda veri çekme işlemini göstermiştim.Şimdi o paylaşım üzerinden devam edeceğim.İlk olarak html sayfasını oluşturalım.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
</head>
<body>
<button id="sil">Sil</button>
<table id="tablo"></table>

<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/makale.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		Makaleler();
	});
</body>
</html>

 

MakaleController tarafına geçelim.Sil metodumuzu yazalım.

public class MakaleController : Controller
{
    private DbEntities DB = null;

    public MakaleController()
    {
        DB = new DbEntities();
    }

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Veriler()
    {
        var model = DB.Makale.ToList();
	    return Json(
	    new
	    {
            Result = (from obj in model
		    select new
		    {
		        Baslik = obj.Baslik,
		        Icerik = obj.Icerik
		    })
	    }, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Sil(int[] id)
    {
        Makale model;
        foreach (var veri in id)
        {
            model = DB.Makale.FirstOrDefault(x => x.Id == veri);
            DB.Makale.Remove(model);
        }
        DB.SaveChanges();
        return Json("1");
    }
}

 

Şimdi makale.js dosyamıza gelelim.Sil butonuna tıkladığımızda checkbox'ı ticklenmiş olan makelelerin id'sini alıp MakaleController'ımızdaki 'Sil' metodumuza json formatında gönderelim. 

function Makaleler() {
    $.ajax({
        type: 'GET',
        url: '/Makale/Veriler',
        dataType: "JSON",
        success: function (data) {
            $('#tablo').html("");
            $(data.Result).each(function (item) {
                var checkbox = '<input type="checkbox" name="secili" value=' + data.Result[item].Id + ' />';
                var makale = '<tr><td>' + checkbox + '</td><td>' + data.Result[item].Baslik + '</td><td>' +
data.Result[item].Icerik + '</td></tr>';
                $('#tablo').append(makale);
            }
        }
    });
}

$("#sil").click(function () {
    var id = [];
    var sayac = 0;
    $("input[name='secili']:checked").each(function () {
        id[sayac] = $(this).val();
        sayac++;
    });

    $.ajax({
        type: "POST",
        url: '/Makale/Sil',
        data: { id },
        dataType: "json",
        success: function (gelenDeg) {
            if (gelenDeg === "1") {
                alert("Silme işlemi başarıyla gerçekleşti!");
                Makaleler();
            }
        },
        error: function () {
            alert("Makale(ler) Silinirken hata oluştu!");
        }
    });
});

Burada checkbox'ı ticklenmiş makalenin id'sini alıp, id adlı diziye attık.Ardından controller'a gönderdik.Gönderdiğimiz veriler, veritabanından başarılı bir şekilde silinmiş ise success fonksiyonuna girecek.Alert metodu içersindeki mesaj ekrana bastırılacak ve Makaleler metodu tekrar çalıştırılacak.Böylece sayfa yenilenmeden hem veri yada veriler silinmiş olacak hemde veritabanındaki veriler tabloya çekilmiş olacak.

Ajax ile çoklu veri silme işlemi bu şekilde.İşinize yaraması ümidiyle, iyi kodlamalar :)


Etiketler:  
mvc
aspnet
jquery
ajax-ile-sayfa-yenilenmeden-coklu-veri-silme


Paylaş:  

Bir Cevap Yazın

A

ALİ AKBULUT 1 Mayıs 2018
DOSTUM HELAL OLSUN GERÇEKTEN İYİ BİR YAZILIMCISIN TEŞEKKÜRLER BU KALİTELİ BİLGİLER İÇİN

İbrahim Çakal 18 Mayıs 2018
Güzel yorumunuz için ben teşekkür ederim Ali Bey.