What is GridView?
The GridView in ASP.NET is a powerful control that allows developers to display tabular data, such as records from a SQL Server database, in a neat and customizable format. With GridView, you can:
- Display data in rows and columns.
- Add paging and sorting.
- Apply CSS styling for professional layouts.
- Easily bind data from SQL Stored Procedures.
It is perfect for scenarios where you want to fetch data from SQL Server and show it in a structured format.
Step-by-Step Implementation
Let’s go through the process of fetching and binding data to GridView in ASP.NET VB.NET using a stored procedure.
Create the SQL Stored Procedure
We’ll use a procedure called Students_List that retrieves all student records.
CREATE PROCEDURE [dbo].[Students_List]
AS
BEGIN
SET NOCOUNT ON;
SELECT
StudentID AS 'StudentID',
StudentNo AS 'StudentNo',
FirstName AS 'FirstName',
LastName AS 'LastName',
Email AS 'Email',
Mobile AS 'Mobile',
DateOfBirth AS 'DateOfBirth',
StudentFee AS 'StudentFee'
FROM
Students;
END;
GO
Tips: Beginner’s Guide to MSSQL: Create SQL Table, Insert, Update, and Delete Data
ASP.NET GridView Markup
Here’s the ASP.NET markup inside an UpdatePanel with custom styles and paging enabled.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="false" AllowPaging="true"
OnPageIndexChanging="GridView1_PageIndexChanging"
PageSize="8" CssClass="GridViewStyle">
<Columns>
<asp:TemplateField HeaderText="Student No.">
<ItemTemplate>
<asp:Label ID="lblStudentNo" runat="server" Text='<%# Eval("StudentNo")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LastName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:HyperLink ID="hlEmail" runat="server" Text='<%# Eval("Email") %>' NavigateUrl='<%# "mailto:" + Eval("Email") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobile">
<ItemTemplate>
<asp:Label ID="lblMobile" runat="server" Text='<%# Eval("Mobile")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Birth">
<ItemTemplate>
<asp:Label ID="lblDateOfBirth" runat="server" Text='<%# Eval("DateOfBirth", "{0:MMM dd, yyyy}")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Fee">
<ItemTemplate>
<asp:Label ID="lblStudentFee" runat="server" Text='<%# Eval("StudentFee", "{0:N2}")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div style="text-align: center">No records found.</div>
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
VB.NET Code-Behind
The VB.NET code connects to SQL Server, calls the stored procedure, and binds the results to the GridView.
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Public Class gridview_bind_data
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindData_GridView1()
End If
End Sub
Private Sub BindData_GridView1()
Using conn As New SqlConnection(ConfigurationManager.ConnectionStrings("DbConstr").ConnectionString)
Using cmd As New SqlCommand("Students_List", conn)
cmd.CommandType = CommandType.StoredProcedure
Using sda As New SqlDataAdapter(cmd)
Using dt As New DataTable()
sda.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
End Using
End Using
End Using
End Using
End Sub
Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
GridView1.PageIndex = e.NewPageIndex
BindData_GridView1()
End Sub
End Class
Styling with SCSS (Optional)
For a modern look, here’s some SCSS styling:
.GridViewStyle {
border-collapse: collapse;
font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 14px;
color: #333;
th, td {
padding: 5px;
border: 1px solid #ddd;
}
.HeaderStyle {
background: #4a90e2;
color: #fff;
font-weight: bold;
}
.RowStyle {
background: #fff;
&:hover { background: #f5faff; }
}
.AlternatingRowStyle {
background: #f9f9f9;
&:hover { background: #f0f7ff; }
}
.PagerStyle {
background: #f2f2f2;
padding: 5px;
}
}
Frequently Asked Questions (FAQ)
1. Why use a stored procedure instead of inline SQL?
- Stored procedures improve security, performance, and maintainability compared to inline queries.
2. How do I enable sorting in GridView?
- Add AllowSorting="true" in the GridView and handle the Sorting event.
3. What if my stored procedure requires parameters?
- You can add parameters to the command object using:
cmd.Parameters.AddWithValue("@StudentID", 1)
or
cmd.Parameters.Add("@StudentID", SqlDbType.Int).Value = 1
4. Can I export GridView data to Excel or PDF?
- Yes! You can use libraries like EPPlus (Excel) or iTextSharp (PDF).
Conclusion
In this tutorial, we learned how to:
- Create a SQL Server stored procedure.
- Fetch and bind data to ASP.NET GridView.
- Implement paging for better performance.
- Style GridView with SCSS for a modern UI.
The GridView remains one of the most versatile controls in ASP.NET Web Forms, and by combining it with SQL stored procedures, you can build scalable and secure applications.
Keep practicing with different examples and you’ll soon become confident with SQL queries!
If you found this article helpful, don’t forget to share it with your developer community!