In this tutorial, we'll explore how to enhance user interaction by displaying selected row data from a GridView in a dynamically updated div tag. This technique adds a layer of responsiveness to your ASP.NET application, allowing users to view specific details with a simple click.
Overview:
To achieve this functionality, we'll follow two primary steps:
- Bind Data into GridView.
- Use jQuery to get the selected row data from the GridView and display it in a div tag.
Database Setup:
Firstly, create a database table named "users" with fields like userID, username, password, and name.
Create Table users(
userID varchar(50),
username varchar(50),
password varchar(50),
name varchar(50)
)
HTML Markup:
Include a GridView control in your ASP.NET page and a div tag (divgriddisplay) to dynamically display the selected row data.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Gridview_Display_Row_Data.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- JQuery Code Here -->
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SortedAscendingCellStyle BackColor="#EDF6F6" />
<SortedAscendingHeaderStyle BackColor="#0D4AC4" />
<SortedDescendingCellStyle BackColor="#D6DFDF" />
<SortedDescendingHeaderStyle BackColor="#002876" />
</asp:GridView>
</div>
<div id="divgriddisplay"></div>
</form>
</body>
</html>
jQuery Implementation:
Utilize jQuery to capture the click event on GridView rows and display the corresponding data in the div tag.
<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
var gridId = "<%= GridView1.ClientID %>";
var rowClickEvent = "#" + gridId + " tr"
$(rowClickEvent).click(function () {
//Add row containing aditional info when user click on a row inside the grid view
var row = this;
var userID = row.children[0].innerHTML;
var username = row.children[1].innerHTML;
var name = row.children[2].innerHTML;
$('#divgriddisplay').append("<h1>User Details :</h1><hr/> User ID : " + userID + "<br/> Username : " + username + "<br/>Name : " + name);
});
});
</script>
C# Coding : Bind Gridview Control
In your code-behind (C#) file, bind data to the GridView control.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace Gridview_Display_Row_Data
{
public partial class WebForm1 : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
BindGridview();
}
private void BindGridview()
{
SqlCommand cmd = new SqlCommand("Select uid,username,name from users", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
By following these steps, you enable users to click on GridView rows and see detailed information displayed dynamically in a div tag, enhancing the user experience in your ASP.NET application.
0 Comments