Introduction:
In the realm of web development, creating visually appealing and user-friendly interfaces is paramount. One way to elevate the aesthetics of your ASP.NET application is by implementing hover effects on the GridView component. This article explores how to achieve an eye-catching "Entire Row Hover" effect using custom CSS. Let's dive into the steps of creating a database, defining CSS styles, and integrating them into an ASP.NET GridView.
Create the Database:
To begin, we need a database structure to showcase in our GridView. The following SQL script creates a 'Book' table with relevant columns such as Book_Id, Book_name, Book_author, Book_Publisher_name, and Book_Published_date.
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')
Define CSS Style:
Next, let's create custom CSS styles to enhance the GridView appearance. The styles include background color changes for headers, regular rows, and a distinctive hover effect for the entire row.
<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>
HTML Markup - Add GridView to ASP.NET Page
Now, integrate the GridView into your ASP.NET page. This markup includes the GridView itself, along with the necessary columns and data-binding logic.
<%@ 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>
Conclusion:
By following these steps, you can enhance the visual appeal of your ASP.NET application with a GridView that features a captivating Entire Row Hover effect. This not only improves the user experience but also adds a professional touch to your web development projects. Experiment with different color schemes and tweak the CSS styles to match your application's design preferences.
0 Comments