介紹

在這篇文章中，我們將會學習如何在 ASP.NET MVC 中創建一個 gridview，就像 ASP.NET Web 表單中的 gridview 一樣。服務器端和客戶端有許多可用的第三方庫，這些庫能夠提供所有必需的功能，如 Web 表格中的搜索、排序和分頁等。是否包含這些功能，取決於應用的特殊需求，例如在客戶端和服務器端提供搜索或其它功能的需求等。

可用的庫

以下是一些可用的庫和插件：

Grid.Mvc
MVCGrid.NET
PagedList.MVC
JQuery.Grid
JQuery Grid for ASP.NET MVC
JQuery DataTables

使用 jQuery 數據表

以上庫和插件都有自己的優缺點，其中 jQuery 數據表是個不錯的選擇。它具有高度的靈活性，支持分頁，即時搜索，多列排序；它也支持幾乎所有可以被綁定的數據源。

例如：

DOM
JavaScript的
Ajax
Server-side processing

我最喜歡的選項之一是， jQuery 數據表不但支持客戶端搜索、分頁、排序等，而且還提供了一個可以在服務器端處理的選項。例如，一種情景是：因爲數據庫中有太多的數據，所以在客戶端的進行分頁並不是一個好選擇。表格中有百萬行數據，如果用客戶端分頁功能來綁定，頁面就會由於大量的數據行處理和HTML渲染而反應很遲鈍。

下面，我們先來看看一個利用客戶端處理的例子。我們將會實現一個具有搜索、排序和分頁功能的工作表，正如下圖中我們看到的：

首先，我們創建將會用到的數據庫和表格，打開 SQL Management Studio 並運行以下腳本：

CREATE DATABASE [GridExampleMVC] 
 GO 
 CREATE TABLE [dbo].[Assets] ( 
     [AssetID]                   UNIQUEIDENTIFIER NOT NULL, 
     [Barcode]                   NVARCHAR (MAX)   NULL, 
     [SerialNumber]              NVARCHAR (MAX)   NULL, 
     [FacilitySite]              NVARCHAR (MAX)   NULL, 
     [PMGuide]                   NVARCHAR (MAX)   NULL, 
     [AstID]                     NVARCHAR (MAX)   NOT NULL, 
     [ChildAsset]                NVARCHAR (MAX)   NULL, 
     [GeneralAssetDescription]   NVARCHAR (MAX)   NULL, 
     [SecondaryAssetDescription] NVARCHAR (MAX)   NULL, 
     [Quantity]                  INT              NOT NULL, 
     [Manufacturer]              NVARCHAR (MAX)   NULL, 
     [ModelNumber]               NVARCHAR (MAX)   NULL, 
     [Building]                  NVARCHAR (MAX)   NULL, 
     [Floor]                     NVARCHAR (MAX)   NULL, 
     [Corridor]                  NVARCHAR (MAX)   NULL, 
     [RoomNo]                    NVARCHAR (MAX)   NULL, 
     [MERNo]                     NVARCHAR (MAX)   NULL, 
     [EquipSystem]               NVARCHAR (MAX)   NULL, 
     [Comments]                  NVARCHAR (MAX)   NULL, 
     [Issued]                    BIT              NOT NULL, 
     CONSTRAINT [PK_dbo.Assets] PRIMARY KEY CLUSTERED ([AssetID] ASC) 
 ) 
 GO

源碼中附有完整的 SQL 腳本，你可以利用它使用樣例中的數據來創建數據庫和表單。

現在，創建一個新的 ASP.NET MVC 5 Web 應用程序。打開 Visual Studio 2015，點擊文件>>新建>>項目。

從對話框中跳轉到 Web，選擇 ASP.NET Web 應用程序項目，然後單擊確定。

在模板中選擇 MVC，如果編寫了應用的單元測試，請先做檢查，並點擊 OK。

我們的工程都是用基本的功能創建的。現在，我們開始創建數據庫上下文類，這個類將會被 Data Access 實體框架使用。

首先，我們需要爲 Asset 表創建一個模型，我們將會使用這個模型通過 ORM 來恢復數據。

在模型文件夾中，創建一個名爲 Asset 的新類：

using System.ComponentModel.DataAnnotations;
namespace GridExampleMVC.Models
{
    public class Asset
    {
        public System.Guid AssetID { get; set; }
        [Display(Name = "Barcode")]
        public string Barcode { get; set; }
        [Display(Name = "Serial-Number")]
        public string SerialNumber { get; set; }
        [Display(Name = "Facility-Site")]
        public string FacilitySite { get; set; }
        [Display(Name = "PM-Guide-ID")]
        public string PMGuide { get; set; }
        [Required]
        [Display(Name = "Asset-ID")]
        public string AstID { get; set; }
        [Display(Name = "Child-Asset")]
        public string ChildAsset { get; set; }
        [Display(Name = "General-Asset-Description")]
        public string GeneralAssetDescription { get; set; }
        [Display(Name = "Secondary-Asset-Description")]
        public string SecondaryAssetDescription { get; set; }
        public int Quantity { get; set; }
        [Display(Name = "Manufacturer")]
        public string Manufacturer { get; set; }
        [Display(Name = "Model-Number")]
        public string ModelNumber { get; set; }
        [Display(Name = "Main-Location (Building)")]
        public string Building { get; set; }
        [Display(Name = "Sub-Location 1 (Floor)")]
        public string Floor { get; set; }
        [Display(Name = "Sub-Location 2 (Corridor)")]
        public string Corridor { get; set; }
        [Display(Name = "Sub-Location 3 (Room No)")]
        public string RoomNo { get; set; }
        [Display(Name = "Sub-Location 4 (MER#)")]
        public string MERNo { get; set; }
        [Display(Name = "Sub-Location 5 (Equip/System)")]
        public string EquipSystem { get; set; }
        public string Comments { get; set; }
        public bool Issued { get; set; }
    }
}

現在從解決方案資源管理器跳轉到模型文件夾，並打開 IdentityModels.cs 文件。我們將在數據庫上下文中爲 Asset 表添加一個屬性，這個屬性將會成爲 Asset 表的實體框架表示，用它來創建腳本。在 ApplicationDbContext 類中添加新的屬性：

public class ApplicationDbContext : IdentityDbContext<applicationuser>
{
    public ApplicationDbContext()
        : base("DefaultConnection", throwIfV1Schema: false)
    {

    }
    public DbSet<asset> Assets { get; set; }
    public static ApplicationDbContext Create()
    {
        return new ApplicationDbContext();
    }
}

以上是 ASP.NET identity 2.0 的默認實體框架設置，我們通過爲 Asset 表添加新的 DbSet 來擴展它。

現在，在控制器文件夾中添加一個空的名爲 AssetController 的控制器，這個控制器件將用於所有 Asset 的相關工作。

public class AssetController : Controller
    {
        // GET: Asset
        public ActionResult Index()
        {
            return View();
        }
    }

現在我們需要安裝用於創建表格的 JQuery DataTables，進入Tools >> NuGet Package Manager >> Manage Nuget Packages for Solution，並點擊它。

安裝包管理器默認是打開的，它會在你的解決方案中顯示成已安裝的 nugget 包，點擊瀏覽按鈕，然後搜索 JQuery DataTables 包，選擇它並檢查已安裝了 JQuery DataTables 的項目解決方案。在我們的案例裏，我們將會以每一個需求的方式將其安裝在 GridExampleMVC web 中，然後點擊安裝按鈕。

Visual Studio 將會提示是否要修改解決方案，你需要點擊 Ok 來繼續安裝 JQuery DataTables 包。

在 nugget 包安裝成功後，我們需要在視圖中引入 jQuery DataTables 的必要的 JS 和 CSS，爲此，我們需要註冊 jQuery DataTables，請打開位於 App_Start 文件夾中的 BundleConfig.cs 文件並在 CSS 和 JS 文件的結尾處添加以下代碼：

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(

                        "~/Scripts/DataTables/jquery.dataTables.min.js",

                        "~/Scripts/DataTables/dataTables.bootstrap.js"));

bundles.Add(new StyleBundle("~/Content/datatables").Include(

          "~/Content/DataTables/css/dataTables.bootstrap.css"));

在爲數據表添加了腳本和 CSS 之後，我們需要在總體佈局中添加它們，默認情況下， _Layout.cshtml 位於 Views >> Shared 中，_ViewStart.cshtml 也默認位於這裏。

在寫控制器代碼之前，我們需要爲實體框架配置連接字符串，以便在操作數據庫時來連接數據庫。因此，我們的連接字符串應該被指定給一個有效的數據源，以便我們在運行時應用不會被打斷。

爲了做到這一點，請打開 web.config 併爲數據庫提供連接字符串。在配置文件中，你會發現下面配置節點中的連接字符串，你需要在節點中根據你的系統來修改連接字符串。

<connectionstrings>

    <add connectionstring="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=GridExampleMVC;

     Integrated Security=True;MultipleActiveResultSets=true" name="DefaultConnection"

     providername="System.Data.SqlClient"/>

</connectionstrings>

現在，請在控制器中添加數據庫上下文的屬性，以便我們能夠在數據庫中執行請求。

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

我們將會在任何需要的控制器行爲中，使用這個屬性查詢數據庫。

在檢索行爲中，我們將簡單地獲取該表中的所有行，並將其傳遞給 view：

public ActionResult Index()
{
    return View(DbContext.Assets.ToList());
}

我們完整的 controller 類代碼，就像這樣：

using GridExampleMVC.Models;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Microsoft.AspNet.Identity.Owin;
namespace GridExampleMVC.Controllers
{
    public class AssetController : Controller
    {
        private ApplicationDbContext _dbContext;
        public ApplicationDbContext DbContext
        {
            get
            {
                return _dbContext ?? HttpContext.GetOwinContext().Get<applicationdbcontext>();
            }
            private set
            {
                _dbContext = value;
            }
        }
        public AssetController()
        { 

        }
        public AssetController(ApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }
        // GET: Asset
        public ActionResult Index()
        {
            return View(DbContext.Assets.ToList());
        }
    }
}

現在來到視圖部分，在視圖部分中我們將會編寫如何以 HTML 實現渲染的代碼，請爲檢索行爲創建一個空模板（沒有模型）的視圖，然後在其中添加如下代碼：

@model IEnumerable< GridExampleMVC.Models.Asset>
<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">Assets</h1>
            </div>
            <div class="panel-body">
                <table id="assets-data-table"
                class="table table-striped table-bordered"
                 style="width:100%">
                    <thead>
                        <tr>
                            <th>Bar Code</th>
                            <th>Manufacturer</th>
                            <th>Model Number</th>
                            <th>Building</th>
                            <th>Room No</th>
                            <th>Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var asset in Model)
                        {
                            <tr>
                                <td>@asset.Barcode</td>
                                <td>@asset.Manufacturer</td>
                                <td>@asset.ModelNumber</td>
                                <td>@asset.Building</td>
                                <td>@asset.RoomNo</td>
                                <td>@asset.Quantity</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts
{   
 <script type="text/javascript">
     $(document).ready(function () {
         $('#assets-data-table').DataTable();
     });
    </script>
 }

現在運行這個應用程序，你會看具有可用的排序、搜索和過濾功能的表格。但是現在還有一個問題，那就是這是在客戶端處理的，當行爲被調用時，所有數據會被視圖渲染，這樣就會造成當大量數據出現時，頁面性能變慢或者頁面載入時間增加。

在下一篇文章中，我們將會學習到如何通過使用服務器端分頁、排序和過濾來使頁面呈現的更好。對於具有大量的數據時，這是一個更好的方法。

通過本文的介紹，希望大家能夠掌握在 ASP.NET MVC 5 中創建 GridView 的方法。表格控件是項目開發中經常用到的控件，其中以性能著稱的是FlexGrid表格控件，這是一款輕量級的高性能表格控件，加載和滾動速度比競爭對手快10倍以上，能提供豐富的功能集，而不膨脹核心控件。

文章來源：by Ehsan Sajjad

原文鏈接：http://www.codeproject.com/Articles/1114208/Beginners-Guide-for-Creating-GridView-in-ASP-NET-M

iteye_10020

發佈了7 篇原創文章 · 獲贊 1 · 訪問量 8912

私信關注

【初學者指南】在ASP.NET MVC 5中創建GridView

介紹

可用的庫

使用 jQuery 數據表

.NET 新標準介紹

Azure File Storage 基本用法 -- Azure Storage 之 File

最全的Windows Azure學習教程彙總

Azure SQL Database Active Geo-Replication簡介

WebStorm常用功能的使用技巧分享

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結