整合ASP.NET MVC5與Datatables呈現資料

by vivid 16. 五月 2018 04:41

.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」鍵,請參考下圖所示:

clip_image002

圖 1:建立ASP.NET MVC 5專案。

在「New ASP.NET Web Application」對話盒中選取「Empty」,勾選下方的「MVC」項目,然後按下「OK」按鈕建立專案,請參考下圖所示:

clip_image004

圖 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」按鈕進行安裝,請參考下圖所示:

clip_image006

圖 3:安裝「jQuery」套件。

下一步驟會看到安裝確認視窗,直接按「OK」按鈕,請參考下圖所示:

clip_image008

圖 4:確認安裝。

加入「jquery.datatables」套件相關檔案

接著重複上個步驟,安裝「jquery.datatables」套件,在「Manage Nuget Packages」話盒著選取視窗上方的「Browse」分頁,並在上方的文字方塊中輸入關鍵字「DataTables」進行篩選,下方便會列出可安裝的套件,選取其中的「jquery.datatables」套件,在右方的下拉式清單方塊中,選取要使用的「1.10.15」版,然後按下「Install」按鈕進行安裝,請參考下圖所示:

clip_image010

圖 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」,請參考下圖所示:

clip_image012

圖 6:建立ADO.NET實體資料模型。

然後在「Entity Data Model Wizard」 視窗,選取「EF Designer from Database」項目,按下「Next」按鈕,請參考下圖所示:

clip_image014

圖 7:選取「EF Designer from Database」項目。

在「Choose Your Data Connection」的步驟視窗選擇連接到「Pubs」資料庫,然後按下「Next」按鈕,請參考下圖所示:

clip_image016

圖 8:連接到「Pubs」資料庫。

在 「Choose Your Version」 步驟,請選擇「Entity Framework 6.x」,按下「Next」按鈕,請參考下圖所示:

clip_image018

圖 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」 的設計步驟。

clip_image020

圖 10:勾選資料表。

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。

 

設計控制器

從Visual Studio 2017開發工具 -「Solution Explorer」視窗- 專案 -「Controllers」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「Controller」,開啟「Add Scaffold」對話盒。選取「MVC 5 Controller - Empty」,然後按下「Add」按鈕,請參考下圖所示:

clip_image022

圖 11:新增控制器。

在「Add Controller」對話盒中,設定控制器名稱為「HomeController」;然後按下「Add 」按鈕,Visual Studio 2017便會在「Controllers」資料夾下,新增HomeController.cs,包含控制器程式碼基本的程式碼,請參考下圖所示:

clip_image024

圖 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」,請參考下圖所示:

clip_image026

圖 13:建立Index檢視。

在「Add View」對話盒中,設定以下項目:

· View name:「Index」。

· Template:「Empty (without model)」。

· 清除勾選所有核取方塊。

然後按下「Add」按鈕,請參考下圖所示:

clip_image028

圖 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

這個範例程式的執行結果參考如下:

clip_image030

圖 15:整合「jquery.datatables」的網頁。

總結

最後整理jquery.datatables套件提供功能清單如下:

· 為免費開放源碼軟體。

· 根據欄位進行資料排序、分頁、搜尋、篩選功能。支援多欄位排序。

· 支援各種資料來源包含 DOM、Javascript、Ajax或伺服端資料來源。

· 可以根據特定分頁載入資料。

· 可整合多種樣式與佈景主題,包含Datatables、jQuery UI、Bootstrap與Foundation。

· 支援多國語言。

· 提供多種擴充程式,如Editor、Button、固定欄位、固定表頭…等等。

· 狀態儲存。

· 欄位隱藏。

.more…。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET MVC | JavaScript | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List