Thursday, March 11, 2010

AJAX with Continuous Progress Bar

AJAX with Continuous Progress Bar
Progress Bar to work in ASP.Net.
I have my Button, the ModalPopupExtender, the Panel that the extender will display, the Script Manager, and a hidden control.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Button ID="btnSubmit" onclick="btnSubmit_Click" OnClientClick="StartProgressBar()"
                     runat="server" Text="Submit Time" Width="170px" />

            <ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                     BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
                     TargetControlID="hiddenField" PopupControlID="Panel1" />

            <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
                 <img src="progressbar.gif" alt="" />

            <asp:HiddenField ID="hiddenField" runat="server" />

Also notice that the Button has both of the click events populated. The onclick event will be the server-side event handler.

protected void btnSubmit_Click(object sender, EventArgs e)

The OnClientClick event will be calling a javascript function..

<script language="javascript" type="text/javascript">
        function StartProgressBar() {
                var myExtender = $find('ProgressBarModalPopupExtender');
                return true;


Add link to your Head tag

<link href="main.css" rel="stylesheet" type="text/css" />

Then add this entry to the CSS file.


        -khtml-opacity: 0.5;
        opacity: 0.5;