Aspnet MVC Dinamik Modal-Popup

Asp.net MVC ile  dinamik modal uygulaması yapacağız. Açılan modalımızın içeriği dinamik olarak doldurmuş olacağız. Database olarak NorthwndDb kullandım.Entityframework Db first ile Employee tablosunu aldım.

Öncellikle indeximizde veritabanımızdaki çalışanlarımızı listeliyoruz ve çalışanımızın viewine tıklandığında detayı modal-popup olarak açılmasını sağlayacağız.

HomeController.cs kodluyoruz...

//EF Db first
 NORTHWNDEntities db;
 public HomeController()
 {
    db = new NORTHWNDEntities();
 }
 public ActionResult Index()
 {
    //Index viewmiza çalışanlarımızın listesini gönderiyoruz..
    return View(db.Employees.ToList());
 }

Index .cshtml de tablomuzu oluştuyoruz..

Burada dikkat etmemiz gereken nokta a tagimzin data-target özelliğidir viewmizin urlsini ve parametre olarak employeeID imizi yazıyoruz.

<a href="#" class="view" data-target="/home/employeedetail/@item.EmployeeID">View</a>

Sıra geldi modalımize burada bootstrap modalın aynısını aldım sizde bootstrap sitesinden alabilirsiniz çok kolaylık sağlayacaktır.

Yine index.cshtml mizin içerisine.

Kodlarımız yazdıkdan sonra sıra geldi scriptimizi yazmaya... script taglerimizi açıyoruz ve kodluyoruz.

 $(function () {
        // a tagimizde bulunan .view classımıza click olduğunda
        $("body").on("click", ".view", function () {
            //data-target dan url mizi al
            var url = $(this).data("target");
            //bu urlimizi post et
            $.post(url, function (data) { })
                //eğer işlemimiz başarılı bir şekilde gerçekleşirse
            .done(function (data) {
                //gelen datayı .modal-body mizin içerise html olarak ekle
                $("#modelView .modal-body").html(data);
                //sonra da modalimizi göster
                $("#modelView").modal("show");
            })
                //eğer işlem başarısız olursa
            .fail(function () {
                //modalımızın bodysine Error! yaz
                $("#modelView .modal-body").text("Error!!");
                //sonra da modalimizi göster
                $("#modelView").modal("show");
            })

        });
    })

Scriptimizide yazmış bulunuyoruz sonra HomeControllerımıza bir kez daha gidiyoruz ve EmployeeDetail ActionResult Metodumuzu tanımlıyoruz.

 //Bu metodumuz sadece POST isteği olduğunda çalışmasını istiyoruz
[HttpPost]
 public ActionResult EmployeeDetail(int? id)
 {
   //gelen id yi Veritabanımızda kontrol ediyoruz ve gelen employee partialviewimize gönderiyoruz
   return PartialView(db.Employees.FirstOrDefault(x=>x.EmployeeID ==id));
 }

EmployeeDetail.cshtml kısmımıza Gelen Employee mizi göndermiştik burada Modalimizin Bodysinde görünecek olan bilgilerimizi yazıyoruz..

Evet kodlamalarız bitti şimdi sayfamızın son halini görelim.

Index sayfası Çalışanlarımız listeleniyor..

Çalışanlarımız listelendi şimdi bir çalışanımıza view diyelim. Ve çalışanımızın detayını Modal - Popup'da görelim.

Bildiğim kadarıyla bir şeyler yazmaya çalıştım inşallah birilerinin faydalanması dileğiyle.. :)