In the dynamic world of web development, creating visually appealing and user-friendly interfaces is crucial. One way to achieve this is by customizing the style of ASP.NET controls like GridView using CSS. In this tutorial, we'll explore how to apply custom styles to an ASP.NET GridView, making your web application not only functional but also aesthetically pleasing.
Create Database:
Before we dive into styling, let's set up a sample database to work with. Below is a SQL script to create a simple "Book" table:
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')
This script creates a table named "Book" with various columns such as Book_Id, Book_name, Book_author, Book_Publisher_name, and Book_Published_date.
Styling with CSS:
Now, let's move on to the fun part – styling our GridView with CSS. The following CSS code is designed to enhance the appearance of the GridView:
<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;
}
</style>
This CSS code defines styles for the GridView, its header, and the individual cells. The colors and padding can be adjusted according to your design preferences.
Add Gridview to ASP.NET Page
Now, let's integrate the styled GridView into an ASP.NET page. Below is a snippet of the ASP.NET code:
<%@ 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 and binds it to the "Book" table in the database using a SqlDataSource. The HeaderStyle-CssClass attribute ensures that our custom CSS styles are applied to the GridView header.
By combining the SQL script, CSS styling, and ASP.NET code, you can create a visually appealing and well-organized GridView for displaying and managing data in your ASP.NET web application. Feel free to customize the styles further to suit your project's design requirements. Happy coding!
0 Comments