AJAX stands for Asynchronous JavaScript and XML. This is a cross platform technology which speeds up response time. The AJAX server controls add script to the page which is executed and processed by the browser.

However like other ASP.Net server controls, these AJAX server controls also can have methods and event handlers associated with them, which are processed on the server side.

AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Example

In this example, we take a dropdownlist and populate it with student name and on selection of a particular student we display his information in gridview using ajax.

Step 1:

First create an asp.net empty web application and a web from to it.

Step 2:

In the toolbox, there is a section named “Ajax Extensions”

Drag and drop the “Script Manager” to the web form.

Script Manager

The Script Manager control is the most important control and must be present on the page for other controls to work. A Web page can contain only one Script Manager control. If you create an 'Ajax Enabled site' or add an 'AJAX Web Form' from the 'Add Item' dialog box, the web form automatically contains the script manager control. The Script Manager control takes care of the client-side script for all the server side controls.

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

Now add “Update panel control” under the script manager control like this:

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
</asp:UpdatePanel>

Step 3:

Next step is to add content template to the update panel control:

<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>

In the “Content Template”, you will add those controls which you want to be handled by the ajax like I have added a lablel, dropdownlist and grid view like this:

<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="lblStudentName"runat="server"Text="Student Name :"></asp:Label>
<asp:DropDownListID="Dropdownlist1"runat="server"
OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"  AutoPostBack="True">
<asp:ListItemValue="Select">Select</asp:ListItem>
<asp:ListItemValue="Mark">Mark</asp:ListItem>
<asp:ListItemValue="Steve">Steve</asp:ListItem>
</asp:DropDownList>
<asp:GridViewID="GridView1"runat="server"BackColor="#CC99FF"ForeColor="Black">
<HeaderStyleBackColor="#993366"BorderColor="#99FF99"ForeColor="White"/>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

Step 4:

Now in the .aspx.cs file, write the below code:

publicclassstudentDetails
        {
            publicstring name { get; set; }
            publicstring address { get; set; }
            publicstring course { get; set; }
            publicstring contact { get; set; }
        }
List<studentDetails> list = newList<studentDetails>();
protectedvoid Page_Load(object sender, EventArgs e)
        {
            list.Add(newstudentDetails { name = "Mark", address="New York",course = "MBA",contact="0543767823" });
            list.Add(newstudentDetails { name = "Steve",address="New Jersey", course = "MCA",contact="2378451290" });
        }
protectedvoid Dropdownlist1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string str = Dropdownlist1.SelectedValue.ToString();
            GridView1.DataSource = list.FindAll(m => m.name.ToLower() == str.ToLower());
            GridView1.DataBind();
        }

Output

When you run the application:

Select the student name which is available in dropdownlist:

Select another student name: