游戏技术文章

ASP.NET MVC 5 實作 GridView 分頁

时间:2017-3-26 15:37:46  作者:棋牌资源网  来源:棋牌资源网  查看:7839  评论:0
内容摘要:本文用 ASP.NET MVC 5 實作一個 GridView,功能包括: 分頁(paging)、關鍵字過濾(filtering)、排序(sorting)、AJAX 非同步執行,外觀上亦支援 Responsive Web Design (響應式網頁)。執行畫面,如下圖 ...
本文用 ASP.NET MVC 5 實作一個 GridView,功能包括: 分頁(paging)、關鍵字過濾(filtering)、排序(sorting)、AJAX 非同步執行,外觀上亦支援 Responsive Web Design (響應式網頁)。執行畫面,如下圖 1。


ASP.NET MVC 實作 GridView 及 paging 的做法有很多種,本文是參考幾篇 Code Project 的文章 [1]。 閱讀前先建立一個觀念,paging 有分「前端」、「後端」兩種,應避免混為一談,如下:
1、前端:指「使用者介面」,如:頁碼列,上一頁、下一頁…等按鈕。
2、後端:指「撈資料庫」的方式,如:使用 SQL Server 的 ROW_NUMBER 函數,或 T-SQL 語法 OFFSET-FETCH,去資料庫撈,畫面上該頁要呈現的資料。

本文使用的第三方元件:
1、jQuery datatables:用來處理上述的「前端」分頁,亦即用來呈現 Grid 表格的外觀、使用者介面,以及和使用者的互動 (除了 jQuery,還透過 bootstrap、CSS 及一支 Flash 動畫檔)。
2、datatables.mvc5:用來處理上述的「後端」分頁,亦即用來撈資料庫。並可避免像過去 WebForm 要自己撰寫,處理 paging 的 SQL 語句或 Stored Procedure。此外,此元件也支援 Controller 層的 strongly typed model。

-------------------------------------------------
本文的範例下載點:
http://files.cnblogs.com/files/WizardWu/170326.zip
範例使用 Visual Studio 2015 (只要能支援 ASP.NET MVC 5 即可),需要 SQL Server 的 Northwind 資料庫
-------------------------------------------------


ASP.NET_MVC_5_實作_GridView_分頁
圖 1 範例執行畫面

首先在 VS 2015 中,新增一個 Web「專案(project)」,並勾選 MVC 範本。

接著在 Models 層中,新增一個空的 C# 類別 Order.cs (本文是以 Orders 資料表為範例),並手動加入,想呈現在 GridView 中,各個欄位的 get/set accessor,如下方程式碼:

复制代码
using System.ComponentModel.DataAnnotations;

namespace NorthwindPaging.Models
{
    public class Order
    {
        public int OrderID { get; set; }

        [Display(Name = "客戶 ID")]
        public string CustomerID { get; set; }

        [Display(Name = "員工 ID")]
        public decimal EmployeeID { get; set; }

        [Display(Name = "運送國別")]
        public string ShipCountry { get; set; }

        [Display(Name = "運送費用")]
        public decimal Freight { get; set; }
    }
}
复制代码

接著打開 Models/IdentityModels.cs 這支檔案,裡面是 ASP.NET identity 2.0 的相關功能。我們加入以下這一行 Order 資料表的 property 程式:

public DbSet<Order> Orders { get; set; }    //自訂類別 Order

接著在 Controller 層,新增一個命名為 OrderController 的空白「控制器」。

附註: 本文範例,會使用 Entity Framework 的觀念及 DbSet、DbContext 等物件及 binding 功能,但不使用 .edmx 實體模型檔。

 

安裝 jQuery datatables

裝著要透過 NuGet 安裝 jQuery datatables,如下圖 2。

ASP.NET_MVC_5_實作_GridView_分頁

圖 2 安裝 jQuery datatables

安裝完後,會自動在專案的 Content、Scripts 資料夾底下,各產生一個 DataTables 資料夾,及相關的 .css、.swf、.js 檔案。

接下來我們要手動幫 jQuery datatables 做註冊的動作,在 App_Start/BundleConfig.cs 裡,加入以下兩段程式碼:

复制代码
// jquery datataables js files
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
            "~/Scripts/DataTables/jquery.dataTables.min.js",
            "~/Scripts/DataTables/dataTables.bootstrap.js"));

// jquery datatables css file
bundles.Add(new StyleBundle("~/Content/datatables").Include(
          "~/Content/DataTables/css/dataTables.bootstrap.css"));
复制代码

接著在 Views/Shared/_Layout.cshtml,加入以下兩行程式碼:

@Styles.Render("~/Content/datatables")
@Scripts.Render("~/bundles/datatables")

 

安裝 datatables.mvc5

裝著要透過 NuGet 安裝 datatables.mvc5,如下圖 3。

ASP.NET_MVC_5_實作_GridView_分頁

圖 3 安裝 datatables.mvc5

安裝完後,專案中會多出一個對 DataTables.Mvc.dll 的參考。
 

設定資料庫的連線

首先,在 Web.config 的資料庫連線字串 DefaultConnection 中,手動加入 Northwind 的連線設定。

接著,在 Controllers/OrderController.cs 加入以下的程式碼,以取得資料庫驗證及連線,供後續 Controller 的 Action 方法使用。

复制代码
private ApplicationDbContext _dbContext;

public ApplicationDbContext DbContext
{
    get
    {
        return _dbContext ?? HttpContext.GetOwinContext().Get<ApplicationDbContext>();
    }
    private set
    {
        _dbContext = value;
    }
}
复制代码

 

初始化 jQuery datatables

在 Views/Order 資料夾裡,加入一個空白的「檢視」,網頁命名為 OrderGridView (或任何名稱)。接著清空 OrderGridView.cshtml 的所有內容 (jQuery datatables 會自動產生 head、body 等 tag),手動加入以下 HTML tag:

复制代码
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Orders 資料表</h1>
            </div>
            <div class="panel-body">
                <table id="orders-data-table" class="table table-striped table-bordered" style="width:100%;"></table>
            </div>
        </div>
    </div>
</div>
复制代码

接著繼續在 OrderGridView.cshtml 裡,手動加入以下的程式,以便用 AJAX 方式,由 server-side 從資料庫撈出畫面上,該頁要呈現的資料:

复制代码
@section Scripts
{
    <script type="text/javascript">
        var orderListVM;
        $(function () {
            orderListVM = {
                dt: null,

                init: function () {
                    dt = $('#orders-data-table').DataTable({
                        "serverSide": true,
                        "processing": true,
                        "ajax": {
                            "url": "@Url.Action("Get","Order")"
                        },
                        "columns": [
                            { "title": "Order ID", "data": "OrderID", "searchable": true },
                            { "title": "Customer ID", "data": "CustomerID", "searchable": true },
                            { "title": "Employee ID", "data": "EmployeeID", "searchable": true },
                            { "title": "Ship Country", "data": "ShipCountry", "searchable": true },
                            { "title": "Freight", "data": "Freight", "searchable": true }
                        ],
                        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                    });
                }
            }

            // initialize the datatables
            orderListVM.init();

        });
    </script>
}
复制代码

上方程式碼中,serverSide": true,表示 paging、filtering、sorting 要依使用者每次的操作,從 server-side 去取得;而非一次將符合 SELECT WHERE 條件的資料全部撈出,再由 client-side 去處理 (若資料量過大,會拖垮效能)。 
processing": true,表示在存取資料庫時,畫面上是否要顯示,載入時的 processing 特效及字樣。若不設定,預設為 false。 lengthMenu 表示每頁要顯示的資料筆數,本範例可讓使用者用 combo box 作選擇。

 

安裝 System.Linq.Dynamic

本範例的 sorting 有用到 Dynamic LINQ 的語法 (非必要,只是為了簡化 sorting 的程式碼),此功能要額外安裝。我們透過 NuGet 安裝 Dynamic LINQ,如下圖 4。

ASP.NET_MVC_5_實作_GridView_分頁
圖 4 安裝 Dynamic LINQ

 

撰寫 Controller 裡的 sorting、filtering、paging 功能

接下來撰寫 OrderController 裡,Get 這個 Action 方法,程式碼如下:

ASP.NET_MVC_5_實作_GridView_分頁 ActionResult Get()

這個自訂的 Get 方法,回傳的是 JsonResult。其中第一個參數,是第三方元件 datatables.mvc5 的自訂類別 DataTablesResponse。若我們在前端 OrderGridView.cshtml 裡,所撰寫的對應 columns 沒錯的話,GridView 即可正常顯示資料。且由於 jQuery datatables 支援 Bootstrap,因此這個 GridView 外觀上亦支援 RWD (響應式網頁),以行動裝置瀏覽時,畫面會自動縮放。
 

GridView 訊息中文化

jQuery datatables 中的文字訊息是英文,若要改成中文,可自行開啟 Scripts\DataTables\jquery.dataTables.min.js 這支檔案,手動進行修改,執行結果如圖 1 左下方頁碼列的「顯示」字樣。
 

後端的分頁 T-SQL 語法

若我們開啟 SQL Profiler,觀察畫面上換頁時所執行的 T-SQL 語句,會發現 LINQ 已處理好資料庫撈資料時的「分頁」問題,可避免像過去 WebForm 時代,要自己撰寫,處理 paging 的 SQL 語句或 Stored Procedure [4]

版工測試用的資料庫版本為 SQL Server 2016 版,因此「分頁」會自動引用 OFFSET-FETCH 語法。如下方 T-SQL 語句,分別為畫面上,Grid View 第一頁、第四頁的語法,起始 index 分別為 0、30,表示要從第 0 筆、第 30 筆開始,撈出 10 筆資料。

SELECT 
    [Extent1].[OrderID] AS [OrderID], [Extent1].[CustomerID] AS [CustomerID], [Extent1].[EmployeeID] AS [EmployeeID], [Extent1].[ShipCountry] AS [ShipCountry], [Extent1].[Freight] AS [Freight]
    FROM [dbo].[Orders] AS [Extent1] ORDER BY [Extent1].[OrderID] ASC
    OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY 
SELECT 
    [Extent1].[OrderID] AS [OrderID], [Extent1].[CustomerID] AS [CustomerID], [Extent1].[EmployeeID] AS [EmployeeID], [Extent1].[ShipCountry] AS [ShipCountry], [Extent1].[Freight] AS [Freight]
    FROM [dbo].[Orders] AS [Extent1] ORDER BY [Extent1].[OrderID] ASC
    OFFSET 30 ROWS FETCH NEXT 10 ROWS ONLY 

标签:ASP.NETMVC5實作GridView分頁 

欢迎加入VIP,【VIP售价:只要288元永久VIP会员】畅享商业棋牌游戏程序下载,点击开通!

下载说明


☉本站所有源码和资源均由站长亲自测试-绝对保证都可以架设,运营!
☉如源码和资源有损坏或所有链接均不能下载,请告知管理员,

☉本站软件和源码大部分为站长独资,资源购买和收集,放心下载!

☉唯一站长QQ:1004003180  [人格担保-本站注重诚信!]

☉购买建议E-mail:1004003180@qq.com   源码收购 E-mail:1004003180@qq.com    

☉本站文件解压密码  【文章内都自带解压密码,每个密码不同!】


本站提供的所有源码,均来源站长提供,仅学习交流 浙ICP备09009969号

由此产生不良后果和法律责任与本站无关,如果侵犯了您的版权,请来信告知 1004003180@qq.com 将及时更正和删除! 

Copyright © 2008-2022 棋牌资源网,你身边的棋牌资源下载站    All Rights Reserved