Responsive GridView Example in ASP.Net

In this tutorial, we'll explore how to create a responsive GridView in ASP.NET, ensuring seamless user experiences across various devices. With a focus on mobile-first design principles and Bootstrap integration, developers can build web applications that adapt gracefully to different screen sizes.

Why Responsive Design Matters:

  • User Experience: Responsive design ensures optimal viewing experiences, regardless of the device used, leading to higher user satisfaction.
  • SEO Benefits: Google prioritizes mobile-friendly websites in search rankings, making responsive design crucial for improved visibility.
  • Future-Proofing: As mobile usage continues to rise, responsive design future-proofs your web applications, accommodating evolving user preferences.

Step-by-Step Guide:

  1. Include Bootstrap: Begin by including Bootstrap CSS in your ASP.NET project. You can use a CDN link for quick integration.

  2. Markup for GridView:

    • Use <div class="table-responsive"> to wrap your GridView, enabling horizontal scrolling on smaller devices.
    • Apply Bootstrap's table classes (table, table-striped, table-bordered) to style the GridView.
  3. Code-behind for Data Binding:

    • Use C# code to bind data to the GridView. This can be fetched from a database, API, or in-memory collection.
    • Ensure that data retrieval and binding follow best practices for efficiency and security.

Complete Code Example:

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

namespace ResponsiveGridViewExample
{
    public partial class ResponsiveGridView : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGridView();
            }
        }

        private void BindGridView()
        {
            // Sample data
            List<Product> productList = new List<Product>()
            {
                new Product { ID = 1, Name = "Product 1", Price = 100 },
                new Product { ID = 2, Name = "Product 2", Price = 150 },
                new Product { ID = 3, Name = "Product 3", Price = 200 },
                new Product { ID = 4, Name = "Product 4", Price = 120 },
                new Product { ID = 5, Name = "Product 5", Price = 180 }
            };

            GridViewData.DataSource = productList;
            GridViewData.DataBind();
        }

        // Sample Product class
        public class Product
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public decimal Price { get; set; }
        }
    }
}

Then, in your ASP.NET markup, you'll need to define the columns for the GridView:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResponsiveGridView.aspx.cs" Inherits="ResponsiveGridViewExample.ResponsiveGridView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Responsive GridView</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <h1>Responsive GridView Example</h1>
            <div class="table-responsive">
               <asp:GridView ID="GridViewData" runat="server" CssClass="table table-striped table-bordered" AutoGenerateColumns="false"  >
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Price" HeaderText="Price" DataFormatString="{0:C}" />
    </Columns>
</asp:GridView>
            </div>
        </div>
    </form>
    <!-- Include Bootstrap JS (optional) -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Implementing responsive design with GridView in ASP.NET empowers developers to deliver user-friendly and visually appealing web applications. By embracing mobile-first design principles and integrating Bootstrap, developers can ensure seamless experiences across all devices.

 
Asp.Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
1 + 3 =
 

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice