(or,
why my RadioButton which has AutoPostBack=”true” actually doesn’t display my UpdateProgress
or even perform a PostBack at all?!)
My fellow colleague Yitzhak Steinmetz has been playing around with Ajax capabilities and controls.
He came across some interesting scenarios, I was allowed to post his details here in my blog, so here it is:
While writing a webpage, I ran
into an interesting (gently phrased) quirk with ASP.NET AJAX.
To simplify the problem, imagine
the following scenario:
I have 2 RadioButtons, an
UpdatePanel, and an UpdateProgress on a page. The RadioButtons are outside the
UpdatePanel, but are supposed to trigger a partial PostBack of the UpdatePanel,
and of course display the UpdateProgress.
My code (relevant parts) looks
like this:
Defauls.aspx.cs
protected void Page_Load(object
sender, EventArgs e)
{
if (this.IsPostBack)
Thread.Sleep(3000);
this.lblTime.Text
= DateTime.Now.ToLongTimeString();
}
Defauls.aspx
<asp:ScriptManager ID="ScriptManager1"
runat="server"
/>
<asp:RadioButton ID="btn1" runat="server"
Text="1"
GroupName="MyGroup1"
AutoPostBack="true"
Checked="true"
/>
<asp:RadioButton ID="btn2" runat="server"
Text="2"
GroupName="MyGroup1"
AutoPostBack="true"
/>
<asp:UpdateProgress ID="MyUpdateProgress"
runat="server"
AssociatedUpdatePanelID="MyUpdatePanel">
<ProgressTemplate>
<h1>Loading</h1>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="MyUpdatePanel"
runat="server"
ChildrenAsTriggers="false"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger
ControlID="btn2"
EventName="CheckedChanged"
/>
</Triggers>
</asp:UpdatePanel>
Run
this code and you’ll see a few unexpected behaviours:
The UpdatePanel performs a partial a PostBack only when clicking the
second RadioButton and the UpdateProgress is never displayed (even when
we do perform a partial PostBack).
Clicking
the second RadioButton, we see that after 3 seconds the time on the page chages.
If now we click the first RadioButton, nothing happens, and if we click the
second RadioButton again, nothing happens.
Removing
the Checked="true" from the first RadioButton solves the PostBack issue,
but still doesn’t display the UpdateProgress. This isn’t really a solution,
since we want the RadioButton to be checked when the page initlaly loads.
In
come smarx.com with a simple, yet annoying solution (the annoying part isn’t
their fault J):
Adding
the following code to your page (with minor relevant changes) will display the
UpdatePanel correctly (If adding this script the way it is doesn’t work, try
adding a handler for OnLoad of the <body> element and pasting it in
there):
<script
type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args)
{
var postBackElementID =
args.get_postBackElement().id;
if (postBackElementID == '<%=
this.btn1.ClientID %>')
{
$find('<%= this.uprogPageContents.ClientID %>').get_element().style.display
= 'block';
return;
}
if (postBackElementID == '<%=
this.btn2.ClientID %>'))
{
$find('<%= this.uprogPageContents.ClientID %>').get_element().style.display
= 'block';
return;
}
}
</script>
This
solution solves the UpdatePanel issue, but still doesn’t solve the issue with
the first RadioButton not posting back to the server.
After
much research and a few conults, the only solution I found to this issue is moving
both RadioButtons into the UpdatePanel (you can give up on the earlier
mentioned handler if you implement this).
Please
note that the second solution is needed only in the case of a RadioButton
outside of the UpdatePanel. If you have a different control outside the
UpdatePanel (a button for instance), you can leave it where it is and simply
add the script mentioned in the first solution.
I
know this solution isn’t perfect, but it’s the best I could find.
If
you can do better, please leave a comment.
P.S.
Credit
should be given to 2 posts which set me on the path to the solutions (I
recommend reading them for further understanding):
The
UpdateProgress solution
The
AutoPostBack solution