Highlight button during Asynchronous PostBack
If you don’t want to use UpdateProgress during Asynchronous Postback from UpdatePanel, there is an idea to highlight the button that fire
the Asynchronous inside UpdatePanel.
To start in that approach you must be familiar with PageRequestManager
class and it's events , PageRequestManager registered by ScriptManager .With PageRequestManager you can manages partial-page
rendering in the browser. On other hand you can’t
access PageRequestManager event’s directly, just you can access it through getInstance method.
The most
popular events as well I use it in my example here are beginRequest and endRequest events.
beginRequest : The beginRequest event is
raised before the processing of an asynchronous postback starts ..
endRequest: Raised after an asynchronous
postback is finished and control has been returned to the browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server" />
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(update_begin);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(update_end);
var btn = null;
var Counter = 0;
var timer;
function MyTimer() {
Counter++;
if (Counter % 2 == 0)
btn.style.background = "#dddddd";
else
btn.style.background = "#eeeeee";
timer = window.setTimeout("MyTimer()", 500);
}
function ClearTimer() {
window.clearTimeout(timer);
Counter = -1;
btn.style.background = "#dddddd";
}
function update_begin(sender, args) {
btn = args.get_postBackElement();
MyTimer();
}
function update_end() {
ClearTimer();
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSubmit1" runat="server" Text="Submit 1" BackColor="#dddddd" OnClick="btnSubmit1_Click" />
<asp:Button ID="btnSubmit2" runat="server" Text="Submit 2" BackColor="#dddddd" OnClick="btnSubmit2_Click" />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html
If you don’t want to use UpdateProgress during Asynchronous Postback from UpdatePanel ,There is an idea to highlight the button that fire the Asynchronous inside UpdatePanel.
To start with this approach, you must be familiar with PageRequestManager class and its events , PageRequestManager is registered by ScriptManager. With PageRequestManager you can manages partial-page rendering in the browser.
On the other hand, you can’t access PageRequestManager events directly, only it can be accessed by getInstance method.
The most popular events that I will use in the following example are beginRequest and endRequest events.
beginRequest:Raised before the processing of an asynchronous postback starts.
endRequest: Raised after an asynchronous postback is finished and control has been returned to the browser.
Now lets take a look to the example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm1" runat="server" />
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(update_begin);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(update_end);
var btn = null;
var Counter = 0;
var timer;
function MyTimer() {
Counter++;
if (Counter % 2 == 0)
btn.style.background = "#dddddd";
else
btn.style.background = "#eeeeee";
timer = window.setTimeout("MyTimer()", 500);
}
function ClearTimer() {
window.clearTimeout(timer);
Counter = -1;
btn.style.background = "#dddddd";
}
function update_begin(sender, args) {
btn = args.get_postBackElement();
MyTimer();
}
function update_end() {
ClearTimer();
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSubmit1" runat="server" Text="Submit 1" BackColor="#dddddd" OnClick="btnSubmit1_Click" />
<asp:Button ID="btnSubmit2" runat="server" Text="Submit 2" BackColor="#dddddd" OnClick="btnSubmit2_Click" />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
In code behind :
protected void btnSubmit1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2400);
lblMessage.Text = "You Press button 1";
}
protected void btnSubmit2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
lblMessage.Text = "You Press button 2";
}
In the previous example, we knew which element caused the Asynchronous PostBack by args.get_postBackElement(), In this way you can get the Control ID throw args.get_postBackElement().id. And you can catch if the control which cased the Asynchronous PostBack not a button, in case your UpdatePanel contain many controls which cause Asynchronous PostBack.
On the other hand you can use your own style to highlight your controls.
The last note here that I add System.Threading.Thread.Sleep(3000); to the Click handler, which artificially creates a three-second delay and then displays the button Highlighted.
Hope this help and If you have any comments, please feel free to write your feedback.