.Net Special Support: How to use progress bar in page centre using JQuery in ASP.Net Ajax ?

//---- Direct copy - paste this code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.CS.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>Modal Popup Window</title>

    <script type="text/javascript" language="javascript">
        var ModalProgress = '<%= ModalProgress.ClientID %>';
    </script>

    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=50);
            opacity: 0.50;
        }
        .updateProgress
        {
            border-width: 1px;
            border-style: solid;
            background-color: #FFFFFF;
            position: absolute;
            width: 180px;
            height: 65px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <script type="text/javascript">
            //---- Note : This script don't define in header tag of the page.
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

            function beginReq(sender, args) {
                $find(ModalProgress).show();// shows the Popup
            }
            function endReq(sender, args) {
                $find(ModalProgress).hide();// shows the Popup
            }
        </script>

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
            <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
                <ProgressTemplate>
                    <div style="position: relative; top: 30%; text-align: center;">
                        <img src="loading.gif" style="vertical-align: middle" alt="Processing" />
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </asp:Panel>

        <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
            BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />

        <asp:UpdatePanel ID="updatePanel" runat="server">
            <ContentTemplate>
                <asp:Button runat="server" Text="Click Me" ID="btnSubmit" OnClick="btnSubmit_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

//------------------- cs code ----------------------------------

protected void btnSubmit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(4000);
       //------ if you want to dynamically call (Model Popup) then comment above line please.
    }

.Net Special Support

Thursday, 23 June 2011

How to use progress bar in page centre using JQuery in ASP.Net Ajax ?

No comments:

Post a Comment