You often need to update some portion of the code based on a user-triggered event or after a period of time. Usually, this isn’t possible unless the whole page is posted back which, however, is not the goal. We’ll take a look at a couple of solutions ASP .NET offers for such cases: UpdatePanel with Triggers and UpdatePanel with Timer.

UpdatePanel with Triggers

UpdatePanel is a commonly used server-side AJAX control. The UpdatePanel has the following syntax:

<asp:DropDownList ID="ddlMyList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlMyList_SelectedIndexChanged">
    <asp:ListItem Value="">Select an Item to Update</asp:ListItem>
    <asp:ListItem Value="Update First Text">Update First Text</asp:ListItem>
    <asp:ListItem Value="Update Second Text">Update Second Text</asp:ListItem>
</asp:DropDownList> 

<asp:UpdatePanel ID="upMyUpdatePanel" runat="server" UpdateMode="Conditional">  
    <ContentTemplate>  
        <asp:PlaceHolder ID="phFirstText" runat="server" Visible="false">
            <p>First text was just updated</p>
        </asp:PlaceHolder>
        <asp:PlaceHolder ID="phSecondText" runat="server" Visible="false">
            <p>Second text was just updated</p>
        </asp:PlaceHolder>  
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlMyList" EventName="SelectedIndexChanged" />
    </Triggers> 
</asp:UpdatePanel>

The logic inside the class looks like that:

protected void ddlMyList_SelectedIndexChanged(object sender, EventArgs e)
{
    phFirstText.Visible = ddlMyList.SelectedValue == "Update First Text";
    phSecondText.Visible = ddlMyList.SelectedValue == "Update Second Text";
}

The code will do the following:

  • At the beginning the drop down will show the default item “Select an Item to Update” and both panels containing text will be hidden;
  • Whenever the user selects another item from the drop down, the corresponding panel will become visible and the other one will become/remain hidden.

Things to note about the usage of UpdatePanel

  • Put inside the UpdatePanel only the code that will be updated. Any extra code in it may brake another logic;
  • When the triggering event is on a control that normally doesn’t automatically post back, AutoPostBack=”true” is required in order to trigger the UpdatePanel;
  • The updatable content is put inside the ContentTemplate property and the triggers are described inside individual trigger controls;
  • UpdateMode=”Conditional” (defaults to “Always”) sets the UpdatePanel to update only when the UpdatePanel or its parent UpdatePanel is triggered, or when the method upMyUpdatePanel.Update() is called. If set to “Always”, the panel will update with every postback originating from the page;
  • There are two types of triggers: AsyncPostBackTrigger and PostBackTrigger. The difference is that the first one will cause just a partial postback and not a full page postback;
  • Inside the trigger ControlID=”ddlMyList” and EventName=”SelectedIndexChanged” specify the control whose event triggers the panel and the name(type) of the event.

UpdatePanel with Timer

The Timer is a rarely used server-side AJAX that updates the UpdatePanel content every time a set number of milliseconds pass. For example:

<asp:UpdatePanel ID="upMyUpdatePanel" runat="server">  
    <ContentTemplate>  
        Current Time:  
        <asp:Label ID="lblTime" runat="server" Text=""></asp:Label>    
        <asp:Timer ID="tMyTimer" runat="server" Interval="3000" OnTick="tMyTimer_Tick"></asp:Timer>  
    </ContentTemplate>  
</asp:UpdatePanel>
protected void tMyTimer_Tick(object sender, EventArgs e)  
{  
    lblTime.Text = DateTime.Now.ToString();              
}

This code will update the text inside the label every 3 seconds displaying the current time.

Was this article helpful?