Bu makalenin Türkçe versiyonunu görmek için Tıklayınız
The postback process of web pages that are posted asynchronously, may not be noticed by the users. In this case the users may think that they could not post the page. So we had better to warn the users that the page is being processed. Moreover perhaps we should block the user not to do another operation until the current executing processed is finished.
This warning and block thing is called modal progress bar, modal progress message, modal progress notifier or whatever it is :)
We can do Modal progress in different ways. To make things clear, let me list the 3 steps we should accomplish;
1- To show the message when the page is posted back asynchronously: We can do this by showing the message that is hidden in the page. I will explain this step in detail in the coming lines.
2- To make the message to be modal: I think this is the most crucial but the simplest job. Because we can make the message modal by applying a few css settings on it. For example a DIV object that is covering all the page and having a big Z-Index can do it.
3- To hide the message: This is the opposite job of the first step. In this step we should hide the message after the page is reloaded after the asynchronous postback.
Practice
After examining the theory of the job lets do it. Our goal is to make a modal progress .. that seems as the below image.
 | | The html and the css used in this message is as follows;
<div id="myModalProgressContainer" class="ModalProgressContainer"> <div class="ModalProgressContent"> <img src="wait.gif" alt="İşleminiz devam ediyor." /><br /> <div >Lütfen bekleyiniz...<br />Please wait...</div> </div> </div>
The css that make the above html meaningful :) is as follows; .ModalProgressContainer
{z-index: 10005;position: fixed;cursor: wait; top: 0px;left: 0px;background-color: #d1d1d4; filter: alpha(opacity=50);opacity: 0.5;-moz-opacity: .50; height: 100%;width: 100%;}
ModalProgressContainer css class makes the myModalProgressContainer DIV cover the whole page as a gray layer and block the user not to do something we dont want.
.ModalProgressContent
{padding: 10px 10px 10px 10px; position: absolute; border: solid 0px #000040; text-align: center; vertical-align: middle; font-weight: bold; top: 49%; right: 48%; }
ModalProgressContent css class shapens the message at the center of the page. Surely, you dont need to use the above html and css. You can generate your own :) |
After understanding the UI parts (I mean html and the css) now lets look at the technics about how can we show and hide this message.
Method 1: In this way there is as UpdateProgress control that is available through the Ajax library, and this UpdateProgree control is attaced to the update panel via the AssociatedUpdatePanelID property. All the work is done by placing the above html into the <ProgressTemplate> template of the UpdateProgress. The UpdateProgress control will automatically do the underlying jobs for us.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
.....place the html written above...
<div id="myModalProgressContainer" class="ModalProgressContainer"> .............
</ProgressTemplate>
</asp:UpdateProgress>
Method 2: In this second way we will do all the show and hide jobs manually. Fot this we need the following javascript.
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(ShowProgressPanel);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(HideProgressPanel);
var progressPanel;
function HideProgressPanel(sender, args)
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='none';
}
function ShowProgressPanel(sender, args)
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='block';
}
</script>
Here we get the Sys.WebForms.PageRequestManager object via the Sys.WebForms.PageRequestManager.getInstance() method. And by using the add_beginRequest and add_endRequest methods of this PageRequestManager, we make the ShowProgressPanel to be called when the request begins and HideProgressPanel to be called when the request ends. As you can get from the names these functions show and hide the message.
Comparing
When we compare these 2 methods, surely the fisrt one is easier. But the second method we have the whole control over the process because we manage it. For example; there may be some cases like there may be 3-4 or more controls which may post the page and assume that we only want one or some of them to show the message. In this case we cannot use the first method because the UpdateProgress control will show the message automatically for all the controls. But it is possible for the second method. We can check which control is posting the page with the help of the args parameter sent by the PageRequestManager and available in ShowProgressPanel function. And so we can make a decision about showing or not showing the message.
This check may be performed as the following;
Method 3: Change the ShowProgressPanel function that we have seen in method 2 as the following;
function ShowProgressPanel(sender, args)
{
if(args.get_postBackElement().id == 'ctl00_cph_btnSave')
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='block';
}
}
Here we check whether the Id of the control begining the request is 'ctl00_cph_btnSave' or not. This Id is the client id value of the first button. As you see we have almost all the control aver the modal message.
For the last, I want you to notice the differences of the html' s used in methods 1, 2 and 3. In methods 2 and the myModalProgressPanel DIV object has a style of style="display: none". This is necessary because we make the panel-DIV invisible in these methods unlike the UpdateProgress did this job in method1. And when the page is loaded for the first time this style makes the DIV to be hidden.
The methods described in this article is in the attached project file.
myModalProgressWebApp.zip (320,12 kb)