Introduction
This article gives an explanation about how to get the selected row cell value from the grid view in asp.net web forms using C#, VB.NET and bootstrap 4. Here, I'll explain how to fetch the values of each cell of the selected row of grid view in asp.net using C# and VB.NET as well as you can also learn how to bind data GridView in asp.net web forms, how to integrate bootstrap in your asp.net web application and how to apply bootstrap classes to asp.net controls.
In my previous article, I explained convert json to datatable/dataset in asp.net web forms with bootstrap 4 using c# and vb.net, angularjs table with bootstrap 4 in asp.net web forms, bootstrap jquery multi-select dropdown list with checkbox in ASP.NET using c# and VB.NET and generate meta tags dynamically in ASP.NET webforms c#.
Many of the developers/programmers who worked or working with asp.net web forms will have at least heard talk about the GridView.Still many of developers/programmers who are beginners and just started his/her career in the IT sector they didn't know what is GridView, what is the use of GridView, when and where we can use GridView, how to fetch records from Gridview, how to bind GridView and many other questions are in their mind, Even I got many emails from students and beginners and they requested for post an article about GridView in asp.net web forms with basic explanation of GridView with simple example, few of them also requested that explain easy,better and reliable solution for fetch records from GridView so finally after long time I gonna write an article about GridView and in this articles I will explain everything basics of Gridview with simple example so they can get clear idea about the GridView.
Requirement
1) Explain what is GridView and use of GridView in asp.net web forms.
2) Explain what is bootstrap.
3) How to integrate bootstrap with asp.net webform application.
4) Explain how to fetch selected row cell value from GridView in asp.net webform application with example.
Implementation
What is GridView in asp.net web forms?
The GridView is a versatile and data-bound control, that is used for select, edit, delete and sort data on a web page and commonly used in ASP.NET webforms applications.
What is bootstrap?
Bootstrap is the free, open-source and most popular front end development framework or toolkit for the creation of responsive and mobile-first websites.
How to integrate bootstrap with asp.net webform application?
To integrate bootstrap with your ASP.NET webforms application you just have to host and link CSS and Javascript of the bootstrap framework with your ASP.NET webforms application or you can also include it from a CDN (Content Delivery Network).
To link CSS and Javascript of the bootstrap framework with your ASP.NET webforms application you have to write the following code between <head> tag as shown in the code below.
Integrate bootstrap CDN with your ASP.NET webforms
<head runat="server"> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head>
Fetch selected row cell value from GridView in asp.net webform
So, let us start with an example so you can get more idea about the same, here we will take an example of employee management system where we have a list of employee and we will fetch details of an employee by selecting GridView row and we will display that details in the webform using label control.
First, we have to design a web form as shown in the screen above, so we will write the following HTML markup in the .aspx file.
Employees.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form id="form1" runat="server"> <div class="row"> <div class="col-lg-12"> <div class="panel panel-heading"> <div class="panel-heading text-center"> <h1>Employee Management System</h1> </div> </div> </div> <div class="col-lg-8"> <div class="panel panel-default"> <div class="panel-heading">Employee List</div> <div class="panel-body"> <asp:GridView ID="grdEmp" CssClass="table table-bordered" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="grdEmp_SelectedIndexChanged"> <Columns> <asp:BoundField DataField="EmployeeId" HeaderText="EmployeeId" ItemStyle-Width="100" /> <asp:BoundField DataField="EmployeeName" HeaderText="EmployeeName" ItemStyle-Width="150" /> <asp:BoundField DataField="Department" HeaderText="Department" ItemStyle-Width="150" /> <asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-Width="150" /> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" ItemStyle-Width="150" /> <asp:ButtonField Text="Select" ControlStyle-CssClass="btn btn-primary" CommandName="Select" ItemStyle-Width="50" /> </Columns> </asp:GridView> </div> </div> </div> <div class="col-lg-4"> <div class="panel panel-default"> <div class="panel-heading">Employee Details</div> <div class="panel-body"> <asp:Label ID="lblEmployeeDetails" runat="server"></asp:Label> </div> </div> </div> </div> </form> </div> </body> </html>
Explanation
As you can see in the code snippet above, here first we have linked bootstrap CSS and Javascript using CDN links between <head> head tag. In the <body> tag we create a division with the bootstrap class container and within that division tag, we create two grid as you can see in the code above with bootstrap class.col-lg-12 for GridView that contains a list of employee and another division with class .col-lg-8 for display selected row cell value from GridView. Here we also have taken one ButtonField for row select and fetch selected row cell value from GridView.
Now, we need to bind GridView for the display list of employees into the web form, for that we will create a simple method that returns data table with few of dummy entries.
C#
private DataTable GetEmployeeData() { try { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[5] { new DataColumn("EmployeeId"), new DataColumn("EmployeeName"), new DataColumn("Department"), new DataColumn("Designation"), new DataColumn("CompanyName") }); dt.Rows.Add(1001, "Nikunj Satasiya", "Computer/IT", "Software Engineer", "Casepoint LLC."); dt.Rows.Add(1002, "Hiren Dobariya", "Computer/IT", "Software Engineer", "Version System Pvt.Ltd."); dt.Rows.Add(1003, "Vivek Ghadiya", "Sales Department", "Sales Executive", "Balaji Wafers Pvt.Ltd."); dt.Rows.Add(1004, "Pritesh Dudhat", "Networking", "Network Engineer", "Narola Infotech"); dt.Rows.Add(1005, "Priya Patel", "Computer/IT", "Software Engineer", "Thomson Reuters India Pvt.Ltd."); return dt; } catch (Exception) { throw; } }
VB.NET
Private Function GetEmployeeData() As DataTable Try Dim dt As DataTable = New DataTable dt.Columns.AddRange(New DataColumn() {New DataColumn("EmployeeId"), New DataColumn("EmployeeName"), New DataColumn("Department"), New DataColumn("Designation"), New DataColumn("CompanyName")}) dt.Rows.Add(1001, "Nikunj Satasiya", "Computer/IT", "Software Engineer", "Casepoint LLC.") dt.Rows.Add(1002, "Hiren Dobariya", "Computer/IT", "Software Engineer", "Version System Pvt.Ltd.") dt.Rows.Add(1003, "Vivek Ghadiya", "Sales Department", "Sales Executive", "Balaji Wafers Pvt.Ltd.") dt.Rows.Add(1004, "Pritesh Dudhat", "Networking", "Network Engineer", "Narola Infotech") dt.Rows.Add(1005, "Priya Patel", "Computer/IT", "Software Engineer", "Thomson Reuters India Pvt.Ltd.") Return dt Catch ex As Exception Throw End Try End Function
Now, We will bind GridView using the Datasource property of GridView in page load event.
C#
protected void Page_Load(object sender, EventArgs e) { try { if (!this.IsPostBack) { grdEmp.DataSource = GetEmployeeData(); grdEmp.DataBind(); } } catch (Exception) { throw; } }
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load Try If Not Me.IsPostBack Then grdEmp.DataSource = GetEmployeeData() grdEmp.DataBind() End If Catch ex As Exception Throw End Try End Sub
To, fetch selected row cell value from GridView we need to generate selectedIndexChanged event of grid view and needs to write the following code in selectedIndexChanged event of GridView.
C#
protected void grdEmp_SelectedIndexChanged(object sender, EventArgs e) { try { string EmployeeId = grdEmp.SelectedRow.Cells[0].Text; string EmployeeName = grdEmp.SelectedRow.Cells[1].Text; string Department = grdEmp.SelectedRow.Cells[2].Text; string Designation = grdEmp.SelectedRow.Cells[3].Text; string CompanyName = grdEmp.SelectedRow.Cells[4].Text; lblEmployeeDetails.Text = "<b>EmployeeId:</b> " + EmployeeId + " </br><b>EmployeeName:</b> " + EmployeeName + " </br><b>Department:</b> " + Department + " </br><b>Designation:</b> " + Designation + " </br><b>CompanyName:</b> " + CompanyName; } catch (Exception) { throw; } }
VB.NET
Protected Sub grdEmp_SelectedIndexChanged(sender As Object, e As EventArgs) Try Dim EmployeeId As String = grdEmp.SelectedRow.Cells(0).Text Dim EmployeeName As String = grdEmp.SelectedRow.Cells(1).Text Dim Department As String = grdEmp.SelectedRow.Cells(2).Text Dim Designation As String = grdEmp.SelectedRow.Cells(3).Text Dim CompanyName As String = grdEmp.SelectedRow.Cells(4).Text lblEmployeeDetails.Text = "<b>EmployeeId:</b> " & EmployeeId & " </br><b>EmployeeName:</b> " & EmployeeName & " </br><b>Department:</b> " & Department & " </br><b>Designation:</b> " & Designation & " </br><b>CompanyName:</b> " & CompanyName Catch ex As Exception Throw End Try End Sub
Explanation
As you can see in the screen above here we have fetched a selected row cell value for each cell from the GridView and stored in string variable and finally, we displayed in a simple variable.
Output
Recommended Articles
1) Export All The Excel Sheets to DataSet in C# and VB.NET
2) Export JSON to CSV using JQuery/Javascript and Bootstrap in ASP.NET
3) Error 26: Error Locating Server/Instance Specified in SQL Server 2008
4) PIVOT and UNPIVOT in SQL Server with Example
5) Get Distinct Records From Datatable using LINQ C#
Summary
In this article, we learned about the basics of GridView and bootstrap 4 in ASP.NET webforms as well as also learned a binding of GridView, fetching the value from GridView cell.
