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

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

jquery

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.

[sourcecode language=”html” title=”ASPX HTML Kodları”] <%@ 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>

[/sourcecode] [sourcecode language=”csharp” title=”c# Kodlarımız”] 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ı");
}
}
}
[/sourcecode] [code lang=”js” title=”jQuery Kodlarımız”]

// 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…");
});

});
[/code] [css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”CSS Kodlarımız”] #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;
}
[/css]

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

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

About Samet Gonez

İlginizi Çekebilir

Go Programlama Diline Genel Bakış

Merhabalar, Yazılım dünyasında yeni bir teknoloji öğrenirken geliştiricinin ilk görmek istediği şey teknolojiye yukarıdan bir …

6 comments

  1. sayfa post back olmadan yükleniyor yazısını nasıl kaldırcaz.yükarıdaki yazıda bahs etmissin ama nasıl yapılacagına değinmemissin.

  2. Bu loading uygulamasının mantığı sayfa postback olunca kaybolmasıdır. Siz yapmak istediğinizi yazarsanız daha iyi yardımcı olmaya çalışırım.

  3. bazı sayfalarımda postback yapmıyorum.bu sayfalarda butonlarda sorun yok ama yükleniyor yazısı kaybolmuyor.
    jquery ile yükleniyor yazısını çıkartmasak da işimi görür.ama sadece istediğim sayfada çıkmıcak.

  4. hangi butonda loading olayını çalışmasını istemiyorsanız ona bir class verip onu kontrol etmelisiniz. Örneğin Yazdır butonunuz olsun ve buna tıkladığında loading olayının çalışmaması için Yazdır butonunun class özelliğine örneğin loadingsiz ismi veri daha sonra if (sa.which != “2” && !sa.ctrlKey) satırına if (sa.which != “2” && !sa.ctrlKey && this.class != “loadingsiz”) şeklinde değiştirdiğinizde loading olayımız çalışmayacaktır.

  5. html kısmı
    if (this.className != “engel” || this.class != “engel”) { javascrip kısmı

    bu kod çalışmıyor.yardımcı olurmusun

  6. html kısmında li etiketinde class=”engel” özelliliiği var.yukarıda çıkmamış

Bir Cevap Yazın