Home > DeveloperSection > Blogs > Ajax in Asp.Net

Ajax in Asp.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 1413  View(s)
Rate this:

Ajax in Asp.Net

In this blog, I’m explaining how to use ajax in our asp.net application.

Ajax

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:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

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

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

</asp:UpdatePanel>

Step 3:

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

<asp:UpdatePanel ID="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:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="lblStudentName" runat="server" Text="Student Name :"></asp:Label>

<asp:DropDownList ID="Dropdownlist1" runat="server"

OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"  AutoPostBack="True">

<asp:ListItem Value="Select">Select</asp:ListItem>

<asp:ListItem Value="Mark" >Mark</asp:ListItem>

<asp:ListItem Value="Steve">Steve</asp:ListItem>

</asp:DropDownList>

<asp:GridView ID="GridView1" runat="server" BackColor="#CC99FF" ForeColor="Black">

<HeaderStyle BackColor="#993366" BorderColor="#99FF99" ForeColor="White" />

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

Step 4:

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

public class studentDetails

        {

            public string name { get; set; }

            public string address { get; set; }

            public string course { get; set; }

            public string contact { get; set; }

        }

List<studentDetails> list = new List<studentDetails>();

protected void Page_Load(object sender, EventArgs e)

        {

            list.Add(new studentDetails { name = "Mark", address="New York",course = "MBA",contact="0543767823" });

            list.Add(new studentDetails { name = "Steve",address="New Jersey", course = "MCA",contact="2378451290" });

        }

protected void 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:


Don't want to miss updates? Please click the below button!

Follow MindStick