In the realm of web development, creating visually appealing and user-friendly interfaces is essential for a positive user experience. One effective way to elevate the design of your ASP.NET GridView is by implementing alternate row colors using custom CSS styles. In this tutorial, we'll guide you through the process of creating a database, applying CSS styles, and integrating them into your ASP.NET page for a polished and dynamic GridView.
Visual Inspiration
Before we dive into the technical details, take a moment to envision the outcome: ASP.NET GridView Alternate Row Color With Custom CSS. This visual representation showcases the engaging and organized appearance achieved through alternate row
Setting Up the Database
First things first, let's create a database and populate it with sample data. The SQL script below accomplishes this task:
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 your GridView by adding a captivating alternate row color effect. The CSS code snippet below achieves this and can be customized 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 .alternaterow
{
background:#6699cc;
color:#ffffff;
}
</style>
This CSS snippet introduces a clean and organized look to your GridView, making it easier for users to scan and comprehend the displayed data.
Integrating Alternate Row Colors into ASP.NET
With the database set up and the CSS ready, let's seamlessly integrate the styled GridView into your ASP.NET page. The following HTML markup accomplishes 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 seamlessly integrates the GridView with alternate row colors, creating a visually engaging and organized display of your data.
In conclusion, by following these steps, you can effortlessly enhance the aesthetics and readability of your ASP.NET GridView. Experiment with different colors and styles to match your project's design principles. Happy coding!
0 Comments