在這篇文章中，我們將會(huì)學(xué)習(xí)如何在 ASP.NET MVC 中創(chuàng)建一個(gè) gridview，就像 ASP.NET Web 表單中的 gridview 一樣。服務(wù)器端和客戶端有許多可用的第三方庫(kù)，這些庫(kù)能夠提供所有必需的功能，如 Web 表格中的搜索、排序和分頁(yè)等。是否包含這些功能，取決于應(yīng)用的特殊需求，例如在客戶端和服務(wù)器端提供搜索或其它功能的需求等。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),馬山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:馬山等地區(qū)。馬山做網(wǎng)站價(jià)格咨詢:13518219792
以下是一些可用的庫(kù)和插件：
Grid.Mvc
MVCGrid.NET
PagedList.MVC
JQuery.Grid
JQuery Grid for ASP.NET MVC
JQuery DataTables
以上庫(kù)和插件都有自己的優(yōu)缺點(diǎn)，其中 jQuery 數(shù)據(jù)表是個(gè)不錯(cuò)的選擇。它具有高度的靈活性，支持分頁(yè)，即時(shí)搜索，多列排序；它也支持幾乎所有可以被綁定的數(shù)據(jù)源。
例如：
DOM
JavaScript的
Ajax
Server-side processing
我最喜歡的選項(xiàng)之一是， jQuery 數(shù)據(jù)表不但支持客戶端搜索、分頁(yè)、排序等，而且還提供了一個(gè)可以在服務(wù)器端處理的選項(xiàng)。例如，一種情景是：因?yàn)閿?shù)據(jù)庫(kù)中有太多的數(shù)據(jù)，所以在客戶端的進(jìn)行分頁(yè)并不是一個(gè)好選擇。表格中有百萬(wàn)行數(shù)據(jù)，如果用客戶端分頁(yè)功能來(lái)綁定，頁(yè)面就會(huì)由于大量的數(shù)據(jù)行處理和HTML渲染而反應(yīng)很遲鈍。
下面，我們先來(lái)看看一個(gè)利用客戶端處理的例子。我們將會(huì)實(shí)現(xiàn)一個(gè)具有搜索、排序和分頁(yè)功能的工作表，正如下圖中我們看到的：
首先，我們創(chuàng)建將會(huì)用到的數(shù)據(jù)庫(kù)和表格，打開(kāi) SQL Management Studio 并運(yùn)行以下腳本：
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 腳本，你可以利用它使用樣例中的數(shù)據(jù)來(lái)創(chuàng)建數(shù)據(jù)庫(kù)和表單。
現(xiàn)在，創(chuàng)建一個(gè)新的 ASP.NET MVC 5 Web 應(yīng)用程序。打開(kāi) Visual Studio 2015，點(diǎn)擊文件>>新建>>項(xiàng)目。
從對(duì)話框中跳轉(zhuǎn)到 Web，選擇 ASP.NET Web 應(yīng)用程序項(xiàng)目，然后單擊確定。
在模板中選擇 MVC，如果編寫(xiě)了應(yīng)用的單元測(cè)試，請(qǐng)先做檢查，并點(diǎn)擊 OK。
我們的工程都是用基本的功能創(chuàng)建的?，F(xiàn)在，我們開(kāi)始創(chuàng)建數(shù)據(jù)庫(kù)上下文類，這個(gè)類將會(huì)被 Data Access 實(shí)體框架使用。
首先，我們需要為 Asset 表創(chuàng)建一個(gè)模型，我們將會(huì)使用這個(gè)模型通過(guò) ORM 來(lái)恢復(fù)數(shù)據(jù)。
在模型文件夾中，創(chuàng)建一個(gè)名為 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; }
}
}現(xiàn)在從解決方案資源管理器跳轉(zhuǎn)到模型文件夾，并打開(kāi) IdentityModels.cs 文件。我們將在數(shù)據(jù)庫(kù)上下文中為 Asset 表添加一個(gè)屬性，這個(gè)屬性將會(huì)成為 Asset 表的實(shí)體框架表示，用它來(lái)創(chuàng)建腳本。在 ApplicationDbContext 類中添加新的屬性：
public class ApplicationDbContext : IdentityDbContext{ public ApplicationDbContext() : base("DefaultConnection", throwIfV1Schema: false) { } public DbSet Assets { get; set; } public static ApplicationDbContext Create() { return new ApplicationDbContext(); } }
以上是 ASP.NET identity 2.0 的默認(rèn)實(shí)體框架設(shè)置，我們通過(guò)為 Asset 表添加新的 DbSet 來(lái)擴(kuò)展它。
現(xiàn)在，在控制器文件夾中添加一個(gè)空的名為 AssetController 的控制器，這個(gè)控制器件將用于所有 Asset 的相關(guān)工作。
public class AssetController : Controller
{ // GET: Asset
public ActionResult Index()
{ return View();
}
}現(xiàn)在我們需要安裝用于創(chuàng)建表格的 JQuery DataTables，進(jìn)入Tools >> NuGet Package Manager >> Manage Nuget Packages for Solution，并點(diǎn)擊它。
安裝包管理器默認(rèn)是打開(kāi)的，它會(huì)在你的解決方案中顯示成已安裝的 nugget 包，點(diǎn)擊瀏覽按鈕，然后搜索 JQuery DataTables 包，選擇它并檢查已安裝了 JQuery DataTables 的項(xiàng)目解決方案。在我們的案例里，我們將會(huì)以每一個(gè)需求的方式將其安裝在 GridExampleMVC web 中，然后點(diǎn)擊安裝按鈕。
Visual Studio 將會(huì)提示是否要修改解決方案，你需要點(diǎn)擊 Ok 來(lái)繼續(xù)安裝 JQuery DataTables 包。
在 nugget 包安裝成功后，我們需要在視圖中引入 jQuery DataTables 的必要的 JS 和 CSS，為此，我們需要注冊(cè) jQuery DataTables，請(qǐng)打開(kāi)位于 App_Start 文件夾中的 BundleConfig.cs 文件并在 CSS 和 JS 文件的結(jié)尾處添加以下代碼：
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"));在為數(shù)據(jù)表添加了腳本和 CSS 之后，我們需要在總體布局中添加它們，默認(rèn)情況下， _Layout.cshtml 位于 Views >> Shared 中，_ViewStart.cshtml 也默認(rèn)位于這里。
在寫(xiě)控制器代碼之前，我們需要為實(shí)體框架配置連接字符串，以便在操作數(shù)據(jù)庫(kù)時(shí)來(lái)連接數(shù)據(jù)庫(kù)。因此，我們的連接字符串應(yīng)該被指定給一個(gè)有效的數(shù)據(jù)源，以便我們?cè)谶\(yùn)行時(shí)應(yīng)用不會(huì)被打斷。
為了做到這一點(diǎn)，請(qǐng)打開(kāi) web.config 并為數(shù)據(jù)庫(kù)提供連接字符串。在配置文件中，你會(huì)發(fā)現(xiàn)下面配置節(jié)點(diǎn)中的連接字符串，你需要在節(jié)點(diǎn)中根據(jù)你的系統(tǒng)來(lái)修改連接字符串。
