Freelancer.com

How to make ModalUpdate Progress Bar on page?

How to make ModalUpdate Progress Bar on page?

1. Generate the ModalUpdate Progress bar when a button is triggered.

UpdateProgress can help us to build "page loading" progress on the page. But some times we want the page loading is popped up above the page and disable the background of page. Check the below image. In this way, we can use AjaxControlToolkit ModalPopup to achieve it.

1

Try the below sample code to achieve Modalupdate progress.

Firstly, you need download & install AjaxControlToolKits : http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Default.aspx

<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>

onclick="loginButton_Click" />




Put the control which needs to update here, such as GridView.












BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
RepositionMode="RepositionOnWindowScroll" >

Loading...

protected void loginButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);//For testing.
programmaticModalPopup.Hide();

}


(You can change the css style or add an image into programmaticPopup instead of "Loading".)

With this sample, we need assign the specific control to raise the ModalUpdateProgress.

2. How can we pop up the ModalUpdateProgress bar while each request is posted and each control is triggered?

On assuming that you have a GridView. And when the request is from GridView, it will generate popup panel to display "loading".




Beside this code, you need a ModalPopup to show the Loading message.