在這篇文章中,我們将會學習如何在 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 并運作以下腳本:
源碼中附有完整的 SQL 腳本,你可以利用它使用樣例中的資料來建立資料庫和表單。
現在,建立一個新的 ASP.NET MVC 5 Web 應用程式。打開 Visual Studio 2015,點選檔案>>建立>>項目。
從對話框中跳轉到 Web,選擇 ASP.NET Web 應用程式項目,然後單擊确定。
在模闆中選擇 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,并點選它。
安裝包管理器預設是打開的,它會在你的解決方案中顯示成已安裝的 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 檔案的結尾處添加以下代碼:
在為資料表添加了腳本和 CSS 之後,我們需要在總體布局中添加它們,預設情況下, _Layout.cshtml 位于 Views >> Shared 中,_ViewStart.cshtml 也預設位于這裡。
在寫控制器代碼之前,我們需要為實體架構配置連接配接字元串,以便在操作資料庫時來連接配接資料庫。是以,我們的連接配接字元串應該被指定給一個有效的資料源,以便我們在運作時應用不會被打斷。
為了做到這一點,請打開 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>