AJAX, Modal ile Düzenleme ve Silme işlemi
Merhaba, Bugün Modal kullanarak AJAX ile düzenleme ve silme işlemlerini anlatacağım. Bu anlatımda bootstrap kütüphanelerini kullanacağım.
İlk önce eklenilen verileri sayfada listelememiz gerekir. Listeleme işlemine başlayalım. Controller'a şunu yazıyoruz.
public ActionResult Index() { return View( db.Kullanicis.ToList()); } |
Daha sonra View'ımıza gidip şu kodları yazmamız gerekir
@model List<DenemeBugra.Models.Kullanici> @{ ViewBag.Title = "Ana Sayfa"; } <div class="container"> <h2>Kullanicilar</h2> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addKullaniciModal">Kullanıcı Ekle</button> <table class="table table-striped table-hover"> <thead> <tr> <th>ID</th> <th>Kullanici Adi</th> <th>Kullanici Soyadi</th> <th>Kullanici Resim</th> <th>İşlemler</th> </tr> </thead> <tbody> @foreach (var kullanici in Model) { <tr> <td>@kullanici.ID</td> <td>@kullanici.KullaniciAdi</td> <td>@kullanici.KullaniciSoyadi</td> <td><img src="@kullanici.KullaniciResim" width="100" height="100" /></td> <td> <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#updateKullaniciModal" onclick="editKullanici('@kullanici.ID')">Düzenle</button> <button class="btn btn-danger" onclick="deleteKullanici('@kullanici.ID')"> Sil</button> </td> </tr> } </tbody> </table> </div> |
Burada önemli olan şeyler buttonların onclick olayındaki fonksiyon isimlerinin biraz sonra yazacağımız scriptteki fonksiyon isimleriyle aynı olmalıdır. Şimdi ise düzenleme modalını yazalım.
<div class="modal fade" id="updateKullaniciModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id=" updateKullaniciModalLabel">Update Kullanici</h4> </div> <div class="modal-body"> <form id="updateKullaniciForm" method="post" action="@Url.Action("UpdateKullanici")" enctype= "multipart/form-data"> @Html.AntiForgeryToken() <input type="hidden" id="ID" name="ID"/> <div class="form-group"> <label for="KullaniciAdi">Kullanici Adi</label> <input type="text" class="form-control" id="KullaniciAdi" value="" name="KullaniciAdi" required /> </div> <div class="form-group"> <label for="KullaniciSoyadi">Kullanici Soyadi</label> <input type="text" class="form-control" id="KullaniciSoyadi" name="KullaniciSoyadi" required /> </div> <div class="form-group"> <label for="KullaniciResim"> Kullanici Resim</label> <input type="file" class="form-control" name="file" id="KullaniciResim" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-bs-dismiss="modal">Çıkış</button> <button type="submit" class="btn btn-success">Güncelle</button> </div> </form> </div> </div> </div> </div> |
Burada önemli olan şey ise yine form'un id kısmıdır birazdan yazacağımız script kodunda formun id'sinden veriler çekip devam edeceğiz. Önce ID değerini yakalamak için Controller'a şunu yazacağız.
public JsonResult GetKullaniciById(int id) { var kullanici = db.Kullanicis.Find(id); return Json(kullanici, JsonRequestBehavior.AllowGet); } |
Daha sonra tekrar View'a gelip bu sefer script kodlarımızı yazacağız.
<script> function editKullanici(id) { $.ajax({ url: '@Url.Action("GetKullaniciById")', type: 'GET', data: { id: id }, success: function (result) { if (result) { $('#updateKullaniciForm #ID').val(result.ID); $('#updateKullaniciForm #KullaniciAdi').val(result.KullaniciAdi); $('#updateKullaniciForm #KullaniciSoyadi').val(result.KullaniciSoyadi); $('#updateKullaniciModal').modal('show'); } } }); }
function deleteKullanici(id) { var confirmDelete = confirm("Kullanıcı Silmek İstediğinizden emin misiniz?"); if (confirmDelete) { $.ajax({ url: '@Url.Action("DeleteKullanici")', type: 'POST', data: { id: id }, success: function () { location.reload(); } }); } } </script> |
Burada ilk başta butonlara verdiğimiz onclick içindeki fonsiyonlar ile scriptteki fonksiyonların adı aynı olmalıdır. Şimdi ise tekrar Controller'a gidip Düzenleme ve Silme kodlarını yazıp bitireceğiz.
[HttpPost] public ActionResult UpdateKullanici(Kullanici kullanici , HttpPostedFileBase file) { if (ModelState.IsValid) { var existingKullanici = db.Kullanicis.Find(kullanici.ID); if (existingKullanici != null) { // Eski resmi silme if (file != null && file.ContentLength > 0 && !string.IsNullOrEmpty (existingKullanici.KullaniciResim)) { var imagePath = Server.MapPath(existingKullanici.KullaniciResim); if (System.IO.File.Exists(imagePath)) { System.IO.File.Delete(imagePath); } }
// Yeni resmi kaydetme (eğer yeni bir resim seçilmişse) if (file != null && file.ContentLength > 0) { var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName); var path = Path.Combine(Server.MapPath("/uploads/"), fileName); file.SaveAs(path); existingKullanici.KullaniciResim ="/uploads/" + fileName; }
// Diğer kullanıcı bilgilerini güncelle existingKullanici.KullaniciAdi = kullanici.KullaniciAdi; existingKullanici.KullaniciSoyadi = kullanici.KullaniciSoyadi; db.SaveChanges(); } } return RedirectToAction("Index"); }
[HttpPost] public ActionResult DeleteKullanici(int id) {
var kullaniciToRemove = db.Kullanicis.Find(id); if (kullaniciToRemove != null) { if (System.IO.File.Exists(Server.MapPath(kullaniciToRemove.KullaniciResim))) { System.IO.File.Delete(Server.MapPath(kullaniciToRemove.KullaniciResim)); } db.Kullanicis.Remove(kullaniciToRemove); db.SaveChanges(); } return RedirectToAction("Index"); } |
Düzenleme ve Silme işlemi bu kadardı önemli olan isimlendirmelere dikkat edip olabildiğince aklınızda kalabilecek şekilde yapmaktır eğer hata alırsanız benle iletişime geçebilirsiniz.
Yorumlar
Alper
Çok yararlı bir yazı olmuş,teşekkürler :)
BugraSoft
Teşekkürler
Fatma ozturk
Maşallah oglum
BugraSoft
<3
Yorum Yap