JQueryUI Modal İle Mvc AJax Loader

Web uygulamalarında asenkronAsynchronous işlemler yapılırken kullanıcıya durum boyunca bilgi vermenin 500 farklı yolu mutlaka vardır. Lakin en temiz olanı, tüm ekranı kapatıp tam ortada bildirimi yapmakmış gibi gözüküyor. Bunun en büyük avantajı “istenmeyen tıklamalar” dan korunmak olarak izah edebilir.

Bunun için JQueryUI elemanWidget larından Dialog‘u kullanacağız. Hali hazırda MVC Proje Template içinde bulunduğu için işimiz gayet kolay olacak.

Queryui solution explorer

_Layout ile başlayalım;

Head içine sırası ile css ve js dosyalarını ekleyelim.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>

Dialog açıldığında kullanıcı tarafından kapatılmasını engellemek için sağ üst köşedeki “x” kapatı işaretini kaldıralım.

<style type="text/css">
.ui-dialog-titlebar-close {
    display: none;
}
</style>

Dialog için kullanılacak div tanımını yapalım.

<div id="dialog-modal" title="Bilgilendirme">
    <p>
        <img src="/Content/images/loading.gif.jpgx" style="vertical-align: middle;" />
        işlem yapılıyor ...
    </p>
</div>

Div’ i Dialog haline getirelim.

<script type="text/javascript">
    $(function () {
        $("#dialog-modal").dialog({
            autoOpen: false,
            modal: true,
            height: 100,
            closeOnEscape: false,
            draggable: false,
            resizable: false
        });
    });
</script>

Son olarak, çağrıda bulunacak alt sayfaların da kendi script bloklarını yazacakları Section‘ı tanımlayalım.

@RenderSection("script", false)

Alt sayfalardaki script alanına iki adet fonksiyonfunction ekliyoruz. Asenkron işlem başladığında ve bittiğinde Dailog açılacak ve kapanacak.

<script type="text/javascript">
    function start() {
        $("#dialog-modal").dialog('open');
    }
    function finish() {
        $("#dialog-modal").dialog('close');
    }
</script>

AjaxOptions sınıfclass ını da tanımlarsak işlem tamamlanmış olacak.

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
    HttpMethod = "post",
    OnBegin = "start",
    OnSuccess = "finish"
}))

Loading gif