Introduction:
GridViews are a powerful tool in web development, offering a dynamic way to display and manipulate data. In this article, we'll explore a practical scenario: how to retrieve selected row data from a GridView and display it outside the control. By following our step-by-step guide and utilizing the provided HTML, CSS, and C# code snippets, you'll be able to implement this functionality seamlessly in your ASP.NET web application.
HTML Markup: Designing the Page
The foundation of our GridView lies in the HTML markup. The provided code sets up an ASP.NET page with a GridView control and an external table to display the selected row's details. The GridView is configured with essential properties like paging and a defined page size.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style>
<!------- Copy and Paste CSS Code Here ------>
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999"
BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical"
onpageindexchanging="GridView1_PageIndexChanging" PageSize="3"
onrowdatabound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" AutoPostBack="True" OnCheckedChanged="chk_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book ID">
<EditItemTemplate>
<asp:TextBox ID="txtbookid" runat="server" Text='<%# Bindundefined"Book_Id") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblbookid" runat="server" Text='<%# Bindundefined"Book_Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Name">
<EditItemTemplate>
<asp:TextBox ID="txtbookname" runat="server" Text='<%# Bindundefined"Book_name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblbookname" runat="server" Text='<%# Bindundefined"Book_name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Author">
<EditItemTemplate>
<asp:TextBox ID="txtbookauthor" runat="server" Text='<%# Bindundefined"Book_author") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblbookauthor" runat="server" Text='<%# Bindundefined"Book_author") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Publisher Name">
<EditItemTemplate>
<asp:TextBox ID="txtbookpubname" runat="server"
Text='<%# Bindundefined"Book_Publisher_name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblbookpubname" runat="server" Text='<%# Bindundefined"Book_Publisher_name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Published Date">
<EditItemTemplate>
<asp:TextBox ID="txtbookpubdate" runat="server"
Text='<%# Bindundefined"Book_Published_date") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblbookpubdate" runat="server" Text='<%# Bindundefined"Book_Published_date") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
<br /><br />
<table id="table">
<tr>
<th colspan="2">Display Gridview Selected Book's Details :</th>
</tr>
<tr>
<td>Book ID</td>
<td><asp:TextBox ID="txtgetbid" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Book Name</td>
<td><asp:TextBox ID="txtgetbname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Book Author</td>
<td><asp:TextBox ID="txtgetbauthor" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Book Publisher Name</td>
<td><asp:TextBox ID="txtgetbpubname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Book Published Date</td>
<td><asp:TextBox ID="txtgetbpubdate" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<asp:Label ID="lblerror" runat="server"></asp:Label>
</form>
</body>
</html>
Gridview Properties
- Allowing Paging : True
- Page Size : 3
- Double Click on PageIndexChanging Event
CSS Code: Styling for Aesthetic Appeal
Good design is crucial for user experience. The included CSS code enhances the visual appeal of the page, providing a clean and organized layout. This snippet styles the external table, setting up borders, colors, and padding to create a professional look.
<style>
#table
{
border-collapse:collapse;
width:450px;
}
#table th
{
border:1px solid darkblue;
background:darkblue;
width:450px;
color:#fafafa;
padding:5px 15px 5px 15px;
text-align:left;
}
#table tr td:nth-childundefined1)
{
border:1px solid darkblue;
background:#ddd;
width:180px;
text-align:left;
padding:5px 10px 5px 10px;
}
#table tr td:nth-childundefined2)
{
width:270px;
border:1px solid darkblue;
text-align:left;
padding-left:10px;
}
</style>
C# Code: Making It Functional
The C# code is where the magic happens. Let's break down the key components:
Namespace and Page Load Event:
The necessary namespaces are imported, and the page load event ensures that data is loaded into the GridView when the page is initially accessed.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ToString());
string query;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGridData();
}
}
}
Bind Gridview Control:
The FillGridData method retrieves data from the database and binds it to the GridView. This is a fundamental step in setting up the GridView with the necessary data.
private void FillGridData()
{
query = "select * from Book";
SqlDataAdapter da=new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds, "book");
GridView1.DataSource = ds;
GridView1.DataBind();
}
Gridview PageIndexChanging Event:
Handling the page index changing event ensures that the GridView remains functional when navigating through pages.
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
FillGridData();
}
Gridview CheckBox Checked Control Event:
This is the heart of the article. The chk_CheckedChanged method is triggered when a CheckBox within the GridView is checked. It iterates through the rows, identifies the selected row, and extracts the relevant data (Book ID, Name, Author, Publisher, and Published Date). This data is then dynamically displayed in external TextBoxes.
protected void chk_CheckedChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
if (((CheckBox)row.FindControl("chk")).Checked == true)
{
Label lblbookid = (Label)row.FindControl("lblbookid");
Label lblbookname = (Label)row.FindControl("lblbookname");
Label lblbookauthor = (Label)row.FindControl("lblbookauthor");
Label lblbookpubname = (Label)row.FindControl("lblbookpubname");
Label lblbookpubdate = (Label)row.FindControl("lblbookpubdate");
txtgetbid.Text = lblbookid.Text;
txtgetbname.Text = lblbookname.Text;
txtgetbauthor.Text = lblbookauthor.Text;
txtgetbpubname.Text = lblbookpubname.Text;
txtgetbpubdate.Text = lblbookpubdate.Text;
}
}
}
Conclusion:
By following the provided guide and implementing the code snippets into your ASP.NET web application, you can unlock the potential of GridView for handling selected row data. This practical approach enhances user interaction and provides a seamless experience. GridView's versatility, combined with a well-designed user interface, can elevate your web application to new heights.
0 Comments