在这篇文章中,咱们将会学习如何在 ASP.NET MVC 中建立一个 gridview,就像 ASP.NET Web 表单中的 gridview 同样。服务器端和客户端有许多可用的第三方库,这些库可以提供全部必需的功能,如 Web 表格中的搜索、排序和分页等。是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务器端提供搜索或其它功能的需求等。javascript
如下是一些可用的库和插件:css
以上库和插件都有本身的优缺点,其中 jQuery 数据表是个不错的选择。它具备高度的灵活性,支持分页,即时搜索,多列排序;它也支持几乎全部能够被绑定的数据源。html
例如:java
我最喜欢的选项之一是, 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