ASP.NET MVC 5 创建 GridView 的初学者指南
4.67/5 (32投票s)
关于如何在 ASP.NET MVC 5 中实现 GridView 的指南
引言
在这篇文章中，我们将介绍如何在 ASP.NET MVC 中创建 gridview，就像我们在 ASP.NET Web Forms 中拥有的那样。市面上有许多第三方、服务器端和客户端的解决方案，它们提供了 Web Forms 中的所有必要功能，包括搜索、排序和分页等。是否需要客户端搜索还是服务器端搜索，以及其他功能，完全取决于特定应用程序的需求。
可用库
一些可用的库和插件包括：
使用 JQuery DataTables
它们都有各自的优缺点，但我个人发现 jQuery datatables 是一个不错的选择。它非常灵活。它支持分页、即时搜索、多列排序。它还支持几乎所有可以绑定到它的数据源，其中一些包括：
我喜欢它的一个优点是，它同时支持客户端搜索、分页、排序等功能，但它也提供了服务器端处理的选项，因为有时我们的数据库中数据量可能非常大，在这种情况下，客户端分页可能不是一个好选择，想象一下，如果表中有一百万行数据，并且使用客户端分页将其绑定，那么由于大量的行处理和 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，如果您也为实现编写单元测试，则选中单元测试，然后单击 确定。
我们的项目已经创建，并具备了基本的东西。现在，我们将开始创建数据库上下文类，因为我们将使用 Entity Framework 进行数据访问。
首先，我们需要为 Asset 表创建一个模型，我们将使用它通过 ORM 检索数据。
在 Model 文件夹中，创建一个名为 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; }
}
}
现在，从 解决方案资源管理器 导航到 Models 文件夹，并打开 IdentityModels.cs 文件。我们将为数据库上下文中的 Asset 表添加一个属性，这将是我们使用脚本创建的 Asset 表的 Entity Framework 表示。在 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 的默认实体框架设置，我们通过添加新的 DbSet 来扩展它以支持我们自己的表，为 Asset 表添加了新的 DbSet 。
现在，在 Controllers 文件夹中添加一个名为 AssetController 的空控制器，我们将用它来处理所有与 Asset 相关的操作。它应该看起来像这样：
public class AssetController : Controller
{
// GET: Asset
public ActionResult Index()
{
return View();
}
}
现在，我们将安装 jQuery datatables，我们将使用它来构建网格。转到 工具 >> NuGet 包管理器 >> 管理解决方案的 NuGet 程序包 并单击它。
包管理器将打开，默认情况下，它将显示您解决方案中已安装的 NuGet 包。单击浏览器按钮，然后搜索 jQuery datatables 包，然后选择它，并勾选您想安装此包的解决方案项目。在本例中，我们将根据要求仅在 GridExampleMVC Web 项目中安装它，然后按 安装 按钮。
Visual Studio 将会提示告知它将修改解决方案，您必须按确定才能继续安装该程序包。
成功安装 NuGet 包后，我们需要在将使用它的视图中包含 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"));
注册 datatables 的脚本和 css 后，我们需要将它们添加到我们的主布局中，默认情况下是 _Layout.cshtml，位于 Views >> Shared 文件夹中，并在同一位置的 _ViewStart.cshtml 中定义。
在编写控制器代码之前，我们需要配置实体框架的连接字符串，该连接字符串将在进行数据库操作（即运行查询）时用于连接数据库。因此，我们的连接字符串应该指向一个有效的数据源，以便我们在运行应用程序时不会出现错误。
为此，请打开 web.config 并提供数据库的连接字符串。在 config 文件中，您会在 configuration 节点下的 connectionStrings 中找到它。您需要根据您的系统修改该节点中的连接字符串。在我的例子中，它看起来像：
<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;
}
}
我们将在此属性中使用实体框架在控制器中所有需要的操作中查询数据库。
现在，在 index 操作中，我们将简单地获取表的全部行并将其传递给 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 的代码。因此，为 Index 操作创建一个模板为空（无模型）的视图，并在其中添加以下代码：
@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>
}
现在运行应用程序，您将看到一个具有排序、搜索和过滤功能的网格，但有一个问题，那就是它是在客户端处理的。所有数据在调用操作时都由视图渲染，这可能会导致页面性能缓慢，或者如果返回的行数很多，会增加页面加载时间。
我们将在另一篇文章中介绍如何通过使用服务器端分页、排序和过滤来改进这一点，这在数据量很大的情况下绝对是更好的方法。
服务器端处理
还有另一篇文章，是本文的续篇，我们在其中讨论了如何实现带有服务器端处理的 GridView 以进行搜索、排序和过滤。如果您有兴趣进行服务器端处理，因为在大多数情况下，当数据量很大时，我们永远不想将所有数据带到客户端，因为用户不会查看所有数据，而只会查找特定数据，因此服务器端处理将使事情变得更好。您可以在以下链接阅读该文章：
ASP.NET MVC 5 中的带服务器端过滤、排序和分页的 GridView
高级搜索
本系列还有另一篇文章，讨论了如何在服务器端 JQuery DataTables 处理中添加高级搜索。目前使用的是单个文本框，该文本框会搜索 Grid 中的所有列或我们指定的列。但有时我们需要更强大的搜索，通过对每个列应用不同的搜索条件，本文演示了如何实现此功能。
ASP.NET MVC 5 中使用 JQuery DataTables 进行服务器端高级搜索的 Grid
Ajax CRUD 操作支持
还有另一篇文章，详细介绍了如何使用 JQuery DataTables 实现 Grid 中的 CRUD 操作。我写了这篇文章，因为有几个人在之前的文章评论中问我如何为 Grid 中的更新、删除添加超链接，文章链接如下：
ASP.NET MVC 5 中使用 Jquery DataTables 在 Grid 中实现 AJAX CRUD 入门指南