ASP.NET c#, jQuery ile Loading – Yükleniyor Mesajının gösterilmesi

Merhaba Arkadaşlar,

Dinamik web sayfalarında sayfa yüklenirken, sayfa içinde bir işlem yaparken özellikle de Asp.Net web formlarda postback işlemlerinde sayfa tekrar yüklenirken ekrana nasıl Loading yazısını ya da gif çıkartırız ondan bahsedeceğim. Bunu yapmak için bir çok yöntem vardır. Ben jQuery ile sadece mantık oalrak bu işlemi yapacağım.
Yapacağımız uygulamanın genel mantığı şöyle;

Sayfa yüklenirken Loading, yükleniyor mesajı çıkartmak için şöyle bir mantık izleyeceğim. İlk başta sayfamızı normal hazırlıyoruz. İçeriklerin olduğu kısım ilk başta display: none olarak geliyor ve bu sırada Loading penceremiz display:block olarak. Tüm dosyalar yüklendikten sonra jQuery ile içerikleri göstermek.
Sayfa içerisinde bir işlem yaptırdığımızda loading-yükleniyor mesajını çıkartmak için bir butona basıldığında ya da bir sayfaya yönlendiğinde aynı şekilde loading ekranımızı gösterdiyoruz sayfa değiştiğinde ya da postback olduğunda yeni açılan sayfada postback kayboluyor.

Kodlarımızda bazı kısıtlamalarda koyacağız. Örneğin klavyeden ctrl tuşu ile birlikte tıklamışsa sayfa yeni pencerede açılacak ve eğer biz kontrol etmezsek loading penceresi çıkacak ama sayfa yenilenmediği için hiç kaybolmayacak. Ya da sayfa içerisinde çıkarttığımız popuplarda da aynı kontrolü yapmamız gerekiyor. Popup yüklendiği halde loading -yükleniyor ekranı kaybolmayacak.
Aslında gördüğünüz gibi genel algoritmamız jQuery ve CSS ile alakalı olacak. Şimdi ufak bir örnek yaparak uygulamamızı daha iyi anlayalım. Projeyi Asp.NET Web forms’da yapacağım. Yeni bir proje oluşturuyoruz ve sırasıyla aşağıdaki gibi kodlarımızı yazıyoruz. Kodların ne anlama geldiklerini yanlarına açıklama olarak yazdım.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryLoading.Default" %>

jQuery Loading
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><%--jQuery kodlarını çalıştırabilmemiz için gereli kütüphaneyi ekliyoruz--%><script type="text/javascript" src="Content/myCode.js"></script><%-- javascript dosyamızı proemize ekliyoruz--%>
        <link href="Content/style.css" rel="stylesheet" /> <%--CSS dosyamızı dosyamıza entegre ediyoruz.--%></pre>
<form id="form1">
<div id="icerik"></div>
<div id="loading"><img alt="" src="Content/loading.gif" />

 Lütfen Bekleyin</div>
 </form>
<pre>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace jQueryLoading
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnCalistir_Click(object sender, EventArgs e)
        {
            for (int i = 0; i < 500000000; i++)
            {
                // sayfada loading mesajının görüntülenemsi için biraz gecikemsini sağlıyoruz. başka yöntemlerde kullanılabilir.
            }
            Response.Write("Çalıştırıldı");
        }
    }
}

// Bu kod bloğu sayfadaki tüm içerikler yüklendikten sorna çalışacaktır.
$(document).ready(function () {
    $("#icerik").show(); // bu kod bloğu çalıştığında tüm html kodları yüklendi demektir. artık içeriğimizi gösterip
    $("#loading").hide(); // loading mesajımızı kapatabiliriz.

    // sayfa postback olduğunda ya da herhangi bir url ye tıklanıldığında çalışacak kod bloğumuz

    $("input[type='submit'], a").click(function (sa) { // bu kod bloğu asp.net butonlarına ve a linklerine tıklanıldığında çalış demektir

        // tıklanılan nesne asp.net butonu ise ya da classı boş ise ya da engelli bir class değilse çalışıyor
        if (this.tagName == "INPUT" || this.className == "" || ($(this).attr("class").indexOf("engel1") == -1 && $(this).attr("class").indexOf("engel2") == -1 && this.tagName != "INPUT")) {
            if (sa.which != "2" && !sa.ctrlKey) { // mouse'un orta tuşuna basılmamışsa ya da ctrl tuşuna basılı değilse çalışıyor. Bu ayarı yapmazsak daha öncede bahsettiğim gibi sayfa yeni sekmede açılır ama loading mesajı gizlenmez
                    $("#loading").show();
                if (this.tagName == "INPUT") // eğer asp.net buton ise butona tıklanıldığında mesajda yazdırtabiliriz
                    $(this).val("Lütfen Bekleyin...");
            }
        }
        //javascript:__doPostBack
    });

    // dropdownlist nesnelelerinde de aynı şekilde loading mesajını verditebiliriz.
    $("select").change(function () {
        $("#loading").show();
        $(this).find('option:selected').text("Lütfen Bekleyin...");
    });

});

#icerik {
    display: none;
}

#loading {
    position: fixed;
    background: #F5E8E8;
    border: 1px solid #E4E4E4;
    padding: 20px;
    font-size: 20px;
    line-height: 10px;
    z-index: 99999999;
    top: 35%;
    width: 30%;
    left: 35%;
    text-align: center;
    box-shadow: 0px 0px 15px #DFDFDF;
    line-height: 20px;
    font-family: Arial;
}

Uygulamamızın ekran çıktısı

Uygulamanın çalışır halini indirmek için tıklayınız