Mar 7

Introduction to ASP.NET AJAX

.NET No comments

AJAX (Asynchronous JavaScript And XML) is a very popular technology in web development. It allows us to make our pages more interactive and responsive.

In simple terms, AJAX uses JavaScript to make asynchronous call to the web server and update only a portion of the page with the response we get from the server.

The browser uses the XMLHttpRequest object to communicate back and forth with the server. We could use this object directly in our JavaScript code, but that wouldn’t be practical in robust applications. Thankfully, there are many AJAX libraries out there that make it easier to work with AJAX.

ASP.NET AJAX is Microsoft’s implementation of AJAX that integrates with ASP.NET.

All we need to do to enable AJAX in a web page is add a ScriptManager control.

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

Only one ScriptManager can exist in a page. If we add a ScriptManager to a Master Page, and we add another ScriptManager to a page using the Master Page, we would get an error:

“Only one instance of a ScriptManager can be added to the page.”

The same would happen if we add a ScriptManager to a page and we add another one to a user control.

To resolve this, we need to use the ScriptManagerProxy control.

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />

The ScriptManagerProxy control allows a page or a user control to find the ScriptManager control defined inside the parent page. It’s a good idea to add a ScriptManager control to our Master page and use a ScriptManagerProxy control in every page and user control in our web application that needs to use AJAX.

So let’s try it out. Open Microsoft Visual Studio or Microsoft Visual Web Developer Express and create a new ASP.NET Web Application in your favorite language. I used C# and named the project WebExample.

Open the Site.Master file and add a ScriptManager inside the form tag.

<body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div class="page">
<%-- code that doesn't change --%>

Now open the Default.aspx file and add a ScriptManagerProxy inside the second Content tag.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
    <h2>
<%-- code that doesn't change --%>

And add the following before the Content closing tag.

    <%-- code that doesn't change --%>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label runat="server" ID="lblMessage" Text="Please type your name: "></asp:Label>
            <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
            <asp:Button runat="server" ID="btnSubmit" Text="Submit" onclick="btnSubmit_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Finally, open the code behind (Default.aspx.cs) and add the following function inside the class.

protected void btnSubmit_Click(object sender, EventArgs e)
        {
            lblMessage.Text = String.Format("Hi {0}, welcome!", txtName.Text);
            txtName.Visible = false;
            btnSubmit.Visible = false;
        }

We’re using the UpdatePanel control to be able to update an area of the page using AJAX. Everything inside <ContentTemplate> can be updated by our code without affecting the rest of the page.

When the user clicks on the button, the code behind will be executed as normal, but only the 3 controls inside the UpdatePanel will refresh.

Run the application.

ASP.NET AJAX Sample

Type your name and click on Submit.

ASP.NET AJAX Sample

The page will update without “flashing” as it normally occurs with a post back in ASP.NET. That’s AJAX in action.

Please leave your comments if you have any question.

Tagged with , ,

Get Free Updates
Related Posts
Comments