ASP.NET MVC 企業級實戰 —— 創建用戶權限管理范例程序（三）

上一篇，主要講解了模型的創建和利用Entity Framework來操作數據庫，這篇我們會講解如何創建控制器和視圖。

由於最近很多網友反饋在VS 2012 無法安裝NBlock框架模版，故再次聲明，NBlock框架目前在支持 VS 2010 。

NBlock框架采用ASP.NET MVC3作為UI展現，用JQuery 插件提高用戶交互體驗，ORM采用微軟的Entity Framework 4.3.1的一套快速開發框架。

用戶權限管理的訪問地址：http://42.121.122.31/, 速度可能會慢，因為我是通過園豆購買的阿里雲主機，最差的那種配置。

 

下面進入我們的正題，一步一步來創建用戶權限管理范例程序，接上一篇的內容如下：

七、 控制器和視圖（Controllers and Views）

傳統的Web 框架，如ASP/PHP/ASP.NET Web Forms 等等，請求的URL 地址都是映射到特定的文件。如請求的URL 地址，像/Products.aspx 或/Products.php，由 Products.aspx 或Products.php 文件負責處理。

基於Web 的MVC 框架映射URL 地址到服務器端代碼有點不同，不是映射URL 地址到特定文件，而是映射到類的方法上。這些類就是MVC 中的 Controller 控制器，它們負責處理進來的請求和用戶輸入，接收和保存數據，並返回結果給客戶端（顯示HTML、下載文件、JSON格式的數據、或重定向到不同的URL 等等）。

現在，我們已經創建一個基本的Model類，下一步將添加控制器類到項目中，為OrgAuth應用系統提供用戶信息的列表展示和維護信息表單。

   7.1 添加UserController控制器

右鍵點擊Web 項目中的Controllers 文件夾，選擇 添加 -> Controller，如下圖所示。

在彈出的Add Controller 對話框，控制器名稱輸入UserController。點擊Add按鈕，在項目文件中添加UserController.cs 文件。

我們先制作一個用戶列表供訪問者游覽，用戶列表會檢索出所有的用戶，包含停用的和未被停用的用戶。應用程序將發布如下的URL 地址：/User/，對應的Action方法是Index。如下圖所示。

NBlock框架是利用JQuery插件FlexiGrid來顯示列表的，而該列表獲取數據的方式是異步請求規定格式的JSON數據，所以我們還需要再定義一個獲取數據源的名為List的Action方法，返回值是JsonResult。如下圖所示。

 public JsonResult List(nbPageInfo pager, nbSearchCondition where)
{
var pageData = userRepository.GetPageable(pager, where);
return Json(pager.ToGridData(pageData));
}

在這個List的Action方法中，我們使用之前介紹的OrgAuthRepository類來實現獲取分頁檢索數據的方法。

說明：nbPageInfo類型參數和nbSearchCondition類型參數是NBlock框架為分頁查詢檢索特意封裝的類型，一個是封裝了分頁信息，一個是封裝了查詢條件信息。

   7.2 給控制器使用OrgAuthRepository

現在UserController 可以直接定義一個OrgAuthRepository<UserInfo>實例作為UserController類的成員變量，不過這樣會使UserController緊耦合OrgAuthRepository類。耦合（Coupling）指一個類顯式依賴另外的一個類才能工作。因為OrgAuthRepository類需要訪問數據庫，導致構建OrgAuthRepository類比較復雜，也不利於單元測試。

我們可以通過Dependency Injection(依賴注入)設計模式來解決這一問題，類之間（如Repository 類提供數據訪問）不再創建隱式的依賴。而是通過調用方的構造函數的參數，顯式傳遞依賴關系。如果依賴關系通過接口來定義，我們就可以針對單元測試的情況，靈活傳遞虛假（Fake）的依賴實現。這樣，我們在創建測試相關的依賴實現時，不必訪問真實的數據庫。

NBlock框架已經內置了Dependency Injection(依賴注入)，而OrgAuthRepository類是繼承於IOrgAuthRepository接口的，故我們在UserController類通過構造函數的方式注入IOrgAuthRepository接口。代碼如下所示：

 #region 構造函數
private readonly IOrgAuthRepository<UserInfo> userRepository;
public UserController(IOrgAuthRepository<UserInfo> userRepository)
{
this.userRepository = userRepository;
}
#endregion

 

到這里，我們的UserController類就有了userRepository成員變量，那么7.2提到的List的Action方法就可以利用userRepository來獲取分頁查詢數據了。

  7.3 為控制器添加視圖Views

盡管在Action 方法中可以寫代碼拼裝HTML，通過Response.Write() 方法返回給客戶端，但是這種方法並不可取。更好的辦法是，在UserController 的Action 方法中只處理業務和數據邏輯，並將相關的數據傳遞給單獨的視圖（view）模板，視圖（view）負責生成HTML 來展示信息。隨后我們會看到，視圖（view）模板就是一個簡單的文本文件，通常包含HTML 標識和嵌入的腳本。將控制器Controller 邏輯和視圖view 展示分開帶來很多好處，尤其是它可以清晰地隔離開后台邏輯代碼和用戶展示界面。這可以方便修改用戶展示界面，而不會更改后台邏輯代碼，當然也有助於開發人員和用戶界面設計人員在項目中的合作。

下面，我們右鍵點擊UserController 類的Index方法，選擇 Add View，如下圖所示。

在彈出的Add View 對話框，默認情況下，對話框中的視圖名稱就與光標所在的Action 方法中的視圖名稱一致，我們就是要創建Index視圖，故不需要修改。點擊下方的 Use a layout or master page文件選擇按鈕，選擇_LayoutList.cshtml布局文件。這是NBlock框架模版默認自帶的幾套布局之一。

點擊Add 按鈕，Visual Studio將在\Views\User 目錄創建一個新的Index.cshtml 視圖模板，如果該目錄不存在，也會自動創建目錄。默認情況下，視圖模板有定義標題和布局的代碼塊。如下圖所示。

為了實現Index視圖的用戶列表檢索界面，我們需要添加列表定義的代碼，如下圖所示。nbGridFor是NBlock框架封裝的列表HTMLHelper類，nbGridFor需要指定列表顯示的數據類型，我們指定了UserInfo數據類型，同時nbGridFor還需要接受一個Action委托參數，用來設置列表的顯示，我們設置了列表需要顯示的列信息。

@(Html.nbGridFor<UserInfo>(s =>
{
s.Columns(c =>
{
c.Bind(m => m.Id).IsKey();
c.Bind(m => m.UserCode);
c.Bind(m => m.UserName);
c.Bind(m => m.OrgName);
c.Bind(m => m.AccountState);
c.Bind(m => m.SeqNo);
c.Bind(m => m.UpdateUser);
c.Bind(m => m.UpdateDate);
});
}))

下面運行OrgAuth 范例程序，登錄應用系統之后，在瀏覽器地址欄輸入：/User。如下圖所示。

整個列表的布局效果是顯示出來了，有我們定義的顯示字段，有分頁導航條，但是沒有沒有數據，在數據庫中已經有5條用戶信息。這是因為我們只設置了列表顯示的代碼，而沒有設置獲取數據的代碼，我們修改一下Index.cshtml視圖的代碼，設置列表的Action屬性為List這個Action方法，如下圖所示。

我們再次運行OrgAuth 范例程序，登錄應用系統之后，在瀏覽器地址欄輸入：/User。如下圖所示。

OrgAuth 范例程序運行出現了錯誤，報SQlite不存在表NB_UserInfo。這是因為我們更換了數據庫而沒有修改Web項目的連接字符串。修改完連接字符串之后就可以看到完整的界面了，如下圖所示。

到這里，已經講解完ASP.NET MVC 和 NBlock框架的基本概念。我們知道了如何創建Model對象，如何創建控制器及編寫Action方法，如何創建視圖。開發步驟如下：

第一步，新建數據庫OrgAuth，

第二步：新建用戶表NB_UserInfo

第三步：添加Model對象到OrgAuth.Models類庫項目下的Model.edmx文件中，

第四步：添加控制器（Controller）到OrgAuth.Web項目的Controllers文件下。

第五步：添加Action方法，並創建相應的視圖（view）。

第六步：運行OrgAuth 范例程序，查看運行效果！

其中第三步到第五步在后續的開發中會經常重復操作！最后我們需要增加菜單來導航到用戶列表界面，如下圖所示。

實現上述功能，只需要在Service項目中 /Core/nbPrivilegeService.cs文件中增加如下代碼。

new nbPrivilege{
Id = "8362fa20-49c2-48fb-a0bd-33f81408589b",
Code = "User",
Name = "用戶管理",
ParentId = "bf1ea2e3-36f5-4af0-b485-8d15b16bf53d",
ParentCode = "SysSetting",
Url = "/User",
},

今天就講到這里，下一篇我們會講解如何完善用戶列表界面，敬請期待！