Ajax Page Processing

By using AJAX you can create flicker-free pages that enable you to refresh partial page without a full reload and without affecting other parts of the page. AJAX provides you rich, client-side programming to access and modify data in your page.

Benefits of ASP.NET AJAX

• Partial-page updates
• Client-side processing
• Desktop-like UI
• Improved performance
• Provide Platform Independency

AJAX Server Controls

These controls works in a similar manner as other ASP.NET controls. You can drag and drop them onto your page. Each of these controls inherits from the System.Web.UI.Control class.

The following ASP.NET AJAX server controls that come with ASP.NET

• ScriptManager
• ScriptManagerProxy
• Timer
• UpdatePanel
• UpdateProgress

ScriptManager Control

If you want to use ASP.NET AJAX than you must have ScriptManager Control. The ScriptManager control manages the communication between the client page and the server. It manages also manages the JavaScript files used at the client, takes care of partial-page updates. You can directly drag and drop this control on content page. It does not have a visual representation. It only used to manage AJAX processing. You cannot use more than one ScriptManager control on single web page.

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

</asp: ScriptManager>

ScriptManagerProxy Control

The ScriptManagerProxy control mainly used when we deals with Master Pages. The ScriptManagerProxy control can be used by content pages that use a master page. The Master page must have a ScriptManager control otherwise you will get error.

Example:

Create a new Master page named EmpMaster.master

< %@ Master Language="C#" % >
            < script runat="server" >
            < /script >
            < html xmlns="http://www.w3.org/1999/xhtml" >
            < head runat="server" >
            < title > Untitled Page < /title >
            < Asp: ContentPlaceHolder id="head" runat="server" >< /asp: ContentPlaceHolder >

            < /head >
                        < body >
                                    < form id="form1" runat="server" >
                                    < div >
                                                < asp: ScriptManager ID="ScriptManager1" runat="server" / >
                                                < asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" >
                                                < /asp: ContentPlaceHolder >
                                    < /div >
            < /form >
            < /body >
            < /html >

Content Page

<%@ Page Language="C#" MasterPageFile="~/ EmpMaster.Master"%>

<asp: Content ContentPlaceHolderID="head" ID="Content1" runat="server">
</asp: Content>
<asp: Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content2" runat="server">
<asp: ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp: ScriptReference Path="CarrerRidescript.js" />
</Scripts>
</asp: ScriptManagerProxy>
</asp: Content>

UpdatePanel Control

UpdatePanel control is the most important control in Microsoft’s server-side AJAX framework. The UpdatePanel control enables you to update a portion of a page without updating the entire page. With partial-page updates you can post portions of a page to the server and only receive updates to those portions. The UpdatePanel control is work as a container for other controls.

Example:

• Add a ScriptManager server control to the top of the page.
• Add one label and one button on the page name Label1 and Button1.
• Add UpdatePanel control and take another label and button named Label2 and Button2.

Remember that Label1 and Button1 server control are outside the UpdatePanel control but Label2 and Button2 server control are inside the UpdatePanel control.

protected void Button1_Click (object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString ();
}
protected void Button2_Click (object sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToString ();
}


When you click first button the complete page get refreshed and updates the current time in the Label1 server control but Clicking on the second button updates the current server time in the Label2 server control. When you click the button1, the time in Label1 will not change at all, as it is outside of the UpdatePanel.

Timer Control

The ASP.NET AJAX Timer control enables you to refresh an UpdatePanel in fixed time interval. The Timer control has one important property named Interval. You can specify the amount of time, in millisecond. The default value is 60,000 (1 minute).

The Timer control raises a Tick event automatically depending on the value of its Interval property.

Example.

// Code for .aspx

<body>
            <form id="form1" runat="server">
            <div>
                        <asp: ScriptManager ID="ScriptManager1" runat="server" />
                        <asp: UpdatePanel ID="UpdatePanel1" runat="server">
                        <Content Template>
                        <asp: Label ID="Label1" runat="server" Text="Label">
                        </asp: Label>
                        <asp: Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="10000">
                        </asp:Timer>
                        </ContentTemplate>
                        </asp: UpdatePanel>
            </div>

// Code for .CS file

protected void Timer1_Tick(object sender, EventArgs e)
{
            Label1.Text = DateTime.Now.ToString ();
}

In the above given example every 10 seconds Timer1_Tick () function will be called.

UpdateProgress Control

The UpdateProgress control allows you to show to the user that work is being done and that they will get results soon. You can show the status of work done by using this control.

Example:

<asp: ScriptManager ID="ScriptManager1" runat="server">
</asp: ScriptManager>
<asp: UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp: Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp: Button ID="Button1" runat="server"  OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>Please wait…….. </ProgressTemplate>
</asp: UpdateProgress>

protected void Button1_Click(object sender, EventArgs e)
{

            System.Threading.Thread.Sleep (3000);
            Label1.Text = "Page refreshed at” + DateTime.Now.ToString ();

}

Ajax Topics
Ajax interview	Ajax Advantages
Technologies that make up Ajax	JSF and Ajax
ASP.NET Ajax defined	ASP.NET Ajax packaging
Ajax vs. javascript	Ajax understanding
Ajax limitations	Who benefits from AJAX?
What is ASP.NET AJAX?	Struts and Ajax
Tapestry and Ajax	Spring and Ajax

Latest Ajax interview questions and answers

What Is ASP.NET 2.0 AJAX?
What Is AJAX? History of AJAX, Advantages of AJAX
List out differences between AJAX and JavaScript.
Describe how to create AJAX objects.
How do I handle the back and forward buttons?
What is AJAX and what problem does it solve?

Write your comment - Share Knowledge and Experience