• Ajax Update Panel Control in ASP.NET

    Posted on April 30, 2012 by in ASP.NET, C#, Dotnet

    The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience.

    Where can I download AJAX Controls tool kit?
    You can download Ajax Control Tool Kit from the following link.
    Download AJAX Toolkit

    How to install tool kit and add controls to my toolbox in Visual Studio?
    http://www.asp.net/ajaxlibrary/act.ashx

    How do I Register these AJAX Controls?
    Register the AjaxControlToolkit at the top of the page (or in the web.config for the whole project)

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

    What is Script Manager?
    The ScriptManager makes sure that the required ASP.NET AJAX files are included and that AJAX support is added, and has to be included on every page where you wish to use AJAX functionality.

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    Update Panel:
    UpdatePanel control is used to refresh only the part of the page that has changed, without the page flash that occurs with a postback. This is referred to as a partial-page update. UpdatePanel makes it extremely easy to take all that flashing and flickering that occurs when an ASP.NET page posts back to the server and turn it into smooth, flicker-free updates. UpdatePanel works its magic by converting postbacks into asynchronous callbacks (XML-HTTP requests) and using JavaScript on the client to refresh the part of the page encapsulated by the UpdatePanel control. The flashing and flickering goes away because the browser doesn’t repaint the page as it does during a postback.

    Simple Example:
    Create a simple ASP.NET application. Open Default.aspx page in design mode and register your Ajax tool kit as explained above. Next, add the “Script Manager” control to the page as described above.  All we are doing in our first example is to update the text of the Label with last updated date when user clicks on the “Update” button. You would notice that there is no flickering on the screen anymore, as page is not getting repainted.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Example using Update Panel</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel runat="server" id="UpdatePanel”>
                <ContentTemplate>
                    <asp:Label runat="server" id="lblText" Text="Initial Text" />
                    <br />
                    <asp:Button runat="server" id="btnUpdate"
    onclick="btnUpdate_Click" text="Update" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>
    

    Click on the Update button continuously and you would notice that label text is changed instantaneously.

    Refresh the panel by using External Button:
    By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen. You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.

    lblText” is inside the UpdatePanel and “lblText2” and “btnUpdate” are outside the panel. As you can see, the UpdatePanel carries a trigger which references the external button. This will ensure that the panel is updated even when a control outside the UpdatePanel is used. The AsyncPostBackTrigger tag is pretty simple – it only takes two attributes, the ControlID, a reference to the control which can trigger it, and the eventname, which tells which eventtype can cause the trigger to fire. If you wish for the content of an UpdatePanel to be updated no matter what, you may change the UpdateMode property to Always.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server">
        protected void btnUpdate_Click(object sender, EventArgs e)
        {
            lblText.Text = "You have updated the label on: " +
    DateTime.Now.ToString();
            lblText2.Text = "You have updated the label on: " +
    DateTime.Now.ToString();
        }
    
        </script>
    <head id="Head1" runat="server">
        <title>Refresh Update Panel using External Control</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server" id="UpdatePanel" UpdateMode="Conditional">
       <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnUpdate" eventname="Click"/>
        </Triggers>
        <ContentTemplate>
            <asp:Label runat="server" id="lblText" Text="Label 1 Initial Text" />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Label ID="lblText2" runat="server" Text="Label 2 Initial Text" /><br />
    <asp:Button runat="server" id="btnUpdate" onclick="btnUpdate_Click"
                text="External Button" />
    
    </form>
    </body>
    </html>
    

    If user clicks on the “External Button”, even though you are setting the text of both labels in the event handler routine, you would notice that only the text of the “Label 1” is updated.

    Refresh Multiple Update Panels
    By using multiple UpdatePanel controls on a page, you can incrementally update regions of the page separately or together. In this example, we have set the panels to update conditionally which means that their content is only updated if something insides them causes a postback, or if one of the defined triggers are fired. We have added a trigger to the first panel to also get updated when button on the second panel is clicked.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server">
        protected void btnUpdate_Click(object sender, EventArgs e)
        {
            lblText.Text = "You have updated the label on: " +
    DateTime.Now.ToString();
            lblText2.Text = "You have updated the label on: " +
    DateTime.Now.ToString();
        }
        </script>
    <head id="Head1" runat="server">
        <title>Refresh Update Panel using External Control</title>
        <link type="text/css" rel="Stylesheet" href="Styles.css" />
    </head>
    <body>
    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel runat="server" id="pnlFirst"
    UpdateMode="Conditional">
               <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnUpdate2"
    eventname="Click"/>
                </Triggers>
                <ContentTemplate>
                   <asp:Label runat="server" id="lblText" Text="Label 1" /><br />
                    <asp:Button runat="server" id="btnUpdate1"
    onclick="btnUpdate_Click"
                        text="First Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
             <br />   <br />
              <asp:UpdatePanel runat="server" id="pnlSecond"
    UpdateMode="Conditional">
                <ContentTemplate>
                  <asp:Label runat="server" id="lblText2" Text="Label 2" /><br />
                    <asp:Button runat="server" id="btnUpdate2"
    onclick="btnUpdate_Click"
                        text="Second Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
    </form>
    </body>
    </html>
    

    You will notice that then first button updates only the first label text, while the second button updates both. Why? We have set the Panels to update Conditionally, which means that their content is only updated if something insides them causes a postback, or if one of the defined triggers are fired.

    Click on the First Button, you would notice “Label 1” text is updated.

    Click on the Second Button, you would notice that both “Label 1” & “Label 2” text is updated.

    Be Sociable, Share!
      Post Tagged with , ,

    Written by

    Software architect with over 10 years of proven experience in designing & developing n-tier and web based software applications, for Finance, Telecommunication, Manufacturing, Internet and other Commercial industries. He believes that success depends on one's ability to integrate multiple technologies to solve a simple as well as complicated problem.

    View all articles by

    Email : [email protected]

    Leave a Reply