Request Processing / Loading Effect With ASP.NET

Sometimes we browse web applications and due to some reason, it takes more time to load the page. At the time of the loading page, it shows a blank (white page) in browse to the user. Some users seeing a delay in page load, close the browser because they are not able to see anything. To avoid this, the browser will say the page with loading effect please wait. Here we will discuss how can we accomplish this.

Add the following method in c-sharp code:


protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      disLoding();
   }
}

private void disLoding()
{
    string script = “$(document).ready(function () { $(‘[id*=btnLoadDc]‘).click(); });”;
    ClientScript.RegisterStartupScript(this.GetType(), “load”, script, true);
    string sscript = “$(document).ready(function () { $(‘[id*=btnSearch]‘).click(); });”;
    ClientScript.RegisterStartupScript(this.GetType(), “load”, sscript, true);
}

private void loding()
{
    System.Threading.Thread.Sleep(500);
}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

disLoding();

}

private void disLoding()

{

string script = “$(document).ready(function () { $(‘[id*=btnLoadDc]‘).click(); });”;

ClientScript.RegisterStartupScript(this.GetType(), “load”, script, true);

string sscript = “$(document).ready(function () { $(‘[id*=btnSearch]‘).click(); });”;

ClientScript.RegisterStartupScript(this.GetType(), “load”, sscript, true);

}

private void loding()

{

System.Threading.Thread.Sleep(500);

}

Add the following method in aspx code:


<pre>
     <div class="”loading”" align="”center”">Loading. Please wait.
     <img src="”Images/loader.gif”" alt="Please Wait..." /></div>
</pre>

<pre>

<div class="”loading”" align="”center”">Loading. Please wait.

</pre>

Add the following method in CSS code:


.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

.modal

{

position: fixed;

top: 0;

left: 0;

background-color: black;

z-index: 99;

opacity: 0.8;

filter: alpha(opacity=80);

-moz-opacity: 0.8;

min-height: 100%;

width: 100%;

}

.loading

{

font-family: Arial;

font-size: 10pt;

border: 5px solid #67CFF5;

width: 200px;

height: 100px;

display: none;

position: fixed;

background-color: White;

z-index: 999;

}

Add the following method in jQuery code:


<div class="entry-content">
    function ShowProgress() {
       setTimeout(function () {
          var modal = $(‘’);
          modal.addClass(“modal”);
          $(‘body’).append(modal);
          var loading = $(“.loading”);
          loading.show();
    
          var top = Math.max($(window).height() / 2 – loading[0].offsetHeight / 2, 0);
          var left = Math.max($(window).width() / 2 – loading[0].offsetWidth / 2, 0);
          loading.css({ top: top, left: left });
       }, 200);
    }
    $(‘form’).live(“submit”, function () {
    ShowProgress();
 });
</div>