• 当前位置：首页 > 游戏技术文章
游戏技术文章

ASP.NET MVC 5 實作 GridView 分頁

时间：2017-3-26 15:37:46  作者：棋牌资源网  来源：棋牌资源网  查看：7853  评论：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    

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


上一篇：c#: 进程的挂起与恢复
下一篇：onTouch和onTouchEvent
本类更新
本类推荐
本类排行
免费资源网 | 游戏资源网 |

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

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

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