Asp.NET MVC – JQuery ile Tabloda Satır Silmek ve İşlem Gerçekleştiriliyor Animasyonu Göstermek

Listelenmiş bir tablodan JQuery ile nasıl dinamik bir şekilde satır silebiliriz?Bu işlemi gerçekleştirirken ilgili satırdaki veriyi fiziksel olarak nasıl veritabanından da silebiliriz? gibisinden sorularla çok karşılaşıyoruz.Bu sorulara cevap niteliğinde bu makalemizi oluşturmaya karar verdim.O halde ne yapacağız biraz değinelim.

Senaryomuz şöyle olacak.SQL Server’da “OkulVT” isminde örnek bir veritabanı oluşturacağız ve bu veritabanı içinde “Okullar” isimli bir tablo olacaktır.Bu tablo içerisinde manuel olarak bir kaç okul bilgisini tutacağız ve bu bilgileri Asp.NET MVC ile bilinen yöntemlerle listeleyeceğiz.Vee ardından Ajax ile bir yandan tablomuzdaki veriyi fiziksel olarak silerken bir yandan da JQuery ile de bu işlemi listemizde de gerçekleştireceğiz.Tabi ek olarak “İşlem gerçekleştiriliyor” gibisinden bir aparatta ekleyeceğiz.

Hadi başlayalım.

Veritabanımızı ve tablomuzu gördüğünüz gibi oluşturdum.

“Okullar” isimli tablomuza saçma sapanda olsa manuel olarak veriler girdim.(Dipnot!, adım adım saçma sapan okulların açıldığı memlekette yaşayan birinin böyle bir veri örneklendirme si gayet normaldir ;))

Şimdi “Home(Controller).cs” isimli Controller sınıfımızdaki “Index” isimli Action metodundan bu verileri çekip, “Index.cshtml” isimli View dosyasında listelememizi gerçekleştirelim.Tabi öncelikle Models katmanında .dbml uzantılı dosyamızla veritabanının projemizle bağlantısını oluşturalım.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            VeriTabaniDataContext Veri = new VeriTabaniDataContext();
            return View(Veri.Okullars);
        }
    }

@using JqueryTable.Models

@model IEnumerable<Okullar>

<div id="Durum"></div>
<table>
    <thead>
        <tr>
            <th>Okul Adı</th>
            <th>Adres</th>
            <th>İşlemler</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var Okul in Model)
        {
            <tr>
                <td>@Okul.OkulAdi</td>
                <td>@Okul.Adres</td>
                <td><a href="#" class="Sil" name="@Okul.ID">Sil</a></td>
            </tr>
        }
    </tbody>
</table>

Yukarıdaki kod bloğunun ekran çıktısını göstermeden önce dikkatinizi çekmem gereken bir husus var.Dikkat ederseniz eğer şu ana kadar klasik bir Asp.NET MVC yapısı kullanıp listeleme işlemi gerçekleştirmiş olduk.Buraya kadar makalemizin içeriği amacından oldukça bağımsız.Ama burada önemli bir husus var ki, her satırdaki <a…> </a> html etiketinde class=”Sil” komutu mevcuttur.Biz birazdan JQuery ile tıklanan satıra bu komuttaki “Sil” verisi ile erişeceğiz ve name özelliğine verdiğimiz ID değerleriyle de hangi veri olduğunu programatik olarak elde edebileceğiz.id değeri “Durum” olan div tagınada son durum bildirisini yayınlayacağız.

Evet, bu açıklamadan sonra yukarıdaki listeninde ekran görüntüsünü getirmek farz oldu.

Artık bütün işlemlerimiz bu yapı üzerinde gerçekleşecektir.

Öncelikle Ajax ile tıklanan satırdaki veriyi veritabanından silelim.

<script type="text/javascript">
    $(document).ready(function () {
        $(".Sil").click(function () {
            //Herhangi bir satırdaki <a..> </a> tagı tıklandığı zaman tetiklenecek olan metotdur.
            if (confirm("Okulu silmek istediğinizden emin misiniz?")) {
                var ID = $(this).attr('name');
                //Tıklanan ilgili linkin name özelliğindeki ID değerini çekiyoruz.
                $.ajax({
                    url: '/Home/Sil/' + ID,//Ajax ile tetiklenecek ilgili adresi belirliyoruz.
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        $("#Durum").html(data);
                        //Gelen Json veriyi ilgili taga yerleştiriyoruz.
                    }
                });
            }
        });
    });
</script>

Evet, yukarıdaki kod bloğu sayesinde tıkladığımız satırdaki veri, veritabanından Ajax ile Post edilerek başarılı bir şekilde silinmektedir.

“Home(Controller).cs” isimli Controller sınıfımızdaki “Sil” Action’ının içeriği aşağıdaki gibidir.

        [HttpPost]
        public JsonResult Sil(int id)
        {
            VeriTabaniDataContext Veri = new VeriTabaniDataContext();
            Okullar Okul = Veri.Okullars.FirstOrDefault(o => o.ID == id);
            Veri.Okullars.DeleteOnSubmit(Okul);
            Veri.SubmitChanges();
            return Json("<strong>" + Okul.OkulAdi + "</strong> isimli okul başarıyla silinmiştir.", JsonRequestBehavior.AllowGet);
        }

Yukarıda gördüğünüz gibi Sil metodu geriye JsonResult tipinden değer dönen bir metottur.Haliyle, bu Ajax işlemi neticesinde geriye bir Json veri formatı dönmekte ve biz success fonksiyonu ile o veriyi elde etmekteyiz.

Şimdi sıra geldi, sildiğimiz satırı listeden de silmeye.

Bu işlemide,

$(this).parent('td').parent('tr').remove();

komutu ile halledeceğiz.

Bu komut, o anda tıklanan <a..> </a> tagının içinde bulunduğu satırı temsil etmektedir.Sadece <a..> </a> tagı için geçerli değildir tabi.Herhangi tıklanan bir html nesneside olabilir.İlgili nesnenin bulunduğu td ve tr taglarını arayıp silme işlevi görecektir.

Bu komutu Ajax ile veritabanından ilgili verimizi sildikten sonra çağırmamız gerekmektedir.Aksi taktirde veri silinme aşamasında bir problem doğarsa ilgili veri tablodan silinmiş olarak görülebilir.

Şimdi script komutlarımızı aşağıdaki gibi güncelleyelim.

<script type="text/javascript">
    $(document).ready(function () {
        $(".Sil").click(function () {
            //Herhangi bir satırdaki <a..> </a> tagı tıklandığı zaman tetiklenecek olan metotdur.
            if (confirm("Okulu silmek istediğinizden emin misiniz?")) {
                var ID = $(this).attr('name');
                //Tıklanan ilgili linkin name özelliğindeki ID değerini çekiyoruz.
                $.ajax({
                    url: '/Home/Sil/' + ID,//Ajax ile tetiklenecek ilgili adresi belirliyoruz.
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        $("#Durum").html(data);
                        //Gelen Json veriyi ilgili taga yerleştiriyoruz.
                    }
                });

                $(this).parent('td').parent('tr').remove();
                //Ajax işlemi başarıyla sonuçlandıktan sonra ilgili satırı bu komut ile siliyoruz.
            }
        });
    });
</script>

Evet, bu işlemlerden sonra gelelim yazımızın bonusu olan “İşlem gerçekleştiriliyor” mesajını vermeye.Bu işlemi Ajax komutları çalıştırıyorken yapmamız aşikardır.Nihayetinde Server işlemleri Ajax komutlarımızın aktif olduğu anlar demektir.

<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;">
    <img src="~/Content/IslemYapiliyor.gif" /><br>İşleniyor...</div>

“İşlem gerçekleştiriliyor” mesajını vereceğimiz pencerenin html komutunu bu şekilde ayarlayabiliriz.Tabi siz istediğiniz gibi değiştirebilir, sitenizin kılıfına uydurabilirsiniz.Ben bunu seçtim.Bu komutu “Index.cshtml” sayfamızın herhangi bir yerine koymamız gerekmektedir.Örnek olarak “Index.cshtml” sayfamızı aşağıdaki güncelledim.

@using JqueryTable.Models

@model IEnumerable<Okullar>

<div id="Durum"></div>
<table>
    <thead>
        <tr>
            <th>Okul Adı</th>
            <th>Adres</th>
            <th>İşlemler</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var Okul in Model)
        {
            <tr>
                <td>@Okul.OkulAdi</td>
                <td>@Okul.Adres</td>
                <td><a href="#" class="Sil" name="@Okul.ID">Sil</a></td>
            </tr>
        }
    </tbody>
</table>
<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;">
    <img src="~/Content/IslemYapiliyor.gif" /><br>İşleniyor...
</div>

Bu komut ilk aşamada gözükmeyecektir.Ajax komutları devreye girdiği zaman bunu aktifleştirebilmek için aşağıdaki güncellemeyi yapalım.

<script type="text/javascript">
    $(document).ready(function () {
        $(".Sil").click(function () {
            //Herhangi bir satırdaki <a..> </a> tagı tıklandığı zaman tetiklenecek olan metotdur.
            if (confirm("Okulu silmek istediğinizden emin misiniz?")) {
                var ID = $(this).attr('name');
                //Tıklanan ilgili linkin name özelliğindeki ID değerini çekiyoruz.
                $.ajax({
                    url: '/Home/Sil/' + ID,//Ajax ile tetiklenecek ilgili adresi belirliyoruz.
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        $("#Durum").html(data);
                        //Gelen Json veriyi ilgili taga yerleştiriyoruz.
                    }
                });

                $(this).parent('td').parent('tr').remove();
                //Ajax işlemi başarıyla sonuçlandıktan sonra ilgili satırı bu komut ile siliyoruz.
            }
        });
        $(document).ajaxStart(function () {
            $("#wait").css("display", "block");
        });
        $(document).ajaxComplete(function () {
            $("#wait").css("display", "none");
        });
    });
</script>

Dikkat ederseniz eğer,

        $(document).ajaxStart(function () {
            $("#wait").css("display", "block");
        });

ve

        $(document).ajaxComplete(function () {
            $("#wait").css("display", "none");
        });

komutlarıyla Ajax işlemlerinin başlayıp(ajaxStart) bittiği(ajaxComplete) anda işlem yapabiliyoruz.Tabi, “İşlem gerçekleştiriliyor” mesajının gözükme zarfı yaptığımız server işlerinin yüküne bağlıdır.Ee haliyle biz hem localde çalışıyoruz hem de iki satır kodun işleyişini göstermeye çalışıyoruz.O yüzden Thread.Sleep(5000); komutu sayesinde işlem akışını uzatabilir ve ilgili pencereyi net bir şekilde görebilirsiniz.

Bütün proje bu kadar.Aşağıdaki videodan makalemizde bahsettiğimiz sistemin genel çalışma halini izleyip görebilirsiniz.

Bol bol faydalanmanız dileğiyle…
İyi çalışmalar diliyorum…