Post
Ask Question

Get the values of selected row from a Gridview in TextBox using AJAX


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
webma.gif

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

  • Drag ScriptManager, UpdatePanel,GridView

Add Database :

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

  • Select Add->New Item
  • Select SQL Server Database
sql4.gif

Define Database Table :

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

  • Select  Table ->Add NewTable
  • Define the Data in the table
table.gif

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
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.

  • Drag Four Textbox on the design option
  • Define the property
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


Similar Articles