ASP.Net AJAX UpdatePanel Sample Application

by top54u.com 25 Apr, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

ASP.Net 2.0 AJAX Update Progress Control

Partial Page Updates using ASP.Net AJAX

C# Ajax GridView Select in ASP.Net

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

AJAX GridView Paging and Sorting using C# in ASP.Net

ASP.Net AJAX GridView Loading

ASP.Net AJAX Extension Controls

Spotlight.....

To start creating AJAX enabled ASP.Net applications lets start with sample application using the AJAX UpdatePanel control which is the most essential control of AJAX based applications that provide asynchronous postbacks.

Introduction to AJAX UpdatePanel

UpdatePanel AJAX extensions server control enables you to create web pages that support the functionality of Partial-Page Rendering. ScriptManager another AJAX extensions server control is the necessary server control for AJAX enabled web pages coz it registers all the client side scripts, it includes AJAX client side libraries and ScriptManager must be included on the top of the ASP.Net web page before adding any other AJAX extensions server control into the web page. These controls enable ASP.Net web page to update the content within the updatepanel to be updated without refreshing the whole page or you can say without full page postback, this feature is also known as Partial-Page Update or Rendering that increases the user experience.

AJAX UpdatePanel Sample Application

This First AJAX Sample Application will teach you the use of UpdatePanel that will update the current Time of the Label control placed inside the UpdatePanel without refreshing the whole page.

HTML Code for AJAX UpdatePanel Sample:

[code:html]
<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

                        <div>
                            <asp:Label ID="lblPageTime" runat="server"></asp:Label>
                        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div style="width: 350px;">
                    <div style="width: 200px; float: left">

                            <asp:Label ID="lblTime" runat="server"></asp:Label>

                    </div>
                    <div style="width: 80px; float: left">
                        <asp:Button ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" Text="update"
                            BackColor="#E0E0E0" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" ForeColor="#404040" />
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
[/code]

C# Code for AJAX UpdatePanel Sample:

[code:c#]
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            lblPageTime.Text = "Page browsed at: <b>" + DateTime.Now.ToLongTimeString() + "</b>";
    }

    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        lblTime.Text = "Button clicked at: <b>" + DateTime.Now.ToLongTimeString() + "</b>";
    }
[/code]