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.
Asp.NET MVC - JQuery ile Tabloda Satır Silmek ve İşlem Gerçekleştiriliyor Animasyonu Göstermek
Veritabanımızı ve tablomuzu gördüğünüz gibi oluşturdum.
Asp.NET MVC - JQuery ile Tabloda Satır Silmek ve İşlem Gerçekleştiriliyor Animasyonu Göstermek - 2
“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.
Asp.NET MVC - JQuery ile Tabloda Satır Silmek ve İşlem Gerçekleştiriliyor Animasyonu Göstermek - 3

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…

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. Berkay dedi ki:

    Gençay merhaba, çok güzel bir analtım olmuş, eline sağlık 🙂 Benim tableda verilerim var. Düzenle butonuna bastığımda o satırın içindeki taglarındaki veriyi input text e atıp düzenle olan butonu güncelleye çevirip güncellemek istiyorum. Kurtar beni bu dertten, cevabını bekliyorum 🙂

    • Gençay dedi ki:

      Merhaba,

      Yapmanız gereken düzenleye tıklandığı vakit ilgili satırı elde edip her bir kolonundaki verileri tek tek bir modelde ya da alanda saklayıp yerlerine inputlar yerleştirip ardından elde edilen verileri o inputların valuelarına atamaktır. jQuery ile bu işlem oldukça kompleks olacaktır. Bir yandan da güncelleme neticesinde ilgili satırı güncel verilerle eski haline getirmeniz gerekecektir.

      Örnek istiyorsanız eğer uygun bir zamanda sizin için bir kod bloğu hazırlayabilirim.

      İyi çalışmalar.

      • Berkay dedi ki:

        Harika olur Gençay müsait olduğun bir zamanda ufak bir örnek hazırlarsan sevinirim. Elim F5te bekliyorum 🙂

        Peki sence bu yolun bir dezavantajı var mıdır fikrin nedir? Farklı bir viewde de güncelleme işlemini yaptırıp kullanıcıyı geri sayfaya yönlendirebilirim. Fakat bu şekilde daha güzel olacağını düşündüm.

        • Gençay dedi ki:

          Fikirsel olarak güzel ve daha kullanışlı bir tercih. Bu şekilde bir inşada bulunmanın dezavantajlı bir durumu yok. Bu durumda yaptığın ve seçtiğin kodlama ve yaklaşımda avantaj ve dezavantaj aramak daha doğru olur.

          Not: Paylaşımda bulunduğum zaman mail adresinden bilgilendirmede bulunurum.

  2. Ahmet dedi ki:

    Merhaba hocam
    Bu işlemi yaptıktan sonra veritabanında verilerimizde siliniyormu , eğer siliniyorsa silinmemesi için nasıl bir yol izleyebiliriz .
    İyi çalışmalar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.