Asp.net Mvc Bootstrap Modal Popup Form

Bootstrap Modal Popup
Bootstrap Modal Popup

Merhaba arkadaşlar bu yazımızda bootstrap modal popup‘ı mvc üzerinde nasıl kullanabileceğimizi öğreneceğiz. Bootstrap modal ile ilgili detaylı bilgilere şu adres üzerinden erişebilirsiniz. Bazen geliştirdiğimiz projelerde aynı sayfa üzerinde farklı bir işlem yapmak isteriz bu durumda popuplar işimizi görürler. Bootstrap’ın popup’ı şık görüntüsüyle ve responsive yapısıyla her projede rahatlıkla kullanabileceğimiz cinsten.

Bu örnek için ben şöyle bir senaryo düşündüm. Kişi bilgilerini kayıt eden bir formumuz var ve biz bunun popup olarak açılmasını istiyoruz. Ne kadar karmaşık bir senaryo :))

Şimdi kodlamamıza geçelim artık.

İlk olarak Controllerımızı ekleyelim.

Burada tüm kodlarımız var fakat adım adım açıklayarak gideceğiz. İlk olarak Anasayfa action’ımızı ve ona bağlı view’ımızı oluşturuyoruz.

Buradaki modal divi standarttır. Biz buradaki “modal-body” içerisindeki partial’a kodlarımızı yazıyoruz. Modalımızın “modal-header” kısmına başlığımızı “modal-footer” kısmına ise modalı kapatma vs. işlemlerimizi yazıyoruz. Şimdi de Partial’ımızı sisteme ekleyelim.

Burada kullandığımız modellerimizi yazalım öyle anlatalım kodun ne iş yaptığını.

Şimdi partialımızı açıklayalım. Üstte formumuz bulunuyor ve alt kısımdaki javascript kısmında ise il seçildiği zaman ilçeyi getiren ajax metodumuz bulunuyor  bu metodun Controller tarafında tetiklendiği metodumuz ise GetIlces metodudur bu metod İl id parametresi almaktadır.

Controller kısmında birde Anasayfa actionımızın post metodu bulunmaktadır hepsi bu kadar. Sayfamız üzerindeki Kayıt Formu butonumuza tıkladığımızda modalımız açılmaktadır.

Tabi tüm bu işlemlerin çalışabilmesi için jquery ve bootstrap kütüphanelerini de sisteme eklememiz gerekmektedir.Herkese kolay gelsin.

Bu yazımı beğendiyseniz Ajax Form ile Post etme işlemleri için şu yazımı inceleyebilirsiniz.

Artık bir bardak su içebiliriz. 🙂

 

“Asp.net Mvc Bootstrap Modal Popup Form” için 2 cevap

  1. Merhabalar makale için teşekkür ederim. Fakat sizden bir isteğim daha olacaktı. Mesela Yaş kısmına harf girdiği zaman veya başarılı olduğu zaman birinci popup üstüne ikinci bir popup nasıl açabiliriz ?

Bir cevap yazın

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