How To Get The Selected Row In A GridView Using ASP.NET

In this article, you will learn how to get the selected row in a GridView and display the values in TextBoxes using ASP.NET. A GridView allows us to select only a single row at a time. The sample makes use of the database. We will be pulling data from the UserDetail table.

Creating Table in SQL Server Database

Now create a table named UserDetail with the columns UserID and UserName. The table looks as below.

im1.gif

Now insert data into the table.

im2.gif

First of all drag the GridView control from the Data controls menu. It will add the GridView control's HTML source code as given above.

  1. <asp:GridViewID="GridView2"runat="server"></asp:GridView>
You will need to set the Bound column in order to see the text in the cells of the GridView control.

.aspx source code

  1. <%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WebApplication120.WebForm1" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <headrunat="server">
  5. <title></title>
  6. </head>
  7. <body>
  8. <formid="form1"runat="server">
  9. <div>
  10. UserID:
  11. <asp:TextBoxID="TextBoxUserID"runat="server"></asp:TextBox>
  12. <br/>
  13. UserName:
  14. <asp:TextBoxID="TextBoxUserName"runat="server"></asp:TextBox>
  15. <br/>
  16. <br/>
  17. <asp:GridViewID="GridView1"runat="server"AutoGenerateSelectButton="True"OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
  18. BackColor="#DEBA84"BorderColor="#DEBA84"BorderStyle="None"BorderWidth="1px"
  19. CellPadding="3"CellSpacing="2"AutoGenerateColumns="False">
  20. <FooterStyleBackColor="#F7DFB5"ForeColor="#8C4510"/>
  21. <HeaderStyleBackColor="#A55129"Font-Bold="True"ForeColor="White"/>
  22. <PagerStyleForeColor="#8C4510"HorizontalAlign="Center"/>
  23. <RowStyleBackColor="#FFF7E7"ForeColor="#8C4510"/>
  24. <SelectedRowStyleBackColor="#738A9C"Font-Bold="True"ForeColor="White"/>
  25. <SortedAscendingCellStyleBackColor="#FFF1D4"/>
  26. <SortedAscendingHeaderStyleBackColor="#B95C30"/>
  27. <SortedDescendingCellStyleBackColor="#F1E5CE"/>
  28. <SortedDescendingHeaderStyleBackColor="#93451F"/>
  29. <Columns>
  30. <asp:BoundFieldHeaderText="UserID"DataField="UserID"/>
  31. <asp:BoundFieldHeaderText="UserName"DataField="UserName"/>
  32. </Columns>
  33. </asp:GridView>
  34. </div>
  35. </form>
  36. </body>
  37. </html>
In the above GridView Properties set 'AutoGenerateSelectButton=True'. See the following image of a GridView after setting 'AutoGenerateSelectButton=True'. Select the GridView and press F4 for the property window.

im3.gif

See the Design view of your GridView. You will find a Hyperlink with a text as 'Select'.

im4.gif

Now add the following namespace.

  1. using System.Data.SqlClient;
  2. using System.Data;
Now write the connection string to connect to the database.
  1. string strConnection = "Data Source=.; uid=sa; pwd=wintellect;database=Rohatash;";
Now double-click on the page and write the following code for binding the data with the GridView.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data.SqlClient;
  8. using System.Data;
  9. namespace WebApplication120
  10. {
  11. public partial class WebForm1 : System.Web.UI.Page
  12. {
  13. protectedvoid Page_Load(object sender, EventArgs e)
  14. {
  15. show();
  16. }
  17. privatevoid show()
  18. {
  19. {
  20. SqlConnection con = new SqlConnection("Data Source=.; uid=sa; pwd=wintellect;database=Rohatash;");
  21. string strSQL = "Select * from UserDetail";
  22. SqlDataAdapter dt = new SqlDataAdapter(strSQL, con);
  23. DataSet ds = new DataSet();
  24. dt.Fill(ds, "UserDetail");
  25. con.Close();
  26. GridView1.DataSource = ds;
  27. GridView1.DataBind();
  28. }
  29. }
  30. }
  31. }
Now run the application.

im5.gif

Selecting Row Selecting the row event is fired when you make a click on the select link. If you need any particular item in that row you can easily select it using the cells property. In the Gridview, double-Click on the SelectedIndexChanged Event and write the following code:

  1. protectedvoid GridView1_SelectedIndexChanged(object sender, EventArgs e)
  2. {
  3. TextBoxUserID.Text = GridView1.SelectedRow.Cells[1].Text;
  4. TextBoxUserName.Text = GridView1.SelectedRow.Cells[2].Text;
  5. }
Now run the application and select a row; that will show the selected row data in the TextBoxes.

im6.gif

Some Helpful Resources

  • Get the values of selected row from a Gridview in TextBox using AJAX
  • Change Rows Background color in GridView with selected Criteria
  • Developing a Multi-Select ASP.NET GridView using JQuery
  • Swapping GridView rows Up and Down

Từ khóa » Visual Basic Gridview Select Row