Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML

ASP.NET Gridview in Web Forms using Bootstrap 4

Rate me:
Please Sign up or sign in to vote.
5.00/5 (10 votes)
30 Jul 2019CPOL2 min read 104.1K   6.8K   27   11
This post describes implementing ASP.NET Gridview using Bootstrap 4.

Introduction

I found a simple solution while working with ASP.NET Gridview in Web Forms using Bootstrap 4. We are going to try to build our ASP.NET website with other available download software, and write less codes by using Bootstrap. The second article is at ASP.NET Gridview Editable in Web Forms using Bootstrap.

Background

There is an article here but this article will have more options for ASP.NET Gridview while using Bootstrap. Therefore, I would like to share this with others.

Software Requirement Before Using the Code

1. Create New ASP.NET Empty Web Site Project

  1. Use the Microsoft Visual Studio to create a new ASP.NET Empty Web Site called MyGridview.
  2. In Visual Studio, add a new folder called bootstrap to the MyGridview solution.
  3. In Visual Studio, add 2 new Web Forms: Default and Default2 to the MyGridview solution.

2. Bootstrap Files to Empty ASP.NET Web Site Project

  1. Download bootstrap’s Compiled CSS and JS files from http://getbootstrap.com.
  2. Un-zip the downloaded bootstrap file bootstrap-4.0.0-dist.zip.
  3. Copy the folders css and js and paste them to the folder bootstrap of MyGridview solution.

3. Template Files Using Bootstrap to Empty ASP.NET Web Site Project

  1. Download Bootstrap 4 admin dashboard template from GitHub /sufee-admin-dashboard. (Click a button Clone or Download, then click a button Download ZIP).
  2. Un-zip the downloaded sufee-admin-dashboard-master.zip.
  3. Copy all folders and files from folder sufee-admin-dashboard-master, and paste them to the folder bootstrap of MyGridview solution.

After finishing the three steps above, MyGridview solution will look like this:

Image 1

Using the Code

The Default.aspx will display the Gridview using the code below:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 
    <!-- Datatables-->
    <link href="bootstrap/vendors/datatables.net-bs4/css/dataTables.bootstrap4.min.css" 
     rel="stylesheet" />
 
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="jumbotron text-center">
                <h1>My first ASP.NET Gridview using Bootstrap 4</h1>
                <asp:Button ID="btnConfirm" 
                                            runat="server" Text="Go To Second Gridview" 
                                            PostBackUrl="~/Default2.aspx" />
            </div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"
                OnPreRender="GridView_PreRender"
                CssClass="table table-striped">
            </asp:GridView>
 
        </div>
    </form>
 
    <!-- jQuery and Bootstrap JS files -->
    <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
 
    <!-- Datatables-->
    <script src="bootstrap/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="bootstrap/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js">
    </script>
 
    <!-- pace -->
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= GridView1.ClientID %>').dataTable({
                "aLengthMenu": [[10, 50, 75, -1], [10, 50, 75, "All"]],
                "iDisplayLength": 10,
                "order": [[2, "asc"]],
                stateSave: true,
                stateSaveCallback: function (settings, data) {
                    localStorage.setItem
                      ('DataTables_' + settings.sInstance, JSON.stringify(data));
                },
                stateLoadCallback: function (settings) {
                    return JSON.parse
                     (localStorage.getItem('DataTables_' + settings.sInstance));
                }
            });
        });
    </script>
 
</body>
 
</html>

The Gridview is using the script at the bottom for the Bootstrap and Datatable CSS and JS.
Note: There is a GridView_PreRender required.

The Default.aspx.cs uses the code below:

C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Sl");
        dt.Columns.Add("data");
        dt.Columns.Add("heading1");
        dt.Columns.Add("heading2");
        for (int i = 0; i < 100; i++)
        {
            dt.Rows.Add(new object[] { i, 123 * i, 4567 * i, 2 * i, });
        }
 
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
 
    protected void GridView_PreRender(object sender, EventArgs e)
    {
        GridView gv = (GridView)sender;
 
        if ((gv.ShowHeader == true && gv.Rows.Count > 0)
            || (gv.ShowHeaderWhenEmpty == true))
        {
            //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        if (gv.ShowFooter == true && gv.Rows.Count > 0)
        {
            //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
            gv.FooterRow.TableSection = TableRowSection.TableFooter;
        }
    }
}

The Bootstrap can export data from the gridview, therefore the Default2.aspx will use the code below:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 
    <!-- Datatables-->
    <link href="bootstrap/vendors/datatables.net-bs4/css/dataTables.bootstrap4.min.css" 
     rel="stylesheet" />
    <link href="bootstrap/vendors/datatables.net-buttons-bs4/css/buttons.bootstrap4.css" 
     rel="stylesheet" />
 
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="h-25"></div>
            <div class="jumbotron text-center">
                <h1>My second ASP.NET Gridview using Bootstrap 4</h1>
                <asp:Button ID="btnConfirm" runat="server" 
                 Text="Go To First Gridview" PostBackUrl="~/Default.aspx" />
            </div>
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true"
                OnPreRender="GridView_PreRender"
                CssClass="table table-striped">
            </asp:GridView>
 
        </div>
    </form>
 
    <!-- jQuery and Bootstrap JS files -->
    <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
 
    <!-- Datatables-->
    <script src="bootstrap/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="bootstrap/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js">
    </script>
    <script src="bootstrap/vendors/datatables.net-buttons/js/dataTables.buttons.min.js">
    </script>
    <script src="bootstrap/vendors/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js">
    </script>
    <script src="bootstrap/vendors/jszip/dist/jszip.min.js"></script>
    <script src="bootstrap/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="bootstrap/vendors/pdfmake/build/vfs_fonts.js"></script>
    <script src="bootstrap/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="bootstrap/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="bootstrap/vendors/datatables.net-buttons/js/buttons.colVis.min.js"></script>
    <script src="bootstrap/assets/js/init-scripts/data-table/datatables-init.js"></script> 
 
    <!-- pace -->
    <script>
        var handleDataTableButtons = function () {
            "use strict";
            0 !== $('#<%= GridView2.ClientID %>').length && 
                  $('#<%= GridView2.ClientID %>').DataTable({
            dom: "Bfrtip",
            buttons: [{
                extend: "copy",
                className: "btn-sm"
            }, {
                extend: "csv",
                className: "btn-sm"
            }, {
                extend: "excel",
                className: "btn-sm"
            }, {
                extend: "pdf",
                className: "btn-sm"
            }, {
                extend: "print",
                className: "btn-sm"
            }],
            responsive: !0
        })
    },
    TableManageButtons = function () {
        "use strict";
        return {
            init: function () {
                handleDataTableButtons()
            }
        }
    }();
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= GridView2.ClientID %>').dataTable();
        });
        TableManageButtons.init();
    </script>
 
</body>
 
</html>

The Default2.aspx.cs is not different from the first, but will be displayed for reference.

C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Sl");
        dt.Columns.Add("data");
        dt.Columns.Add("heading1");
        dt.Columns.Add("heading2");
        for (int i = 0; i < 100; i++)
        {
            dt.Rows.Add(new object[] { i, 123 * i, 4567 * i, 2 * i, });
        }
 
        GridView2.DataSource = dt;
        GridView2.DataBind();
    }
 
    protected void GridView_PreRender(object sender, EventArgs e)
    {
        GridView gv = (GridView)sender;
 
        if ((gv.ShowHeader == true && gv.Rows.Count > 0)
            || (gv.ShowHeaderWhenEmpty == true))
        {
            //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        if (gv.ShowFooter == true && gv.Rows.Count > 0)
        {
            //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
            gv.FooterRow.TableSection = TableRowSection.TableFooter;
        }
    }
}

The default.aspx using Bootstrap 4 will be displayed as shown below:

Image 2

The default2.aspx using Bootstrap 4 will be displayed as shown below:

Image 3

Points of Interest

You can browse the sub folder http://localhost/MyGridview/bootstrap/index.html to see what the Sufee can do. You can invest time to learn how to use the bootstrap CSS and JS files for your future project. Happy programming!

History

This is my first article, and I hope you like to save time by using bootstrap in ASP.NET.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer Los Angeles County
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionLarge Data Pin
kouts11-Dec-22 4:16
kouts11-Dec-22 4:16 
How do I modify this solution to include large data. it seems that if I have more than 1K rows, it breaks the search functionality.
QuestionThanks Pin
jonno998-Jul-21 6:27
jonno998-Jul-21 6:27 
QuestionImage Pin
ritzshaani8-Mar-21 20:58
ritzshaani8-Mar-21 20:58 
QuestionError in index.d.ts Pin
Member 1367093530-Apr-20 5:49
Member 1367093530-Apr-20 5:49 
Questionchange search to filter Pin
jiangbb10-Sep-19 3:57
jiangbb10-Sep-19 3:57 
AnswerRe: change search to filter Pin
Don Hoang11-Sep-19 14:20
Don Hoang11-Sep-19 14:20 
QuestionInclude buttons delete/add/update buttons Pin
huicho8-Jul-19 11:05
huicho8-Jul-19 11:05 
AnswerRe: Include buttons delete/add/update buttons Pin
Don Hoang30-Jul-19 8:38
Don Hoang30-Jul-19 8:38 
GeneralRe: Include buttons delete/add/update buttons Pin
huicho30-Jul-19 9:07
huicho30-Jul-19 9:07 
QuestionBootstrap 4.X Exel Button Pin
Foglio7723-Jan-19 6:10
Foglio7723-Jan-19 6:10 
AnswerRe: Bootstrap 4.X Exel Button Pin
Don Hoang23-Jan-19 10:30
Don Hoang23-Jan-19 10:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.