Ajax UpdatePanel w/Progress Template and Triggers

  • Thread starter Thread starter Scott M.
  • Start date Start date
S

Scott M.

When setting up an UpdatePanel that utilizes a ProgressTemplate as well as
having non-child triggers (a trigger outside of the UpdatePanel), I get some
strange results (IE 7).

Clicking the trigger button that is outside of the UpdatePanel does trigger
the update, as it should, but the ProgressTemplate does NOT become visible.

Clicking a submit button that is a child of the UpdatePanel, does cause an
async. postback and the ProgressTemplate does appear, but the panel does not
update when the async. operation is completed. This is strange because the
panel has its ChildrenAsTriggers property set to False, so why would
clicking the child button cause the async. postback to occur?

Also, why would clicking the trigger (that is outside of the UpdatePanel)
cause the async. postback, but not cause the ProgressTemplate to show?

Here's the code:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// Simulate a long-running server task
System.Threading.Thread.Sleep(3000);

// Deliver results
lblNoAjax.Text = DateTime.Now.ToString();
lblAjax.Text = DateTime.Now.ToString();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Using UpdatePanel Triggers</title>
<link href="../Stylesheets/BasicStyles.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="lblNoAjax" runat="server"></asp:Label>

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="up1"
DisplayAfter="100" DynamicLayout="False">
<ProgressTemplate>...Update in progress...</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="up1" UpdateMode="Conditional"
ChildrenAsTriggers="false" runat="server">

<ContentTemplate>
<asp:Panel CssClass="up1" runat="server" ID="pan1">
<asp:Label ID="lblAjax" runat="server"></asp:Label>
<br />
<!-- THIS CAUSES THE PROGRESS TEMPLATE TO BECOME VISIBLE UNTIL
THE ASYNC POSTBACK IS COMPLETE, BUT THE UPDATEPANEL IS
NOT
UPDATED -->
<asp:Button ID="btnAjax" runat="server" Text="UpdatePanel Child"
/>
</asp:Panel>
</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" EventName="Click"
/>
</Triggers>

</asp:UpdatePanel>
<!-- THIS CAUSES THE ASYNC POSTBACK AND UPDATE TO OCCUR
BUT THE PROGRESS TEMPLATE DOESN'T SHOW -->
<asp:Button ID="btnTrigger" runat="server" Text="Trigger Button" />
</div>
</form>
</body>
</html>
 
Back
Top