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

時間 2019-11-11

標籤初學者指南 asp.net asp mvc 建立 gridview 欄目 ASP 简体版

原文原文鏈接

介紹

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

可用的庫

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

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

使用 jQuery 數據表

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

例如：java

DOM
JavaScript的
Ajax
Server-side processing

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

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

首先，咱們建立將會用到的數據庫和表格，打開 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 腳本，你能夠利用它使用樣例中的數據來建立數據庫和表單。bootstrap

如今，建立一個新的 ASP.NET MVC 5 Web 應用程序。打開 Visual Studio 2015，點擊文件>>新建>>項目。服務器

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

在模板中選擇 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