ajax in asp.net

What is Ajax

Ajax is platform independent technology. AJAX stands for Asynchronous Javascript and Xml. Asynchronous refers to the events that are happening in the background independently from the main application flow.

With the help of ajax we can create an area in our web form which post back and update without refreshing the whole page. It is called partial page updation which increases the performance.

Learn JavaScript AJAX Tutorial

Ajax Controls

ScriptManager
ScriptManagerProxy
Update Panel
Timer Control
Update Progress

Script Manager

Script manager is used to control the processing of ajax. The major responsibility of script manager is for downloading Microsoft ajax library down to the browser (client).

Script manager'’'s EnablePartialRendering property must be set true which is its default value which is necessary for script manager to manage partial updation.

Update Panel

Update panel control is just like a container for other control. It defines an area in your page which will be independently partially post back without refreshing the whole page. A single page can have multiple update panels.

For Example

In the following example we add one script manager and update panel at our page. In update panel we take one dropdown list and filled it with some countries and there is a label in update panel too. We create event dropdown SelectedIndexChanged. In this event we take the dropdown selected item and show it in the label. Check the following code:-

AjaxPractise.aspx

 
	<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPractise.aspx.cs" Inherits="AjaxPractise" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                    onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem>Select Country</asp:ListItem>
                    <asp:ListItem>India</asp:ListItem>
                    <asp:ListItem>China</asp:ListItem>
                    <asp:ListItem>US</asp:ListItem>
                    <asp:ListItem>UK</asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <br />

            </ContentTemplate>
        </asp:UpdatePanel>
            
    </div>
    </form>
</body>
</html>

AjaxPractise.aspx.cs

 
		using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class AjaxPractise : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedItem.Text;
    }
   
}

In this example you will see that without refreshing the whole page it will update only those control which assigned in update panel.( you can check browsers refresh button for same task using without update panel. You will see the difference.)

Timer Control

Timer control is used to update a particular portion of a page at a particular time period. It is managed by firing tick event. We set interval property of a timer control which defines in millisecond.

For Example

In this example we take one web form. In form first we add script manager and update panel.

In update panel we add timer control and a label. We create the tick event for timer control and show current date with time on label. We set the interval 1000 millisecond which is equivalent to 1 second. Every after one second the event will fire and display the time without refreshing the whole page. Run the following code:-

AjaxWithTimer.aspx

		
		
		<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxWithTimer.aspx.cs" Inherits="AjaxWithTimer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                </asp:Timer>
                <br />
                <br />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    
    </div>
    </form>
</body>
</html>

AjaxWithTimer.aspx.cs

		
		using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class AjaxWithTimer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

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

UpdateProgressControl

Update progress control provides feedback in the browser when the update panel are updated. We can add multiple update progress control in the page.