【初学者指南】在ASP.NET MVC 5中创建GridView

介绍

在这篇文章中，我们将会学习如何在 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 并运行以下脚本：

1. CREATE DATABASE [GridExampleMVC]
   
2. GO
   
3. CREATE TABLE [dbo].[Assets] (
   
4.      [AssetID]                   UNIQUEIDENTIFIER NOT NULL,
   
5.      [Barcode]                   NVARCHAR (MAX)   NULL,
   
6.      [SerialNumber]              NVARCHAR (MAX)   NULL,
   
7.      [FacilitySite]              NVARCHAR (MAX)   NULL,
   
8.      [PMGuide]                   NVARCHAR (MAX)   NULL,
   
9.      [AstID]                     NVARCHAR (MAX)   NOT NULL,
   
10.      [ChildAsset]                NVARCHAR (MAX)   NULL,
    
11.      [GeneralAssetDescription]   NVARCHAR (MAX)   NULL,
    
12.      [SecondaryAssetDescription] NVARCHAR (MAX)   NULL,
    
13.      [Quantity]                  INT              NOT NULL,
    
14.      [Manufacturer]              NVARCHAR (MAX)   NULL,
    
15.      [ModelNumber]               NVARCHAR (MAX)   NULL,
    
16.      [Building]                  NVARCHAR (MAX)   NULL,
    
17.      [Floor]                     NVARCHAR (MAX)   NULL,
    
18.      [Corridor]                  NVARCHAR (MAX)   NULL,
    
19.      [RoomNo]                    NVARCHAR (MAX)   NULL,
    
20.      [MERNo]                     NVARCHAR (MAX)   NULL,
    
21.      [EquipSystem]               NVARCHAR (MAX)   NULL,
    
22.      [Comments]                  NVARCHAR (MAX)   NULL,
    
23.      [Issued]                    BIT              NOT NULL,
    
24.      CONSTRAINT [PK_dbo.Assets] PRIMARY KEY CLUSTERED ([AssetID] ASC)
    
25. )
    
26. GO

复制代码

源码中附有完整的 SQL 脚本，你可以利用它使用样例中的数据来创建数据库和表单。

现在，创建一个新的 ASP.NET MVC 5 Web 应用程序。打开 Visual Studio 2015，点击文件>>新建>>项目。

从对话框中跳转到 Web，选择 ASP.NET Web 应用程序项目，然后单击确定。

在模板中选择 MVC，如果编写了应用的单元测试，请先做检查，并点击 OK。

我们的工程都是用基本的功能创建的。现在，我们开始创建数据库上下文类，这个类将会被 Data Access 实体框架使用。

首先，我们需要为 Asset 表创建一个模型，我们将会使用这个模型通过 ORM 来恢复数据。

在模型文件夹中，创建一个名为 Asset 的新类：

1. using System.ComponentModel.DataAnnotations;
   
2. namespace GridExampleMVC.Models
   
3. {
   
4.     public class Asset
   
5.     {
   
6.         public System.Guid AssetID { get; set; }
   
7.         [Display(Name = "Barcode")]
   
8.         public string Barcode { get; set; }
   
9.         [Display(Name = "Serial-Number")]
   
10.         public string SerialNumber { get; set; }
    
11.         [Display(Name = "Facility-Site")]
    
12.         public string FacilitySite { get; set; }
    
13.         [Display(Name = "PM-Guide-ID")]
    
14.         public string PMGuide { get; set; }
    
15.         [Required]
    
16.         [Display(Name = "Asset-ID")]
    
17.         public string AstID { get; set; }
    
18.         [Display(Name = "Child-Asset")]
    
19.         public string ChildAsset { get; set; }
    
20.         [Display(Name = "General-Asset-Description")]
    
21.         public string GeneralAssetDescription { get; set; }
    
22.         [Display(Name = "Secondary-Asset-Description")]
    
23.         public string SecondaryAssetDescription { get; set; }
    
24.         public int Quantity { get; set; }
    
25.         [Display(Name = "Manufacturer")]
    
26.         public string Manufacturer { get; set; }
    
27.         [Display(Name = "Model-Number")]
    
28.         public string ModelNumber { get; set; }
    
29.         [Display(Name = "Main-Location (Building)")]
    
30.         public string Building { get; set; }
    
31.         [Display(Name = "Sub-Location 1 (Floor)")]
    
32.         public string Floor { get; set; }
    
33.         [Display(Name = "Sub-Location 2 (Corridor)")]
    
34.         public string Corridor { get; set; }
    
35.         [Display(Name = "Sub-Location 3 (Room No)")]
    
36.         public string RoomNo { get; set; }
    
37.         [Display(Name = "Sub-Location 4 (MER#)")]
    
38.         public string MERNo { get; set; }
    
39.         [Display(Name = "Sub-Location 5 (Equip/System)")]
    
40.         public string EquipSystem { get; set; }
    
41.         public string Comments { get; set; }
    
42.         public bool Issued { get; set; }
    
43.     }
    
44. }

复制代码

现在从解决方案资源管理器跳转到模型文件夹，并打开 IdentityModels.cs 文件。我们将在数据库上下文中为 Asset 表添加一个属性，这个属性将会成为 Asset 表的实体框架表示，用它来创建脚本。在 ApplicationDbContext 类中添加新的属性：

1. public class ApplicationDbContext : IdentityDbContext<applicationuser>
   
2. {
   
3.     public ApplicationDbContext()
   
4.         : base("DefaultConnection", throwIfV1Schema: false)
   
5.     {
   
6. 
   
7.     }
   
8.     public DbSet<asset> Assets { get; set; }
   
9.     public static ApplicationDbContext Create()
   
10.     {
    
11.         return new ApplicationDbContext();
    
12.     }
    
13. }

复制代码

以上是 ASP.NET identity 2.0 的默认实体框架设置，我们通过为 Asset 表添加新的 DbSet 来扩展它。

现在，在控制器文件夹中添加一个空的名为 AssetController 的控制器，这个控制器件将用于所有 Asset 的相关工作。

1. public class AssetController : Controller
   
2.     {
   
3.         // GET: Asset
   
4.         public ActionResult Index()
   
5.         {
   
6.             return View();
   
7.         }
   
8.     }

复制代码

现在我们需要安装用于创建表格的 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 文件的结尾处添加以下代码：

1. bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
   
2.                         "~/Scripts/DataTables/jquery.dataTables.min.js",
   
3.                         "~/Scripts/DataTables/dataTables.bootstrap.js"));
   
4. bundles.Add(new StyleBundle("~/Content/datatables").Include(
   
5.           "~/Content/DataTables/css/dataTables.bootstrap.css"));

复制代码

在为数据表添加了脚本和 CSS 之后，我们需要在总体布局中添加它们，默认情况下， _Layout.cshtml 位于 Views >> Shared 中，_ViewStart.cshtml 也默认位于这里。

在写控制器代码之前，我们需要为实体框架配置连接字符串，以便在操作数据库时来连接数据库。因此，我们的连接字符串应该被指定给一个有效的数据源，以便我们在运行时应用不会被打断。

为了做到这一点，请打开 web.config 并为数据库提供连接字符串。在配置文件中，你会发现下面配置节点中的连接字符串，你需要在节点中根据你的系统来修改连接字符串。

1. <connectionstrings>
   
2.     <add connectionstring="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=GridExampleMVC;
   
3.      Integrated Security=True;MultipleActiveResultSets=true" name="DefaultConnection"
   
4.      providername="System.Data.SqlClient"/>
   
5. </connectionstrings>

复制代码

现在，请在控制器中添加数据库上下文的属性，以便我们能够在数据库中执行请求。

1. private ApplicationDbContext _dbContext;
   
2. public ApplicationDbContext DbContext
   
3. {
   
4.     get
   
5.     {
   
6.         return _dbContext ?? HttpContext.GetOwinContext().Get<applicationdbcontext>();
   
7.     }
   
8.     private set
   
9.     {
   
10.         _dbContext = value;
    
11.     }
    
12. }

复制代码

我们将会在任何需要的控制器行为中，使用这个属性查询数据库。

在检索行为中，我们将简单地获取该表中的所有行，并将其传递给 view：

1. public ActionResult Index()
   
2. {
   
3.     return View(DbContext.Assets.ToList());
   
4. }

复制代码

我们完整的 controller 类代码，就像这样：

1. using GridExampleMVC.Models;
   
2. using System.Linq;
   
3. using System.Web;
   
4. using System.Web.Mvc;
   
5. using Microsoft.AspNet.Identity.Owin;
   
6. namespace GridExampleMVC.Controllers
   
7. {
   
8.     public class AssetController : Controller
   
9.     {
   
10.         private ApplicationDbContext _dbContext;
    
11.         public ApplicationDbContext DbContext
    
12.         {
    
13.             get
    
14.             {
    
15.                 return _dbContext ?? HttpContext.GetOwinContext().Get<applicationdbcontext>();
    
16.             }
    
17.             private set
    
18.             {
    
19.                 _dbContext = value;
    
20.             }
    
21.         }
    
22.         public AssetController()
    
23.         {
    
24. 
    
25.         }
    
26.         public AssetController(ApplicationDbContext dbContext)
    
27.         {
    
28.             _dbContext = dbContext;
    
29.         }
    
30.         // GET: Asset
    
31.         public ActionResult Index()
    
32.         {
    
33.             return View(DbContext.Assets.ToList());
    
34.         }
    
35.     }
    
36. }

复制代码

现在来到视图部分，在视图部分中我们将会编写如何以 HTML 实现渲染的代码，请为检索行为创建一个空模板（没有模型）的视图，然后在其中添加如下代码：

1. @model IEnumerable< GridExampleMVC.Models.Asset>
   
2. <div class="row">
   
3.     <div class="col-md-12">
   
4.         <div class="panel panel-primary list-panel" id="list-panel">
   
5.             <div class="panel-heading list-panel-heading">
   
6.                 <h1 class="panel-title list-panel-title">Assets</h1>
   
7.             </div>
   
8.             <div class="panel-body">
   
9.                 <table id="assets-data-table"
   
10.                 class="table table-striped table-bordered"
    
11.                  style="width:100%">
    
12.                     <thead>
    
13.                         <tr>
    
14.                             <th>Bar Code</th>
    
15.                             <th>Manufacturer</th>
    
16.                             <th>Model Number</th>
    
17.                             <th>Building</th>
    
18.                             <th>Room No</th>
    
19.                             <th>Quantity</th>
    
20.                         </tr>
    
21.                     </thead>
    
22.                     <tbody>
    
23.                         @foreach (var asset in Model)
    
24.                         {
    
25.                             <tr>
    
26.                                 <td>@asset.Barcode</td>
    
27.                                 <td>@asset.Manufacturer</td>
    
28.                                 <td>@asset.ModelNumber</td>
    
29.                                 <td>@asset.Building</td>
    
30.                                 <td>@asset.RoomNo</td>
    
31.                                 <td>@asset.Quantity</td>
    
32.                             </tr>
    
33.                         }
    
34.                     </tbody>
    
35.                 </table>
    
36.             </div>
    
37.         </div>
    
38.     </div>
    
39. </div>
    
40. 
    
41. @section Scripts
    
42. {   
    
43. <script type="text/javascript">
    
44.      $(document).ready(function () {
    
45.          $('#assets-data-table').DataTable();
    
46.      });
    
47.     </script>
    
48. }

复制代码

现在运行这个应用程序，你会看具有可用的排序、搜索和过滤功能的表格。但是现在还有一个问题，那就是这是在客户端处理的，当行为被调用时，所有数据会被视图渲染，这样就会造成当大量数据出现时，页面性能变慢或者页面载入时间增加。

在下一篇文章中，我们将会学习到如何通过使用服务器端分页、排序和过滤来使页面呈现的更好。对于具有大量的数据时，这是一个更好的方法。

通过本文的介绍，希望大家能够掌握在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