Asp.Net Ajax UpdatePanel Control Example [Ajax Tutorial]

Update Panel is used to update the partial portion of the web page. It has two sub elements :

1. ContentTemplate – used to specify the content need to update partially

2. Triggers

a. AsyncPostBackTrigger - used to associate a control outside update panel that will trigger the asynchronous postback.

Whatever content we keep under the ContentTemplate, all are sent to the server when a partial post back happens. So if we have kept the button that is causing the partial postback also in the ContentTemplate that button code also goes to the server, however that is not required. In order to avoid this kind of scenario, we can keep the button outside the update panel and keep only those elements inside update panel that is really required to send the request the get the response. However the outside button can be associated with the UpdatePanel using AsyncPostBackTrigger.

AsyncPostBackTrigger accepts two parameters
ControlID – the id of the element (button) that is associated with the UpdatePanel
EventName – the name of event which is used to trigger the postback

b. PostBackTrigger – used to associate a control inside UpdatePanel that will trigger the postback instead of asynchronous postback.

Demo Example

In oreder to create demo, first create the UpdatePanelSimple.aspx page and add below code.

 <asp:ScriptManager runat="server" ID="SM1" />
        <h4>Inside UpdatePanel</h4>
        click on the Submit button and notice that on this time will update.
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblUpdatePanel" runat="server" EnableViewState="false" /> <br />
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="RefreshTheTime" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <h4>Outside UpdatePanel</h4>
        <asp:Label ID="lblOutSideUpdatePanel" runat="server" EnableViewState="false" />

Now add below code to UpdatePanelSimple.aspx.cs page

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblOutSideUpdatePanel.Text = DateTime.Now.ToString();
            lblUpdatePanel.Text = DateTime.Now.ToString();
        }
    }
    protected void RefreshTheTime(object sender, EventArgs e)
    {
        // throw new Exception("Error occured.");
        lblUpdatePanel.Text = DateTime.Now.ToString();
    }