CODEWITHSUNDEEP
c#asp.net
user3464847
user3464847

Reputation: 7

Freeze background page while page is loading

I want that if my textbox is empty then field validator show an error messeage and if textbox is not empty then page is frozen while loading on button click.

ASPX Code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <style type="text/css">

        .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;
        }    
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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);
        }
        $('form').live("submit", function (){
            ShowProgress();
        });
    </script>
    <asp:Label ID="Label1" runat="server" Text="Roll No : "></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
    </div>
    </asp:Content>

I am using visual studio 2010 ASP.Net/C#

Upvotes: 0

Views: 7970

Answers (2)

E-Magno
E-Magno

Reputation: 71

My approach was similar to the other answer, but I didn't use the BlockUI plugin.

First I created the invisible overlay in the CSS file:

#page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

Then, I added the Javascript code:

var PageRequestManager = Sys.WebForms.PageRequestManager.getInstance();

function BlockUI(sender, args) {
    jQuery('<div id="page-overlay"> </div>').appendTo(document.body);
}

function UnblockUI(sender, args) {
    jQuery('#page-overlay').remove();
}

PageRequestManager.add_beginRequest(BlockUI);
PageRequestManager.add_endRequest(UnblockUI);

And, voilà, it worked!

Upvotes: 1

Dave Rob
Dave Rob

Reputation: 46

You could try the page blocking functionallity of jQuery BlockUI

I use it combined with the ASP.Net UpdatePanel so I can block the ui on every postback.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
    try {

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
    } catch (e) {

    }

    function beginRequest(sender, args) {

        $.blockUI({
            message: $("<div>Please wait...loading!!!</div>"),
            overlayCSS: { backgroundColor: '#00FFFF' }
        });
    }

    function endRequest(sender, args) {
        $.unblockUI();
    }
</script>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Test with this" /></ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Upvotes: 2

Related Questions