目錄

1.介紹

2.軟體環境

介紹

“MVC網站教程”系列的目的是教你如何使用 ASP.NET MVC 建立一個基本的、可擴充套件的網站。

4)MVC網站教程（四）：MVC4網站中整合jqGrid表格外掛（涉及技術：AJAX，JSON，jQuery，LINQ和序列化）

系列的第一篇文章主要講解如何去建立一個支援多語言的MVC網站，同時也講解了使用者認證和註冊機制的實現。使用了微軟的Entity Framework框架和LINQ查詢技術。

系列的第二篇文章，提出了詳細的異常管理規則並在ASP.NET MVC網站中實現異常管理，還提供一些通用的日誌記錄和異常管理的原始碼。這些原始碼不僅可以在任何ASP.NET

網站中被重用（或經過比較小的改動適用），而且可以重用到任何.NET專案中。

系列的第三篇文章“動態佈局和站點管理”，通過AJAX，jqGrid，自定義操作結果，控制器擴充套件，HTML幫助器和一些通用的C#原始碼和JavaScript指令碼實現了站點動態佈局和站點管理，這些功能支援擴充套件和重用到其他專案中。

系列的第四篇（即本文），將詳細介紹使用AJAX，JSON，jQuery，LINQ和序列化技術將jqGrid表格外掛整合到MVC4網站中。

“MVC網站教程”系列的示例網站是採用增量式和迭代式軟體過程開發的，這意味著系列中每一篇博文會在前一篇的解決方案中新增更多的功能，所以本文提供的示例下載只包含系列目前為止所介紹的功能。

本博文的第一部分介紹構件塊的使用，第二部分介紹將jqGrid表格外掛整合到MVC基礎站點解決方案的步驟，使用到技術有AJAX，JSON，JavaScript和第一部分介紹的構件塊。

軟體環境

1..NET 4.0 Framework

2.Visual Studio 2010 (or Express edition)

3.ASP.NET MVC 4.0

4.SQL Server 2008 R2 (or Express Edition version 10.50.2500.0)

在執行示例程式碼之前

在執行示例程式碼之前，你應該做下面事情：

1.首先使用“管理員身份”執行CreateEventLogEntry

控制檯專案程式產生的exe，用來在事件日誌中建立“MVC Basic”事件源。（EventLog在寫日誌時會建立指定名稱的類別預設為“應用程式”的事件源。但是ASP.NET網站沒有足夠的許可權來建立事件源，需要本地桌面應用程式）

2.在你的SQL Server伺服器中建立一個名為MvcBasicSite的資料庫，然後用我提供的MvcBasicSiteDatabase.bak檔案進行資料庫還原。

3.修改MVC應用程式示例的Web.config配置檔案中的連結字串。

示例帳號

1)管理員帳戶：Administrator密碼：tm77dac

2)普通帳戶： Ana密碼：ana

本博文示例下載：

jqGrid和AJAX

jqGrid是一個支援AJAX的開源的javascript控制元件，它提供在網頁上顯示和操作表格資料，並且支援通過AJAX回撥函式動態的載入資料。

關於jqGrid控制元件的:

下面jqGrid外掛包中重要的元件必須整合到網站應用程式中：

1)jquery.jqGrid.min.js：壓縮格式的jqGrid表格外掛指令碼庫。

2)jquery.jqGrid.src.js：jqGrid表格外掛指令碼庫原始碼。

3)ui.jqgrid.css：jqGrid表格外掛的css樣式檔案。

4)一些命名為grid.local-XX.js特定語言檔案。這裡的XX是語言的兩字元程式碼。

除了上面這些重要元件，我們還會在（微軟）定製版本的主題。

AJAX是非同步的JavaScript和XML的縮寫。AJAX不是單一的技術，而是一組相互關聯用於建立非同步web應用程式的開發技術。使用AJAX技術，web應用程式能非同步傳送資料和非同步接收資料，非同步方式不會影響當前頁的顯示和操作並且通過AJAX技術還能避免整個頁面的重新整理。

在下面圖中，我使用UML圖展示了“傳統Web系統模型”和“AJAX Web系統模型”。

從“傳統web系統模型”圖中可知，每個使用者介面端（eg：瀏覽器）的使用者請求都會向web應用程式端（執行在web伺服器）直接傳送一個HTTP請求，在Web應用程式處理請求後響應一個HTML頁面（HTTP+CSS）到瀏覽器，最後在瀏覽器中呈現。

MVC基礎網站是基於AJAX的Web應用程式，當瀏覽器端發出一個使用者請求，使用者介面元件會觸發一個JavaScript呼叫到AJAX Engine元件。這個引擎負責渲染使用者介面和與服務端進行通訊。AJAX技術允許使用者與應用程式發生非同步的互動---與伺服器進行獨立的通訊。注意AJAX引擎給Web應用程式傳送一個HTTP請求並且僅接收需要的資料（而不是整個HTML頁面）。

GridSettings

這個主要類是用來儲存jqGrid的設定資訊並進行分頁和排序。

如你在上面類圖所見，這個類包含4個屬性用於儲存當前grid設定資訊。

1)PageIndex：儲存當前頁索引（1表示第一頁……）；

2)PageSize：儲存頁尺寸（設定一個grid頁面能載入的最大行數）；

3)SortColumn：儲存排序的列；

4)SortOrder：儲存排序順序（ASC或DESC）；

這個類實現了Serializable介面，重寫了ToString()方法將當前

相關推薦