October 2017 : Online course in ASP.NET MVC / Core. Conducted by Bipin Joshi. Read more...
Registration for October 2017 batch of ASP.NET MVC / Core online course has already started. Conducted by Bipin Joshi. Book your seat today ! Click here for more details.

Hide Web Form Contents until the

Hide Web Form Contents until the page is fully loaded

If your web forms consist of small amount of content they render quickly in the browser and user can start working with them almost immediately. However, when your web forms are bulky and render too much of content, the page is loaded in the browser slowly. Users can start using the partially loaded page and perform actions such as clicking on links or buttons. At times this is undesirable and you want users to wait till the complete page is loaded in the browser. You can accomplish this with the help of little client side script. Let's see how.

First of all, create a new ASP.NET web site and add a few controls on it. As an example, I am going to use a GridView that displays Customers table from the Northwind database.

You will be using jQuery code in this example so ensure that you have referred the jQuery library in the web form.

<script src="/scripts/jQuery.js" type="text/javascript"></script>

Next, wrap the entire contents of the web form inside a <DIV> element as shown below:

<div id="divContainer">
    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" ...>
    ...
    </asp:GridView>
</div>

 The <DIV> element has ID divContainer and it acts merely as a container to the GridView and SqlDataSource control.

Now, add a <script> block in the <head> section as shown below:

<script type="text/javascript">
    var divMsg = $("<div>Please wait...page is loading...</div>");
</script>

 Here, you are creating a new <DIV> element on the fly that has a wait message. Notice how the code stores the dynamically loaded element reference in a global variable. This way you can access the dynamically created <DIV> later in the code. This dynamically created <DIV> is added to the <body> of the page so that the end user sees its contents. To do so, add the following code just below the  <div id="divContainer"> markup:

<script type="text/javascript">
    $("body").append(divMsg);
    $("#divContainer").hide();
</script>

Here, the code uses jQuery append() method and appends the divMsg element to the body of the page. It then hides the divContainer element using hide() method. This way entire contents of divContainer i.e. GridView will be hidden from the end user and user will see only the wait message.

When the page is fully loaded you should show the divContainer and remove the dynamically added wait message. This is done in the ready() event handler as shown below:

<script type="text/javascript">
    var divMsg = $("<div>Please wait...page is loading...</div>");

    $(document).ready(function () {
        alert('Click OK to display page content');
        $("#divContainer").show();
        divMsg.remove();
    });   
</script>

 The code inside the ready() event handler calls show() method on the divContainer so that the GridView is visible. It then removes divMsg using remove() method. The alert() at the beginning of the code is just for the sake of testing and you can remove if required.

That's it! Run the web form and you should see something like this:

Notice how the GridView is yet to be displayed and how the wait message is displayed instead. Once you click on the OK button, GridView will be displayed and the wait message will disappear.

If you do not wish to display any wait message you can call hide() and show() methods on body element directly.

<head runat="server">
...
    <script type="text/javascript">
        $(document).ready(function () {
            alert('Click OK to display page content');
            $("body").show();
        });   
    </script>
</head>
<body>
    <script type="text/javascript">
       $("body").hide();
    </script>
    <form id="form1" runat="server">
...

In this case divContainer is not necessary. Remember, however, that till the page is not loaded completely the end user will see a blank browser window.

 


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Meditation and Mindfulness to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 04 January 2012


Tags : ASP.NET AJAX Web Forms jQuery JavaScript