Click here to Skip to main content
13,863,289 members
Click here to Skip to main content
Add your own
alternative version

Stats

4.7K views
156 downloads
9 bookmarked
Posted 18 Jan 2019
Licenced CPOL

ASP.NET Gridview in Web Forms using Bootstrap 4

, 19 Jan 2019
Rate this:
Please Sign up or sign in to vote.
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.

Background

There is an article https://www.codeproject.com/Tips/1085031/Easy-Bootstrap-Pagination-for-ASP-NET-Gridview but this article will have more option for ASP.NET Gridview while using Bootstrap.  Therefore, I would like to share this to 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 finished 3 steps above, MyGridview solution will look like this

Using the Code

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

<%@ 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 is using the code below

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 using the code below

<%@ 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

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

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

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)

Share

About the Author

Don Hoang
Web Developer Los Angeles County
United States United States
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
QuestionBootstrap 4.X Exel Button Pin
Foglio7723-Jan-19 7:10
memberFoglio7723-Jan-19 7:10 
AnswerRe: Bootstrap 4.X Exel Button Pin
Don Hoang23-Jan-19 11:30
memberDon Hoang23-Jan-19 11: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190214.1 | Last Updated 19 Jan 2019
Article Copyright 2019 by Don Hoang
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid