locked
ASP.Net page loading and hiding RRS feed

  • Question

  • I need to display page loading and should stop and quit the page once server side function call is complete:

          

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
        .modal
        {
            ;
            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: 250px;
            height: 75px;
            display: none;
            ;
            background-color: White;
            z-index: 999;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery.min.-1.8.3.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                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);
        }

        $(document).ready(function () {
            ShowProgress();
        });

    </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <div class="loading" style="text-align:center">
            <br />
            Please wait while loading the page ...<br /><br />
            <img src="Images/ajax-loader-bluehorizontal.gif" />
        </div>
        </form>
    </body>
    </html>

    Code behind:

                                        

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

                      DoNothing();
                    //hide animation once server side function call is over
                    Response.Write("<script language='javascript>$('loading').hide();</script>'");
                    //close the page once everything is completed
                    Response.Write("<script language='javascript'>window.open('', '_self', '');self.close();</script>");

                }    



            }

            private void DoNothing()
            {

                //add delay till quote is generated
                System.Threading.Thread.Sleep(5000);
                long j;
                for(long i=1;i<long.MaxValue;i++)
                {
                    j = i;

                }
            }

    • Moved by Kristin Xie Thursday, November 13, 2014 9:05 AM
    Wednesday, November 12, 2014 1:51 PM

Answers

  • Sorry, why do you need this?

         DoNothing();
                    //hide animation once server side function call is over
                    Response.Write("<script language='javascript>$('loading').hide();</script>'");
                    //close the page once everything is completed
                    Response.Write("<script language='javascript'>window.open('', '_self', '');self.close();</script>");

    If you need transitions and effects, try this example:

    <html>
    <head>
    <title>JQuery Page Loading Effect</title>
     
    <script type="text/javascript" src="jquery.js"></script>
     
    </head>
     
    <script type="text/javascript">
     
    $(document).ready(function(){
     
    	$('#page_effect').fadeIn(2000);
     
    });
     
    </script>
    <body>
     
    <div id="page_effect" style="display:none;">
     
    <h1>JQuery Page Loading Effect</h1>
     
        This is page loading effect with JQuery 1<BR>
        This is page loading effect with JQuery 2<BR>
        This is page loading effect with JQuery 3<BR>
        This is page loading effect with JQuery 4<BR>
        This is page loading effect with JQuery 5<BR>
        This is page loading effect with JQuery 6<BR>
        This is page loading effect with JQuery 7<BR>
        This is page loading effect with JQuery 8<BR>
        This is page loading effect with JQuery 9<BR>
        This is page loading effect with JQuery 10<BR>
        This is page loading effect with JQuery 11<BR>
        This is page loading effect with JQuery 12<BR>
        This is page loading effect with JQuery 13<BR>
        This is page loading effect with JQuery 14<BR>
    </div>
     
    </body>
    </html>

    http://www.mkyong.com/jquery/page-loading-effects-with-jquery/

    • Proposed as answer by Andy ONeill Wednesday, November 12, 2014 2:38 PM
    • Marked as answer by Just Karl Tuesday, December 23, 2014 10:15 PM
    Wednesday, November 12, 2014 2:08 PM
  • Th ASP.NET forum is where you should post.

    http://forums.asp.net/

    • Proposed as answer by Just Karl Wednesday, November 26, 2014 9:21 PM
    • Marked as answer by Just Karl Tuesday, December 23, 2014 10:15 PM
    Wednesday, November 12, 2014 2:19 PM

All replies

  • Sorry, why do you need this?

         DoNothing();
                    //hide animation once server side function call is over
                    Response.Write("<script language='javascript>$('loading').hide();</script>'");
                    //close the page once everything is completed
                    Response.Write("<script language='javascript'>window.open('', '_self', '');self.close();</script>");

    If you need transitions and effects, try this example:

    <html>
    <head>
    <title>JQuery Page Loading Effect</title>
     
    <script type="text/javascript" src="jquery.js"></script>
     
    </head>
     
    <script type="text/javascript">
     
    $(document).ready(function(){
     
    	$('#page_effect').fadeIn(2000);
     
    });
     
    </script>
    <body>
     
    <div id="page_effect" style="display:none;">
     
    <h1>JQuery Page Loading Effect</h1>
     
        This is page loading effect with JQuery 1<BR>
        This is page loading effect with JQuery 2<BR>
        This is page loading effect with JQuery 3<BR>
        This is page loading effect with JQuery 4<BR>
        This is page loading effect with JQuery 5<BR>
        This is page loading effect with JQuery 6<BR>
        This is page loading effect with JQuery 7<BR>
        This is page loading effect with JQuery 8<BR>
        This is page loading effect with JQuery 9<BR>
        This is page loading effect with JQuery 10<BR>
        This is page loading effect with JQuery 11<BR>
        This is page loading effect with JQuery 12<BR>
        This is page loading effect with JQuery 13<BR>
        This is page loading effect with JQuery 14<BR>
    </div>
     
    </body>
    </html>

    http://www.mkyong.com/jquery/page-loading-effects-with-jquery/

    • Proposed as answer by Andy ONeill Wednesday, November 12, 2014 2:38 PM
    • Marked as answer by Just Karl Tuesday, December 23, 2014 10:15 PM
    Wednesday, November 12, 2014 2:08 PM
  • Th ASP.NET forum is where you should post.

    http://forums.asp.net/

    • Proposed as answer by Just Karl Wednesday, November 26, 2014 9:21 PM
    • Marked as answer by Just Karl Tuesday, December 23, 2014 10:15 PM
    Wednesday, November 12, 2014 2:19 PM
  • I need to call a server side function and once the function call is over page loading animation to be stopped.
    Thursday, November 13, 2014 5:59 AM
  • Do I need to explicitly post it there?!
    Thursday, November 13, 2014 5:59 AM
  • Hi Raj,

    If Deric Ferreira's reply doesn't solve your issue.

    As darnold924 said, You'll need to post it in the dedicated ASP.Net Forum http://forums.asp.net
    for more efficient responses, where you can contact ASP.NET experts.Thanks for your understanding.

    Best reagrds,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    • Edited by Kristin Xie Thursday, November 13, 2014 9:06 AM
    Thursday, November 13, 2014 9:04 AM
  • My query has not been answered hence I am posting to asp.net forum.

    Thanks indeed for all your directions.

    Thursday, November 13, 2014 9:58 AM
  • OK Raj,

    "I need to display page loading and should stop and quit the page once server side function call is complete:"

    So, What do you need is an Ajax call? Control the State on the Server Side? Are you trying to do?

    Thursday, November 13, 2014 11:53 AM
  • OK Raj,

    "I need to display page loading and should stop and quit the page once server side function call is complete:"

    So, What do you need is an Ajax call? Control the State on the Server Side? Are you trying to do?

    Thursday, November 13, 2014 11:55 AM