AJAX ve Modal ile Ekleme işlemi
Merhaba, Bugün Modal kullanarak AJAX ile ekleme işlemlerini anlatacağım. Bu anlatımda bootstrap kütüphanelerini kullanacağım
İlk önce bir açılır kapanır modalımızı açmak için bir butona ihtiyacımız var butonumuzu şöyle ekliyoruz.
| <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addKullaniciModal">Kullanıcı Ekle</button> |
data-bs-target'e modalın id'sini yazıyoruz. Şimdi modalı oluşturalım.
<div class="modal fade" id="AddKullaniciModal" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="updateKullaniciModalLabel">Kullanıcı Ekle</h4> </div> <div class="modal-body"> <form id="AddKullaniciForm" method="post" action="@Url.Action("AddKullanici")" enctype= "multipart/form-data"> @Html.AntiForgeryToken() <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-dismiss="modal">Çıkış</button> <button type="submit" class="btn btn-success">Kaydet</button> </div> </form> </div> </div> </div> </div> |
Önemli Kısımlar
- Burada Div'in ID'si ile yukarı tanımladığımız Button'un data-bs-target'in aynı olması gerekiyor.
- Formun ID'si çok önemli onu birazdan kullanacağız.
- Form'un action kısmı doğru olmalı birazdan controller'a yazacağımız action ismiyle aynı olmalı.
- Son olarak inputlar'ın name'leri de önemli. Karışmaması için veri tabanındaki sütunlarla aynı adı vermeniz sizin için iyi olacaktır
Şimdi ise AJAX ile controller'ımıza hızlı bir şekilde verilerimizi iletelim.
<script> $(document).ready(function () { $('#addKullaniciForm').submit(function (e) { e.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: '@Url.Action("AddKullanici")', type: 'POST', data: formData, contentType: false, processData: false, success: function () { location.reload(); } }); }); }); </script> |
Buradaki önemli noktalar ise form'a verdiğimiz id değerini $("#FormID").submit kısmına doğru yazabilmek. ve daha sonra url: kısmına yine aynı şekilde formda verdiğimiz action'un aynısını yazıyoruz.
Şimdi ise Controller'ımızı yazmaya başlayalım.
bugradenemeEntities db = new bugradenemeEntities(); [HttpPost] public ActionResult AddKullanici(Kullanici kullanici, HttpPostedFileBase file) { if (ModelState.IsValid) { 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); kullanici.KullaniciResim = "/uploads/" + fileName; } db.Kullanicis.Add(kullanici); db.SaveChanges(); } return RedirectToAction("Index”); } |
Burada ise ilk önce Action'umuzun ismini form'da belirttiğimizin aynısı yaptıktan sonra yukarıdaki kodları yazıyoruz. Burada görseli uploads klasörüne yüklüyoruz ve görselin yolunu veri tabanına kaydediyoruz.
Ekleme işlemi bu kadardı. Sonraki yazılarımda görüşmek üzere...
Yorumlar
İsimsiz Birisi
Hocam Ellerinize sağlık
BugraSoft
Eyvallah kardeşim yardımcı olduysak ne mutlu
Yorum Yap