Introduction : AJAX (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. AJAX can help us develop web application and retrieve small amount of data from web server. AJAX consists of different types of technology.

GridView : A grid view or a datagrid is a graphical user interface that presents a tabular view of data. The GridView mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. The default GridView style implements buttons as column headers. The GridView displays the values of a data source in a table where each column represents a field and each row represents a record. The GridView control enables you to select, sort, and edit these items.

GridView property :

Step 1 : Open Visual Studio 2010.

Step 2 : Go to Solution Explorer and right-click.

webma.gif

Step 3 : Go to Default.aspx page and select[Design]option and drag and drop controls from Toolbox.

Add Database :

Step 4 : Go to Solution Explorer and right-click.

sql4.gif

Define Database Table :

Step 5 : Go to the Server Explorer and select Table option.

table.gif

Data Bind :

Step 6 : Go to Default.aspx [Design] option and select Grid View Control.

databind.gif

Connection String :

Step 7 : Go to the Connection String option and establish the connection.

connection.gif


Step 8 : Now run the application by Pressing F5.

run7.gif

Fetch the value in TextBox :
Step 9 : Now go to the Default.aspx page and drag a control from Toolbox.

textbox.gif

Step 10 : Now double-click on the GridView Control and write the below code for the value of selected row.

Code :

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox1.Text = GridView1.SelectedRow.Cells[1].Text;
TextBox2.Text = GridView1.SelectedRow.Cells[2].Text;
TextBox3.Text = GridView1.SelectedRow.Cells[3].Text;
TextBox4.Text = GridView1.SelectedRow.Cells[4].Text;
}
}
Step 11 : Now go to Default.aspx page and write the below code.

Code :

<title>MY AJAX APPLICATION</title>
 <style type="text/css">
 .style1
 {
height: 54px;
}
</style>
 </head>
<body bgcolor="#669999">
 <form id="form1" runat="server" style="background-color: #00FF99">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div style="background-color: #FFCCFF" align="center">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
<br />
 <br />
 <br />
 <br />
 <br />
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="White"
GridLines="Vertical" onselectedindexchanged="GridView1_SelectedIndexChanged">
 <AlternatingRowStyle BackColor="White" />
 <Columns>
 <asp:CommandField ShowSelectButton="True" />
 <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
 <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
 <asp:BoundField DataField="CLASS" HeaderText="CLASS" SortExpression="CLASS" />
 <asp:BoundField DataField="SUBJE" HeaderText="SUBJE" SortExpression="SUBJE" />
 </Columns>
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <SortedAscendingCellStyle BackColor="#FDF5AC" />
 <SortedAscendingHeaderStyle BackColor="#4D0000" />
 <SortedDescendingCellStyle BackColor="#FCF6C0" />
 <SortedDescendingHeaderStyle BackColor="#820000" />
 </asp:GridView>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [MYTABLE]"></asp:SqlDataSource>
 <br />
 <table class="style1" style="background-color: #CCFF99; height: 268px;">
 <tr>
 <td class="style1">
 ID</td>
 <td class="style1">
 <asp:TextBox ID="TextBox1" runat="server" ForeColor="#9900FF"></asp:TextBox>
 </td>
 </tr>
 <tr>
 <td class="style2">
 NAME</td>
 <td>
 <asp:TextBox ID="TextBox2" runat="server" ForeColor="#FF6699"></asp:TextBox>
 </td>
 </tr>
 <tr>
 <td class="style2">
 CLASS</td>
 <td>
 <asp:TextBox ID="TextBox3" runat="server" ForeColor="#9966FF"></asp:TextBox>
 </td>
 </tr>
 <tr>
 <td class="style2">
 SUBJEC</td>
 <td>
 <asp:TextBox ID="TextBox4" runat="server" ForeColor="#FF33CC"></asp:TextBox>
 </td>
 </tr>
 </ContentTemplate>
 </asp:UpdatePanel>
Step 12 : Now run the application by Pressing F5.

run12.gif

Step 13 : Now click on the Select option and see the output.

run13.gif