在 Web Forms 中使用 Bootstrap 4 的 ASP.NET Gridview

Don Hoang

5.00/5 (10投票s)

2019年1月18日

CPOL

2分钟阅读

112122

7012

这篇文章描述了如何使用 Bootstrap 4 实现 ASP.NET Gridview。

下载源代码 - 14.3 MB

引言

在使用 Bootstrap 4 的 Web Forms 中使用 ASP.NET Gridview 时，我发现了一个简单的解决方案。我们将尝试使用其他可用的下载软件构建我们的 ASP.NET 网站，并通过使用 Bootstrap 编写更少的代码。第二篇文章位于使用 Bootstrap 在 Web Forms 中可编辑的 ASP.NET Gridview。

背景

这里有一篇文章，但这篇文章将为 ASP.NET Gridview 提供更多选项，同时使用 Bootstrap。因此，我想与其他人分享这一点。

使用代码之前的软件要求

1. 创建新的 ASP.NET 空网站项目

使用 Microsoft Visual Studio 创建一个新的 ASP.NET 空网站，命名为 MyGridview。
在 Visual Studio 中，向 MyGridview 解决方案添加一个名为 *bootstrap* 的新文件夹。
在 Visual Studio 中，向 MyGridview 解决方案添加 2 个新的 Web Forms：Default 和 Default2。

2. 将 Bootstrap 文件添加到空的 ASP.NET 网站项目

从 https://bootstrap.ac.cn 下载 Bootstrap 的已编译的 CSS 和 JS 文件。
解压缩下载的 Bootstrap 文件 *bootstrap-4.0.0-dist.zip*。
复制文件夹 *css* 和 *js*，并将它们粘贴到 MyGridview 解决方案的文件夹 *bootstrap* 中。

3. 使用 Bootstrap 的模板文件到空的 ASP.NET 网站项目

从 GitHub puikinsh/sufee-admin-dashboard 下载 Bootstrap 4 管理仪表板模板。（单击 Clone or Download 按钮，然后单击 Download ZIP 按钮）。
解压缩下载的 *sufee-admin-dashboard-master.zip*。
复制文件夹 *sufee-admin-dashboard-master* 中的所有文件夹和文件，并将它们粘贴到 MyGridview 解决方案的文件夹 *bootstrap* 中。

完成以上三个步骤后，MyGridview 解决方案将如下所示

Using the Code

_Default.aspx_ 将使用以下代码显示 Gridview

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

Gridview 在底部使用脚本来用于 Bootstrap 和 Datatable CSS 和 JS。
注意：需要 GridView_PreRender。

_Default.aspx.cs_ 使用以下代码

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;
        }
    }
}

Bootstrap 可以从 gridview 导出数据，因此 _Default2.aspx_ 将使用以下代码

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

_Default2.aspx.cs_ 与第一个没有区别，但将显示以供参考。

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;
        }
    }
}

使用 Bootstrap 4 的 *default.aspx* 将显示如下所示

使用 Bootstrap 4 的 *default2.aspx* 将显示如下所示

关注点

您可以浏览子文件夹 *https:///MyGridview/bootstrap/index.html* 以查看 Sufee 可以做什么。您可以花时间学习如何在您的未来项目中使用 Bootstrap CSS 和 JS 文件。编程愉快！

历史

这是我的第一篇文章，我希望您喜欢通过在 ASP.NET 中使用 Bootstrap 来节省时间。