Asp.net MVC – Popup Form, Ajax Popup Form

Merhaba arkadaşlar,
Bugün size Asp.net MVC projelerinde ekrana nasıl popup çıkartısınız, popup ile form açıp nasıl post edebilirsiniz anlatmaya çalışacağım.

Bugün benim anlatacağım örnek ile aşağıda ki gibi bir yapı oluşturacağız:

Popup nedir

Popuplar web sayfalarında ki açılır pencereler olarak gösterilir. Yani biraz .net masaüstü uygulamalarında ki messageBox.show(“”); elamanlarına birazda Dynamics Ax’ta ki Dialog’lara benzeyen yapılardır.

Bu küçük popuplar ile aynı sayfalar içinde işlemler yapabiliyoruz.

Popup form örneği;

Örnek Proje

1- Aşağıda ki kütüphaneler nuget manager aracağılı indirip kullanacağımız sayfalara include edilir.

jQuery.AjaxForm
jQuery.Form
jQuery.UI.Combined
jQuery.Validation
Microsoft.jQuery.Unobtrusive.Ajax
Microsoft.jQuery.Unobtrusive.Validation

Ben varsayılan şablonlu bir mvc projesi açıp, view altında ki _layout.cshtml kısmına scriptleri ekledim.

_layout.cshtml

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>
    <script src="~/Scripts/jquery.ajaxform.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
     	 	<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet">

2- Model hazırlanır

Geriye json döneceğiz o yüzden böyle bir model yaptım.

public class JsonModel
    {
        public bool IsSuccess { get; set; }
        public string JsonMessage { get; set; }
    }

Test işlemleri için kullanacağım Person modeli;

 public class Person
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

3- Controller işlemleri

Eğer adı semih ya da sem ise jsonla ilgili mesajları yazıp Json olarak dönüyoruz.
Burada methodu illa JsonResult olarak tanımlamımıza gerek yok, isterseniz yine ActionResult olarak tanımlayabilirsiniz, json olarak dönüş yapabilirsiniz.

[HttpPost]
        public JsonResult Index(Person person)
        {
            JsonModel jmodel = new JsonModel();

            if (person.FirstName == "Semih" || person.FirstName == "Sem")
            {
                jmodel.IsSuccess = true;
                jmodel.JsonMessage = "Kayıt başarılı.";
            }
            else
            {
                jmodel.IsSuccess = false;
                jmodel.JsonMessage = "Kayıt başarısız.";
            }

            return Json(jmodel, JsonRequestBehavior.AllowGet);
        }

4- View Hazırlanması

Önemli noktaları comment ile içeride açıklıyorum.

@model MvcAjaxPopupTest_1.Models.Person
@{
    ViewBag.Title = "Home Page";
}

@DateTime.Now.ToString()

<button id="modal-openner">Open dialog</button>



<div id="dialog-modal" title="Basic modal dialog">
    @* Ajax.BeginForm("ActionName,ControllerName, Ajax options {UpdateTargetId = 'formId',OnSuccess = 'Form post back olup bittikten sonra
        çalışacak javascript fonksiyonun adı'}") *@
    @using (Ajax.BeginForm("Index","Home", new AjaxOptions { UpdateTargetId="ID", OnSuccess= "onSuccessAjax" }))
    {


<div>


<fieldset>
                <legend>Account Information</legend>
                


<div class="editor-label">
                    @Html.LabelFor(m => m.FirstName)
</div>




<div class="editor-field">
                    @Html.TextBoxFor(m => m.FirstName)
                    @Html.ValidationMessageFor(m => m.FirstName)
</div>





<div class="editor-label">
                    @Html.LabelFor(m => m.LastName)
</div>




<div class="editor-field">
                    @Html.TextBoxFor(m => m.LastName)
                    @Html.ValidationMessageFor(m => m.LastName)
</div>



                
                    <input type="submit" value="Submit">
                
</fieldset>


</div>


    }
</div>



<script type="text/javascript">

        $(function () {
            $('#dialog-modal').dialog({
                autoOpen: false,
                widht: 300,
                height: 250,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });
            //modal-openner butonun ID'si, bu butona tıklandığında olacakları yazıyoruz.
            $('#modal-openner').click(function () {
                //Butona tıklandığında #dialog-modal ID'li kısmı popup olarak aç diyoruz.
                $('#dialog-modal').dialog('open');
            });
        });

    function onSuccessAjax(result) {
        //Tamama basıldığında #dialog-modal kapatılıyor.
        $('#dialog-modal').dialog('close');

        //Json'dan dönen mesaj trueysa falsesa yapılacakları yazıyorum.
            if (result.IsSuccess == false) {
                alert(result.JsonMessage);
            }
            else {
                alert(result.JsonMessage);
        }
        //-
        }
</script>

İşlemler bu kadar bunun sonucunda aşağıda ki gibi bir sonuç elde etmiş olmalısınız;

İlgili projeyi buradan indirebilirsiniz. Projeyi VS ile açıp start demeniz yeterli 🙂

Yararlandığım kaynaklar;
http://www.yildirimsoker.com/asp-net-mvc-dersleri-ajax-beginform-kullanimi/
https://www.youtube.com/watch?v=jpg_2vLAJxc
https://www.youtube.com/watch?v=RokXgBFSvp8

Umarım yardımcı olmuşumdur, kolay gelsin.