MVC ile jQuery Ajax Kullanarak Kayıt Silmek

Merhaba, bu yazımda kısaca MVC ile birlikte ajax kullanarak kayıt silme işlemini nasıl gerçekleştirebileceğinizi anlatmaya çalışacağım. Öncelikle kodun çalışabilmesi içinjQquery.unobtrusive-ajax.js kütüphanesini sayfanıza eklemiş olmanız gerekmekte. Aksi takdirde Mvc'nin o işimizi çok kolaylaştıran Ajax.ActionLink yardımcı metodunu kullanamayız. Öncelikle ilgili controller'ımıza kayıt silecek olan Delete metodumuzu yazalım, ben örnekte BlogsContorller üzerinden işlemlerimi yapacağım;

[HttpDelete]
public void Delete(int ID)
{
    var item = db.Blogs.FirstOrDefault(p => p.BlogID.Equals(ID));
    if (item != null)
    {
        db.Blogs.DeleteObject(item);
        db.SaveChanges();
    }
}

Kayıtları listelediğimiz View'ımızdaki kodlarımız ise aşağıdaki gibi olacak, dikkat etmeniz gereken nokta şu; kayıtlar listelenirken her tr'ye bir id atıyorum ve ActionLinkin AjaxOptionsında da OnComplate'metodunda o tanımladığım idyi sildiriyorum, yani arkaplanda HttpDelete metodumuz çalışıp ilgili veriyi veritabanından sildikten sonra işlem tamamlanınca View'da da sadece ilgili tr sütunu jQuery yardımıyla siliniyor. Dolayısıyla bütün kayıtları tekrar listeleyip ekrana yazdırma yükü de ortadan kalkmış oluyor.

 @foreach (var item in Model) {
     <tr id="item_@item.BlogID">
     <td>@item.Title</td>
     <td>@Ajax.ActionImageLink("SİL!", "Delete", "Blogs", new { ID = @item.BlogID },
                new AjaxOptions(){HttpMethod = "Delete",
                                  Confirm = "Seçili Kayıt Silinecektir, Emin misiniz?",
                                  OnComplete = "$('#item_" + @item.BlogID + "').remove();"},null)
        </td>
    </tr>
                             }                            				

 İsterseniz AjaxOptions'a LoadingElement tanımlayarak işlem yapılırken kullanıcıların işleminiz gerçekleştiriliyor gibi mesajlar görmesini de sağlayabilirsiniz. Kısaca MVC'de jQuery Ajax kullanarak kayıt silme işlemini bu şekilde gerçekleştirebilirsiniz. Faydalı olmaı ümidiyle.

Sosyal Ağlarda Paylaşın

Share on Tumblr

Facebook Yorumları


Yorumlar (0)

Henüz hiç yorum yapılmamış. İlk yorumu siz yapın!

Yorum Yapın