In the ever-evolving landscape of web development, user experience plays a pivotal role. One effective way to enhance the user interface of your ASP.NET application is by incorporating stylish and interactive elements. In this tutorial, we'll explore how to implement a captivating row hover effect on an ASP.NET GridView using custom CSS styles.
Visualizing the Result
Before delving into the technical details, let's take a sneak peek at what we'll achieve: GridView Row Hover with Custom CSS Style. This dynamic effect adds a touch of sophistication to your data presentation.
Setting Up the Database
To get started, let's create a sample database and populate it with some data. The following SQL script accomplishes this:
USE [master]
GO
/****** Object: Table [dbo].[Book] Script Date: 05/11/2015 15:04:27 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Book](
[Book_Id] [nvarchar](5) NULL,
[Book_name] [nvarchar](50) NULL,
[Book_author] [nvarchar](30) NULL,
[Book_Publisher_name] [nvarchar](50) NULL,
[Book_Published_date] [nvarchar](30) NULL
) ON [PRIMARY]
GO
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'bk', N'sfjskj', N'jfdskfj', N'fjdksjfk', N'4/4/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'bk8', N'kk', N'kk', N'kk', N'4/8/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk1', N'ASP.NET', N'Krishna', N'MyHome Publisher', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk2', N'C#.NET', N'Arvind', N'James Street Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk3', N'SQL SERVER', N'James', N'Hi-Tech Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk4', N'JAVA', N'JAVA RAM', N'MyHome Publisher', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk5', N'HTML', N'HTML Raghu', N'James Street Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk6', N'CSS', N'CSS Chandra', N'Hi-Tech Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk7', N'JAVASCRIPT', N'JAVA RAM', N'MyHome Publishers', N'3/30/2015 12:00:00 AM')
Crafting the CSS Magic
Now, let's infuse life into our GridView by adding a mesmerizing row hover effect. The CSS code below achieves this and can be tailored to suit your design preferences:
<style type="text/css">
#GridView1
{
background:#fafafa;
}
#GridView1 .HeaderStyle
{
background:#0066cc;
color:#ffffff;
padding:7px 10px 7px 10px;
}
#GridView1 th
{
padding:10px 15px 10px 15px;
}
#GridView1 td
{
padding:5px 10px 5px 10px;
text-align:left;
}
#GridView1 td:hover
{
background:#6699cc;
color:#ffffff;
padding:5px 10px 5px 10px;
text-align:left;
}
</style>
This CSS snippet not only adds a subtle background color change but also modifies the text color when a user hovers over a row in the GridView.
Integrating the Styled GridView into ASP.NET
With the database set up and the CSS ready, it's time to integrate the GridView into your ASP.NET page. The following HTML markup achieves this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.Gridviews.WebForm1" %>
<!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">
<!--- ADD CSS Code Here ---->
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" HeaderStyle-CssClass="HeaderStyle"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Book_Id" HeaderText="Book ID"
SortExpression="Book_Id" />
<asp:BoundField DataField="Book_name" HeaderText="Book Name"
SortExpression="Book_name" />
<asp:BoundField DataField="Book_author" HeaderText="Book Author"
SortExpression="Book_author" />
<asp:BoundField DataField="Book_Publisher_name"
HeaderText="Book Publisher Name" SortExpression="Book_Publisher_name" />
<asp:BoundField DataField="Book_Published_date"
HeaderText="Book Published Date" SortExpression="Book_Published_date" />
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"
SelectCommand="SELECT [Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date] FROM [Book]"></asp:SqlDataSource>
</form>
</body>
</html>
This ASP.NET code incorporates the GridView, binds it to the "Book" table in the database using a SqlDataSource, and ensures that our custom CSS styles are applied to both the header and the rows, providing a seamless and engaging user experience.
In conclusion, by following these steps, you can effortlessly add a visually appealing row hover effect to your ASP.NET GridView, transforming it into a more interactive and dynamic component within your web application. Experiment with colors and styles to match your project's aesthetics. Happy coding!
0 Comments