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.
- JavaScript
- XML
- Asynchronous Call to the server
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 :
- Access key
- Adapter
- Allowing Page
- Allow Sorting
- Allow Rating Row Style
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET Empty WebSite
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
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.
- Select Add->New Item
- Select SQL Server Database
Define Database Table :
Step 5 : Go to the Server
Explorer and select Table option.
- Select Table ->Add NewTable
- Define the Data in the table
Data Bind :
Step 6 : Go to Default.aspx [Design]
option and select Grid View Control.
- Select Choose Data Source option and define data source
- Add SqlDataSource1
Connection String :
Step 7 : Go to the Connection String
option and establish the connection.
Step 8 : Now run the application by Pressing F5.
Fetch the value in TextBox :
Step 9 : Now go to the
Default.aspx page and drag a control from Toolbox.
- Drag Four Textbox on the design option
- Define the property
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.
Step 13 : Now click on the
Select option and see the output.
