AJAX in ASP.NET

AJAX or Asynchronous JavaScript and XML is a platform-independent technology that works with Web applications.
ASP.NET is a server-side technology for developing web applications. Whenever we initiate an event in an ASP.NET page, such as clicking a button or selecting an item from dropdownlist, the entire page is posted back to the web server. This scenario increases the load on server. Whenever user performs any server side event, the whole web page is recreated by the web server. The user must wait till the web page is rendered again on the browser.
Unlike a server-side web application, an Ajax application provides you the partial update of a page. It means, it is very responsive to user interaction.  

Benefits of ASP.NET AJAX

  • Provides partial-page updates
  • Supports client-side processing
  • Flicker free user interface
  • Improved performance
  • Web service calls from the client
  • Cross-browser and cross-platform support

Inbuilt AJAX controls

ASP.NET comes with following controls. These AJAX controls inherit from the System.Web.UI.Control class.

  • ScriptManager
  • ScriptManagerProxy
  • Timer
  • UpdatePanel
  • UpdateProgress

The ScriptManager Control

The most important control in ASP.NET AJAX is the ScriptManager server control.This control is responsible for partial page rendering.
You can use a single ScriptManager control on a web.

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

ScriptManager control manages partial-page rendering in the browser, with the help of UpdatePanel control.
ScriptManager control loads the JavaScript libraries needed by ASP.NET AJAX. The ScriptManager control also convert the data into XML and again converts an xml file into an object (marshalling and unmarshalling). The marshalling of the data can be done using either SOAP or JSON.
The ScriptManager control supports the EnablePartialRendering property that determines whether a page takes part in partial-page updates or not. By default, the EnablePartialRendering property is true.

UpdatePanel Control

The UpdatePanel control is the key component of AJAX. It enables you to update a portion of a page without updating the entire page. It is used to update only the portion of the page and the user does not see a full-screen refresh. The UpdatePanel control works as a container for other controls.
Let’s take one simple example. In this example a Button and Label control is taken inside the UpdatePanel control. When user clicks on the button, only the part of the page that is available in the UpdatePanel is refreshed, not whole page. Also there is no flickering on the web page. You can compare that how much data is transferred using AJAX and without using AJAX. You can use network analysis tool like Fiddler for the same.

Example

Default.aspx page
<body>
    <form id="form1" runat="server">    
        <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>
                <br />
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Current Time" />
            </ContentTemplate>           
        </asp:UpdatePanel>
    </form>
</body>


Default.aspx.cs page

protected void Button1_Click(object sender, EventArgs e)
{
        Label1.Text = "Current Time =: "+DateTime.Now.ToString("T");
}


Important properties of UpdatePanel control

ChildrenAsTriggers: This property is used to check whether, the control inside the UpdatePanel control initiate the postback for refresh the UpdatePanel region. The default value is True for ChildrenAsTriggers property.

Triggers: It works as collection and contains PostBackTrigger and AsyncPostBackTrigger elements. PostBackTrigger is used to refresh whole page forcefully and AsyncPostBackTrigger is used to update an UpdatePanel by a control that is located outside the UpdatePanel.

RenderMode: This property has two values: Block and Inline. By default it has Block value. If the RenderMode value is Block then it render as div element. If the RenderMode value is Inline then it render as span element.

UpdateMode: This property has two values: Always and Conditional. By default it is set as Always. It is used to determine whether the control is always refreshed or not.

ContentTemplate: It is an important property of the UpdatePanel. It contains other control as child control. In designer mode of visual studio, if we drag any server control inside the UpdatePanel, then it automatically goes inside the ContentTemplate.

If the control (as example Button control) is placed inside the UpdatePanel, then button control will causes the postback and only the UpdatePanel region will be refreshed. If the Button or other server control is located outside the UpdatePanel control, then also you can achieve the partial refresh. In this situation you have to use AsyncPostBackTrigger of Trigger collection.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
            <ContentTemplate>
                 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>        
            </ContentTemplate>
            <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
</asp:UpdatePanel>
        <br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text ="Current Time" />


Timer Control

As its name suggests, Timer control is used to refresh an UpdatePanel on a timely basis. The Timer control has one important property name Interval. It supports the time in milliseconds. The default value is 60,000 (1 minute). It also supports a Tick event, which is automatically called when the specified time is passed. By default its Enabled property value is true. If you set this property as false, then Tick event will not fires according to specified time interval.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
            <ContentTemplate>
                 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>             
                 <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick =  
                       "Timer1_Tick">
                 </asp:Timer>
            </ContentTemplate>           
</asp:UpdatePanel>


Default.aspx.cs

protected void Timer1_Tick(object sender, EventArgs e)
{
        Label1.Text = "Current Time =: " + DateTime.Now.ToString("T");
}


UpdateProgress Control

This control is used to display the progress of ongoing task during an UpdatePanel control is updating its information. You can also use an image instead of static text to display the ongoing task in <ProgressTemplate>. You can connect the UpdateProgress control to an UpdatePanel control by using the AssociatedUpdatePanelID property of UpdateProgress. It supports an important property called DisplayAfter, that is used to determine that how many milliseconds, UpdateProgress control should wait before it displays its contents.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
            <ContentTemplate>
                 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>    
                 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Current Time" />
            </ContentTemplate>
</asp:UpdatePanel>       
        <br />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                 Updating content, Please wait...
            </ProgressTemplate>
        </asp:UpdateProgress>


Default.aspx.cs

protected void Button1_Click(object sender, EventArgs e)
{
        System.Threading.Thread.Sleep(5000);
        Label1.Text = "Page updated at " + DateTime.Now.ToString("T");
}

▲