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

Davin Martyn
13y
112.4k
0
0

Article

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.

Drag ScriptManager, UpdatePanel,GridView

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.

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all