C# AJAX UpdateProgress Block Screen Popup

Posted on Posted in AJAX, ASP.NET, C#, Programming

ASP.NET AJAX is a powerful tools that you can utilize, many feature that can bring the power of your interactive desktop to your web browser. In this blog I’m will be showing you how to create a Popup with block screen when execute a time consuming function that relay on the server-side, this is done by using the standard ASP.NET AJAX using the UpdateProgress that is associate with an UpdatePanel.

Here in this example I will use a button control for the user to start executing the function, which call server-side code that use Thread to sleep for 3 seconds and update a Label in the UpdatePanel telling the user that the time consuming function has now been executed.

My UpdateProgress control will utilize two DIV html tag, 1) for the content and 2) for the transparent opacity background. As you can see from my code below, that my background DIV tag is inject with JavaScript codes, this is because I don’t want the DIV to get in my way with I’m editing my IDE (Visual Studio or Expression Web) which can be annoying. Both DIV Tag use CSS to style itself, this took me something to get the popup to center without any programmingJ.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "UpdateProgress executed";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET C# AJAX UpdateProgress with block screen Popup Loading</title>
<style type="text/css">
        .UpdateProgressContent{
            padding: 40px;
            border: 1px dashed #C0C0C0;
            background-color: #FFFFFF;
            width: 200px;
            text-align: center;
            vertical-align: bottom;
            z-index: 1001;
            top: 40%;
            margin:0px;
            margin-left:-141px;
            position: absolute;
        }
    .UpdateProgressBackground
    {
    	margin:0px;
    	padding:0px;
    	top:0px; bottom:0px; left:0px; right:0px;
    	position:absolute;
    	z-index:1000;
    	background-color:#cccccc;
    	filter: alpha(opacity=70);
    	opacity: 0.7;
    }
    </style>

</head>
<body>
<form id="form1" runat="server">
<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Execute UpdateProgress Popup"
                    onclick="Button1_Click" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <script type="text/javascript">document.write("<div class='UpdateProgressBackground'></div>");</script>
                <center><div class="UpdateProgressContent">Loading...</div></center>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
</form>

</body>
</html>

I hope you enjoy my post.