.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號： N180519502
出刊日期： 2018/5/16
本文將介紹如何在ASP.NET MVC 5的專案之中，整合「Datatables」套件以表格的方式呈現從資料庫取回的資料。
Datatables是一個歷史悠久的前端 jQuery Plugin，以jQuery為基礎，支援表格資料的排序、分頁、篩選…等等功能，詳細功能說明可以參考以下官網：「https://datatables.net/」。
以下以Step-by-Step方式說明如何在ASP.NET MVC 5專案中分別使用Datatables來設計資料分頁網頁。
建立ASP.NET MVC 5專案
啟動Visual Studio 2017開發環境，從「File」-「New」-「Project」，在「New Project」對話盒中，確認視窗上方.NET Framework的目標版本為「.NET Framework 4.6.1以上」，選取左方「Installed」-「Templates」-「Visual C#」程式語言，從「Web」分類中，選取「ASP.NET Web Application (.NET Framework)」，設定專案名稱，如「DatatablesGridDemo」、設定專案存放路徑，然後按下「OK」鍵，請參考下圖所示：
圖 1：建立ASP.NET MVC 5專案。
在「New ASP.NET Web Application」對話盒中選取「Empty」，勾選下方的「MVC」項目，然後按下「OK」按鈕建立專案，請參考下圖所示：
圖 2：選取「Empty」MVC專案。
安裝必要套件
接下來的步驟要整合「jQuery」與「Datatables」套件，我們需要在專案中安裝以下版本的套件：
· jQuery： 3.3.1版。
· jquery.datatables：1.10.15版。
從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱上方按滑鼠右鍵，從快捷選單選擇「Manage Nuget Packages」，開啟對話盒，接著選取視窗上方的「Browse」分頁，並在上方的文字方塊中輸入關鍵字「jQuery」進行篩選，下方便會列出可安裝的套件，選取其中的「jQuery」套件，在右方的下拉式清單方塊中，選取要使用的「3.3.1」版，然後按下「Install」按鈕進行安裝，請參考下圖所示：
圖 3：安裝「jQuery」套件。
下一步驟會看到安裝確認視窗，直接按「OK」按鈕，請參考下圖所示：
圖 4：確認安裝。
加入「jquery.datatables」套件相關檔案
接著重複上個步驟，安裝「jquery.datatables」套件，在「Manage Nuget Packages」話盒著選取視窗上方的「Browse」分頁，並在上方的文字方塊中輸入關鍵字「DataTables」進行篩選，下方便會列出可安裝的套件，選取其中的「jquery.datatables」套件，在右方的下拉式清單方塊中，選取要使用的「1.10.15」版，然後按下「Install」按鈕進行安裝，請參考下圖所示：
圖 5：下載jquery.datatables套件。
建立ADO.NET實體資料模型
下一步是使用Visual Studio的功能來定義ADO.NET實體資料模型，然後利用Entity Framework Database First技術自動根據資料庫結構描述資訊來建立模型。在MVC的專案之中，通常將ADO.NET實體資料模型的相關程式置於「Models」資料夾之中。
從Visual Studio 2017開發工具 -「Solution Explorer」- 專案-「Models」資料夾上方按滑鼠右鍵，從快捷選單選擇「Add」- 「New Item」，開啟「Add New Item」對話盒。
在「Add New Item」對話盒選取「ADO.NET Entity Data Model」項目，設定名稱為「PubsModel」，請參考下圖所示：
圖 6：建立ADO.NET實體資料模型。
然後在「Entity Data Model Wizard」 視窗，選取「EF Designer from Database」項目，按下「Next」按鈕，請參考下圖所示：
圖 7：選取「EF Designer from Database」項目。
在「Choose Your Data Connection」的步驟視窗選擇連接到「Pubs」資料庫，然後按下「Next」按鈕，請參考下圖所示：
圖 8：連接到「Pubs」資料庫。
在 「Choose Your Version」 步驟，請選擇「Entity Framework 6.x」，按下「Next」按鈕，請參考下圖所示：
圖 9：選擇「Entity Framework 6.x」版本。
在 「Choose Your Database Objects and Settings」步驟 ，展開「Table」->「dbo」勾選「Authors」，並勾選下方的「Pluralize or singularize generated object names」。如下圖所示，並按下「Finish」按鈕完成 「Entity Data Model Wizard」 的設計步驟。
圖 10：勾選資料表。
選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案，確認程式碼能正確編譯。
設計控制器
從Visual Studio 2017開發工具 -「Solution Explorer」視窗- 專案 -「Controllers」資料夾上方按滑鼠右鍵，從快捷選單選擇「Add」- 「Controller」，開啟「Add Scaffold」對話盒。選取「MVC 5 Controller - Empty」，然後按下「Add」按鈕，請參考下圖所示：
圖 11：新增控制器。
在「Add Controller」對話盒中，設定控制器名稱為「HomeController」；然後按下「Add 」按鈕，Visual Studio 2017便會在「Controllers」資料夾下，新增HomeController.cs，包含控制器程式碼基本的程式碼，請參考下圖所示：
圖 12：新增HomeController控制器。
取回資料
在新增的「HomeController.cs」檔案中加入程式碼。於「HomeController」類別「Index」方法中從資料庫查詢「authors」資料表資料，然後回傳之：
using DatatablesGridDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DatatablesGridDemo.Controllers {
public class HomeController : Controller {
pubsEntities _db = new pubsEntities( );
public ActionResult Index( ) {
return View( _db.authors.ToList( ) );
}
}
}
建立Index檢視
建立「Index」檢視。將游標停留在「HomeController」控制器程式設計畫面「Index」方法之中，按滑鼠右鍵，從快捷選單選取「Add View」，請參考下圖所示：
圖 13：建立Index檢視。
在「Add View」對話盒中，設定以下項目：
· View name：「Index」。
· Template：「Empty (without model)」。
· 清除勾選所有核取方塊。
然後按下「Add」按鈕，請參考下圖所示：
圖 14：建立Index檢視。
設計Index檢視
在「Index.cshtml」檔案中加入以下程式碼：
@model IEnumerable<DatatablesGridDemo.Models.author>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" id="grid1">
<thead>
<tr>
<th>
@Html.DisplayNameFor( model => model.au_id )
</th>
<th>
@Html.DisplayNameFor( model => model.au_lname )
</th>
<th>
@Html.DisplayNameFor( model => model.au_fname )
</th>
<th>
@Html.DisplayNameFor( model => model.phone )
</th>
<th>
@Html.DisplayNameFor( model => model.address )
</th>
<th>
@Html.DisplayNameFor( model => model.city )
</th>
<th>
@Html.DisplayNameFor( model => model.state )
</th>
<th>
@Html.DisplayNameFor( model => model.zip )
</th>
<th>
@Html.DisplayNameFor( model => model.contract )
</th>
</tr>
</thead>
<tbody>
@foreach ( var item in Model ) {
<tr>
<td>
@Html.DisplayFor( modelItem => item.au_id )
</td>
<td>
@Html.DisplayFor( modelItem => item.au_lname )
</td>
<td>
@Html.DisplayFor( modelItem => item.au_fname )
</td>
<td>
@Html.DisplayFor( modelItem => item.phone )
</td>
<td>
@Html.DisplayFor( modelItem => item.address )
</td>
<td>
@Html.DisplayFor( modelItem => item.city )
</td>
<td>
@Html.DisplayFor( modelItem => item.state )
</td>
<td>
@Html.DisplayFor( modelItem => item.zip )
</td>
<td>
@Html.DisplayFor( modelItem => item.contract )
</td>
</tr>
}
</tbody>
</table>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#grid1').DataTable();
});
</script>
</body>
</html>
最後，選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案，確認程式碼能正確編譯。
在Visual Studio開發工具，按CTRL+F5執行網站首頁（請注意：埠號可能會依據實際上的操作而有所不同，請修改為實際的埠號），然後在瀏覽器輸入以下URL：
http://localhost:64579/Home/Index
這個範例程式的執行結果參考如下：
圖 15：整合「jquery.datatables」的網頁。
總結
最後整理jquery.datatables套件提供功能清單如下：
· 為免費開放源碼軟體。
· 根據欄位進行資料排序、分頁、搜尋、篩選功能。支援多欄位排序。
· 支援各種資料來源包含 DOM、Javascript、Ajax或伺服端資料來源。
· 可以根據特定分頁載入資料。
· 可整合多種樣式與佈景主題，包含Datatables、jQuery UI、Bootstrap與Foundation。
· 支援多國語言。
· 提供多種擴充程式，如Editor、Button、固定欄位、固定表頭…等等。
· 狀態儲存。
· 欄位隱藏。
.more…。
訂閱