Aspnet MVC Popup - Modal

Asp.net MVC Popup yapımı. Popup(açılır pencerede) form işlemleri yapımını ve kullanımını asp.net mvc üzerinde nasıl yapıldığını göreceğiz.

Yapacağımız bu işlem çok basit olucak çünkü yapacağız popup açılır penceremiz bootstrap hazır kodları bulunmaktadır ve bizde bunlardan faydalanacağız.

Örnek olarak üye ol butunumuz olsun ve bu butonumuza tıklandığında modal (popup - açılır pencere) açılacak orada bulunan formuzu doldurup üye olacağız.

İlk yapacağımız işlemimiz eğer  projemize bootstrap framework u dahil değilse dahil etmek olacaktır. 

Bu işlemizi gerçekleştirdikden sonra Index Viewmize "üye ol" butonumuzu oluştuyoruz. Ve aynı şekilde modalimizin(pop-up) kodlarını yazıyoruz. Bootstrap framework kullandığımız için hazır olarak buradan ulaşabilirsiniz.

<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#UyeOl">
  Üye Ol
</button>
<div class="modal fade" id="UyeOl" tabindex="-1" role="dialog" aria-labelledby="">
    <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="myModalLabel">Üye Ol</h4>
            </div>
            <form method="post" action="/home/uyeol">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kullanıcı adınız
                        <input type="text" name="kullaniciad" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Kullanıcı şifreniz</label>
                        <input type="password" name="sifre" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
                    <button type="submit" class="btn btn-primary">Üye Ol</button>
                </div >
            </form >
        </div >
    </div>
</div>

Evet modalimizi ve üye ol butonumuzu oluşturmuş olduk sıra geldi basit bir şekilde üye olma kısmına hemen HomeControllerımıza gidip kodlarımızı yazalım.

//HttpGet
public ActionResult UyeOl()
{
    return View();
}

//string kullaniciad ve sifre bizim formumuzda bulunan inputların namedir.
[HttpPost]
public ActionResult UyeOl(string kullaniciad, string sifre)
{
    //Basit olarak girilen verileri viewbag e atıp 
    //UyeOlView mizde gösteriyoruz.
    ViewBag.KullaniciAd = kullaniciad;
    ViewBag.Sifre = sifre;
    return View();
}

Ben basit olarak girilen ifadeleri ekrana yazdıracağım. Bunun için UyeOl view oluşturuyorum. Ve içerisine şu kodları yazıyorum.

<h2>Başarılı bir şekilde üye oldunuz. Tebrikler</h2>
<b>Kullanıcı Adınız:</b> @ViewBag.KullaniciAd <br />
<b>Kullanıcı Şifreniz:</b> @ViewBag.Sifre

Asp.net MVC üzerinde modal oluşturmayı ve kullanmayı göstermeye çalıştım..inşallah birilerin faydalanması dileğiyle...