溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在這篇文章中，我們將會學習如何在 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 數據表是個不錯的選擇。它具有高度的靈活性，支持分頁，即時搜索，多列排序；它也支持幾乎所有可以被綁定的數據源。
例如：
DOM
JavaScript的
Ajax
Server-side processing
我最喜歡的選項之一是， jQuery 數據表不但支持客戶端搜索、分頁、排序等，而且還提供了一個可以在服務器端處理的選項。例如，一種情景是：因為數據庫中有太多的數據，所以在客戶端的進行分頁并不是一個好選擇。表格中有百萬行數據，如果用客戶端分頁功能來綁定，頁面就會由于大量的數據行處理和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，如果編寫了應用的單元測試，請先做檢查，并點擊 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">
<h2 class="panel-title list-panel-title">Assets</h2>
</div>
<div class="panel-body">
<table id="assets-data-table"
class="table table-striped table-bordered"
>
<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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
