天天看點

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

在這篇文章中,我們将會學習如何在 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渲染而反應很遲鈍。

下面,我們先來看看一個利用用戶端處理的例子。我們将會實作一個具有搜尋、排序和分頁功能的工作表,正如下圖中我們看到的:

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

首先,我們建立将會用到的資料庫和表格,打開 SQL Management Studio 并運作以下腳本:

源碼中附有完整的 SQL 腳本,你可以利用它使用樣例中的資料來建立資料庫和表單。

現在,建立一個新的 ASP.NET MVC 5 Web 應用程式。打開 Visual Studio 2015,點選檔案>>建立>>項目。

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

從對話框中跳轉到 Web,選擇 ASP.NET Web 應用程式項目,然後單擊确定。

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

在模闆中選擇 MVC,如果編寫了應用的單元測試,請先做檢查,并點選 OK。

我們的工程都是用基本的功能建立的。現在,我們開始建立資料庫上下文類,這個類将會被 Data Access 實體架構使用。

首先,我們需要為 Asset 表建立一個模型,我們将會使用這個模型通過 ORM 來恢複資料。

在模型檔案夾中,建立一個名為 Asset 的新類:

現在從解決方案資料總管跳轉到模型檔案夾,并打開 IdentityModels.cs 檔案。我們将在資料庫上下文中為 Asset 表添加一個屬性,這個屬性将會成為 Asset 表的實體架構表示,用它來建立腳本。在 ApplicationDbContext 類中添加新的屬性:

以上是 ASP.NET identity 2.0 的預設實體架構設定,我們通過為 Asset 表添加新的 DbSet 來擴充它。

現在,在控制器檔案夾中添加一個空的名為 AssetController 的控制器,這個控制器件将用于所有 Asset 的相關工作。

現在我們需要安裝用于建立表格的 JQuery DataTables,進入Tools >> NuGet Package Manager >> Manage Nuget Packages for Solution,并點選它。

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

安裝包管理器預設是打開的,它會在你的解決方案中顯示成已安裝的 nugget 包,點選浏覽按鈕,然後搜尋 JQuery DataTables 包,選擇它并檢查已安裝了 JQuery DataTables 的項目解決方案。在我們的案例裡,我們将會以每一個需求的方式将其安裝在 GridExampleMVC web 中,然後點選安裝按鈕。

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

Visual Studio 将會提示是否要修改解決方案,你需要點選 Ok 來繼續安裝 JQuery DataTables 包。

在 nugget 包安裝成功後,我們需要在視圖中引入 jQuery DataTables 的必要的 JS 和 CSS,為此,我們需要注冊 jQuery DataTables,請打開位于 App_Start 檔案夾中的 BundleConfig.cs 檔案并在 CSS 和 JS 檔案的結尾處添加以下代碼:

在為資料表添加了腳本和 CSS 之後,我們需要在總體布局中添加它們,預設情況下, _Layout.cshtml 位于 Views >> Shared 中,_ViewStart.cshtml 也預設位于這裡。

【初學者指南】在ASP.NET MVC 5中建立GridView介紹可用的庫使用 jQuery 資料表

在寫控制器代碼之前,我們需要為實體架構配置連接配接字元串,以便在操作資料庫時來連接配接資料庫。是以,我們的連接配接字元串應該被指定給一個有效的資料源,以便我們在運作時應用不會被打斷。

為了做到這一點,請打開 web.config 并為資料庫提供連接配接字元串。在配置檔案中,你會發現下面配置節點中的連接配接字元串,你需要在節點中根據你的系統來修改連接配接字元串。

現在,請在控制器中添加資料庫上下文的屬性,以便我們能夠在資料庫中執行請求。

我們将會在任何需要的控制器行為中,使用這個屬性查詢資料庫。

在檢索行為中,我們将簡單地擷取該表中的所有行,并将其傳遞給 view:

我們完整的 controller 類代碼,就像這樣:

現在來到視圖部分,在視圖部分中我們将會編寫如何以 HTML 實作渲染的代碼,請為檢索行為建立一個空模闆(沒有模型)的視圖,然後在其中添加如下代碼:

現在運作這個應用程式,你會看具有可用的排序、搜尋和過濾功能的表格。但是現在還有一個問題,那就是這是在用戶端處理的,當行為被調用時,所有資料會被視圖渲染,這樣就會造成當大量資料出現時,頁面性能變慢或者頁面載入時間增加。

在下一篇文章中,我們将會學習到如何通過使用伺服器端分頁、排序和過濾來使頁面呈現的更好。對于具有大量的資料時,這是一個更好的方法。

文章來源:by Ehsan Sajjad

原文連結:http://www.codeproject.com/Articles/1114208/Beginners-Guide-for-Creating-GridView-in-ASP-NET-M

相關閱讀:

<a href="http://www.cnblogs.com/powertoolsteam/p/net_core_c_sharp.html" target="_blank">是什麼讓C#成為最值得學習的程式設計語言</a>

<a href="http://www.cnblogs.com/powertoolsteam/p/microsoft_20.html" target="_blank">從Visual Studio看微軟20年技術變遷</a>

<a href="http://www.cnblogs.com/powertoolsteam/p/csharp.html" target="_blank">C#開發人員應該知道的13件事情</a>

<a href="http://www.cnblogs.com/powertoolsteam/p/Visual_Studio_2017.html">Visual Studio 2017正式版釋出全紀錄</a>