系列文章

七天學會ASP.NET MVC (一)——深入理解ASP.NET MVC

七天學會ASP.NET MVC (二)——ASP.NET MVC 數據傳遞

七天學會ASP.NET MVC (三)——ASP.Net MVC 數據處理

七天學會ASP.NET MVC (四)——用戶授權認證問題

七天學會ASP.NET MVC (五)——Layout頁面使用和用戶角色管理

?

目錄

實驗22——加入頁腳

實驗23——實現用戶角色管理

實驗24——實現項目外觀一致性

實驗25——使用Action? 過濾器讓頁眉和頁腳代碼更有效

總結

?

實驗22——加入頁腳

在本實驗中，我們會在Employee 頁面加入頁腳，通過本實驗理解分部視圖。

什么是“分部視圖”？

從邏輯上看，分部視圖是一種可重用的視圖，不會直接顯示，包括于其它視圖中。作為其視圖的一部分來顯示。使用方法與用戶控件相似，但不須要編寫后臺代碼。

1. 創建分部視圖的 ViewModel

右擊 ViewModel 目錄。新建 FooterViewModel 類，例如以下：

1: public class FooterViewModel 2: { 3: public string CompanyName { get; set; } 4: public string Year { get; set; } 5: }

2. 創建分部視圖

右擊“~/Views/Shared”目錄。選擇加入->視圖。

輸入View 名稱”Footer”，選擇復選框“Create as a partial view”。點擊加入按鈕。

注意：View中的Shared 共享目錄是為每一個控制器都可用的目錄，不是某個特定的控制器所屬。

3. 在分部View 中顯示數據

打開Footer.cshtml，輸入下面HTML 代碼。

1: @using WebApplication1.ViewModels 2: ? 3: @model FooterViewModel 4: ? 5: <div style="text-align:right;background-color: silver;color: darkcyan;border: 1px solid gray;margin-top:2px;padding-right:10px;"> 6: ? 7: @Model.CompanyName ? @Model.Year 8: ? 9: </div>

4.? 在Main ViewModel 中包括Footer 數據

打開 EmployeeListViewModel 類。加入新屬性，保存 Footer數據，例如以下：

1: public class EmployeeListViewModel 2: { 3: public List<EmployeeViewModel> Employees { get; set; } 4: ? 5: public string UserName { get; set; } 6: ? 7: public FooterViewModel FooterData { get; set; }//New Property 8: }

在本實驗中Footer會作為Index View的一部分顯示。因此須要將Footer的數據傳到Index View頁面中。Index View 是EmployeeListViewModel的強類型View，因此Footer須要的全部數據都應該封裝在EmployeeListViewModel中。

5. 設置Footer 數據

打開 EmployeeController ,在Index? action 方法中設置FooterData 屬性值。例如以下：

1: public ActionResult Index() 2: { 3: ... 4: ... 5: employeeListViewModel.FooterData = new FooterViewModel(); 6: employeeListViewModel.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value 7: employeeListViewModel.FooterData.Year = DateTime.Now.Year.ToString(); 8: return View("Index", employeeListViewModel); 9: }

6. 顯示Footer

打開Index.cshtml 文件，在Table 標簽后顯示Footer 分部View，例如以下：

1: </table> 2: @{ 3: Html.RenderPartial("Footer", Model.FooterData); 4: } 5: </div> 6: </body> 7: </html>

7. 執行。打開Index View

關于實驗22

?Html.Partial的作用是什么？與Html.RenderPartial差別是什么？

與Html.RenderPartial作用同樣,Html.Partial會在View 中用來顯示分部View。

Html.RenderPartial會將分部View的結果直接寫入HTTP 響應流中，而 Html.Partial會返回 MvcHtmlString值。

什么是MvcHtmlString，為什么 Html.Partial返回的是MvcHtmlString 而不是字符串？

每一個MSDN”MvcHtmlString”代表了一個 HTML編碼的字符串，不須要二次編碼。

代碼例如以下：

1: @{ 2: string MyString = "My Simple String"; 3: } 4: @MyString

以上代碼會轉換為：

Razor顯示了全部的內容，很多人會覺得已經看到加粗的字符串。是Razor Html在顯示內容之前將內容編碼。這就是為什么使用純內容來取代粗體。

當不適用razor編碼時。使用 MvcHtmlString，MvcHtmlString是razor的一種表示。即“字符串已經編碼完成。不須要其它編碼”。

如：

1: @{ 2: string MyString = "My Simple String"; 3: } 4: @MvcHtmlString.Create(MyString)

輸出：

Html.RenderAction 和 Html.Action兩者之間有什么不同？更推薦使用哪種方法？

Html.RenderAction會將Action 方法的執行結果直接寫入HTTP 響應請求流中，而 Html.Action會返回MVCHTMLString。更推薦使用Html.RenderAction，由于它更快。當我們想在顯示前改動action執行的結果時，推薦使用Html.Action。

?

實驗23——實現用戶角色管理

在實驗23中我們將實現管理員和非管理員登錄的功能。

需求非常easy：非管理員用戶沒有創建新Employee的權限。

實驗23會幫助大家理解MVC提供的Session 和Actioｎ過濾器。

因此我們將實驗２3分為兩部分：

第一部分：非管理員用戶登錄時，隱藏 Ａｄｄ Ｎｅｗ 鏈接

１. 創建標識用戶身份的枚舉類型

右擊Model 目錄。選擇加入新項目。選擇“Code File”選項。

輸入“UserStatus”名，點擊加入。

“Code File”選項會創建一個“．ｃｓ”文件．

創建ＵｓｅｒＳｔａｔｕｓ枚舉類型。例如以下：

1: namespace WebApplication1.Models 2: { 3: public enum UserStatus 4: { 5: AuthenticatedAdmin, 6: AuthentucatedUser, 7: NonAuthenticatedUser 8: } 9: }

?2. 改動業務層功能

刪除? IsValidUser函數，創建新函數“GetUserValidity“，例如以下：

1: public UserStatus GetUserValidity(UserDetails u) 2: { 3: if (u.UserName == "Admin" && u.Password == "Admin") 4: { 5: return UserStatus.AuthenticatedAdmin; 6: } 7: else if (u.UserName == "Sukesh" && u.Password == "Sukesh") 8: { 9: return UserStatus.AuthentucatedUser; 10: } 11: else 12: { 13: return UserStatus.NonAuthenticatedUser; 14: } 15: }

3. 改動DoLogin action方法

打開 AuthenticationController， 改動DoLogin action:

1: [HttpPost] 2: public ActionResult DoLogin(UserDetails u) 3: { 4: if (ModelState.IsValid) 5: { 6: EmployeeBusinessLayer bal = new EmployeeBusinessLayer(); 7: //New Code Start 8: UserStatus status = bal.GetUserValidity(u); 9: bool IsAdmin = false; 10: if (status==UserStatus.AuthenticatedAdmin) 11: { 12: IsAdmin = true; 13: } 14: else if (status == UserStatus.AuthentucatedUser) 15: { 16: IsAdmin = false; 17: } 18: else 19: { 20: ModelState.AddModelError("CredentialError", "Invalid Username or Password"); 21: return View("Login"); 22: } 23: FormsAuthentication.SetAuthCookie(u.UserName, false); 24: Session["IsAdmin"] = IsAdmin; 25: return RedirectToAction("Index", "Employee"); 26: //New Code End 27: } 28: else 29: { 30: return View("Login"); 31: } 32: }

在上述代碼中。已經出現Session 變量來識別用戶身份。

什么是Session？

Session是Asp.Net的特性之中的一個。能夠在MVC中重用，可用于暫存用戶相關數據，session變量周期是穿插于整個用戶生命周期的。

4. 移除存在的 AddNew 鏈接

打開“~/Views/Employee”目錄下 Index.cshtml View，移除”Add New“超鏈接。

<!-- Remove following line from Index.cshtml --><a href="/Employee/AddNew">Add New</a>

5. 創建分部View

右擊“~/Views/Employee”目錄，選擇加入View,設置View名稱”“AddNewLink”“，選中”Create a partial View“復選框。

6. 輸入分部View的內容

在新創建的分部視圖中輸入下面內容：

<a href="/Employee/AddNew">Add New</a>

7.? 新建 Action 方法

打開 EmployeeController，新建Action 方法”GetAddNewLink“，例如以下：

1: public ActionResult GetAddNewLink() 2: { 3: if (Convert.ToBoolean(Session["IsAdmin"])) 4: { 5: return Partial View("AddNewLink"); 6: } 7: else 8: { 9: return new EmptyResult(); 10: } 11: }

8.? 顯示? AddNew 鏈接

打開 Index.html，輸入下面代碼：

1: <a href="/Authentication/Logout">Logout</a> 2: </div> 3: <hr /> 4: @{ 5: Html.RenderAction("GetAddNewLink"); 6: } 7: <div> 8: <table border="1"> 9: <tr>

Html.RenderAction 執行Action 方法，并將結果直接寫入響應流中。

9. 執行

測試1

測試2

第二部分： 直接URL 安全

以上實驗實現了非管理員用戶無法導航到AddNew鏈接。這樣還不夠。假設非管理員用戶直接輸入AddNew URL，則會直接跳轉到此頁面。

非管理員用戶還是能夠直接訪問AddNew方法，為了解決問題，我們會引入MVC action 過濾器。Action 過濾器使得在action方法中加入一些預處理和后處理的邏輯推斷問題。在整個實驗中，會注重ActionFilters預處理的支持和后處理的功能。

1. 安裝過濾器

新建目錄Filters，新建類”AdminFilter“。

2. 創建過濾器

通過繼承 ActionFilterAttribute 。將 AdminFilter類升級為”ActionFilter“，例如以下：

1: public class AdminFilter:ActionFilterAttribute 2: { 3: ? 4: }

注意：使用”ActionFilterAttribute “須要在文件頂部輸入”System.Web.Mvc“。

3. 加入安全驗證邏輯

在ActionFliter中重寫 OnActionExecuting方法：

1: public override void OnActionExecuting(ActionExecutingContext filterContext) 2: { 3: if (!Convert.ToBoolean(filterContext.HttpContext.Session["IsAdmin"])) 4: { 5: filterContext.Result = new ContentResult() 6: { 7: Content="Unauthorized to access specified resource." 8: }; 9: } 10: }

4. 綁定過濾器

在AddNew和 SaveEmployee方法中綁定過濾器，例如以下：

1: [AdminFilter] 2: public ActionResult AddNew() 3: { 4: return View("CreateEmployee",new Employee()); 5: } 6: ... 7: ... 8: [AdminFilter] 9: public ActionResult SaveEmployee(Employee e, string BtnSubmit) 10: { 11: switch (BtnSubmit) 12: { 13: case "Save Employee": 14: if (ModelState.IsValid) 15: { 16: EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); 17: .... 18: ....

5. 執行

關于實驗23

能夠通過瀏覽器直接調用GetAddNewLink方法嗎？

?能夠直接調用，也可直接停止”GetAddNewLink“的執行。

Html.Action有什么作用？

與Html.RenderAction作用同樣，Html.Action會執行action 方法，并在View中顯示結果。

語法：

1: @Html.Action("GetAddNewLink");

Html.RenderAction 和 Html.Action兩者之間有什么不同？更推薦使用哪種方法？

Html.RenderAction會將Action 方法的執行結果直接寫入HTTP 響應請求流中。而 Html.Action會返回MVCHTMLString。更推薦使用Html.RenderAction，由于它更快。當我們想在顯示前改動action執行的結果時，推薦使用Html.Action。

什么是 ActionFilter ?

與AuthorizationFilter相似，ActionFilter是ASP.NET MVC過濾器中的一種。同意在action 方法中加入預處理和后處理邏輯。

實驗24——實現項目外觀的一致性

在ASP.NET能夠保證外觀一致性的是母版頁的使用。

MVC卻不同于ASP.NET,在RAZOR中，母版頁稱為布局頁面。

在開始實驗之前，首先來了解布局頁面

1. 帶有歡迎消息的頁眉

2. 帶有數據的頁腳

最大的問題是什么？

帶有數據的頁腳和頁眉作為ViewModel的一部分傳從Controller傳給View。

如今最大的問題是在頁眉和頁腳移動到布局頁面后，怎樣將數據從View傳給Layout頁面。

解決方式——繼承

可使用繼承原則，通過實驗來深入理解。

1. 創建ViewModel基類

在ViewModel 目錄下新建ViewModel 類 ”BaseViewModel“，例如以下：

1: public class BaseViewModel 2: { 3: public string UserName { get; set; } 4: public FooterViewModel FooterData { get; set; }//New Property 5: }?

BaseViewModel可封裝布局頁所須要的全部值。

2. 準備 EmployeeListViewModel

刪除EmployeeListViewModel類的 UserName和 FooterData屬性，并繼承 BaseViewModel：

1: public class EmployeeListViewModel:BaseViewModel 2: { 3: public List<EmployeeViewModel> Employees { get; set; } 4: }

3.? 創建布局頁面

右擊shared目錄。選擇加入>>MVC5 Layout Page。輸入名稱”MyLayout“，點擊確認

1: <!DOCTYPE html> 2: ? 3: <html> 4: <head> 5: <meta name="viewport" content="width=device-width" /> 6: <title>@ViewBag.Title</title> 7: </head> 8: <body> 9: <div> 10: @RenderBody() 11: </div> 12: </body> 13: </html>

4. 將布局轉換為強類型布局

1: @using WebApplication1.ViewModels 2: @model BaseViewModel

5. 設計布局頁面

在布局頁面加入頁眉，頁腳和內容。內容，三部分，例如以下：

1: <html> 2: <head> 3: <meta name="viewport" content="width=device-width" /> 4: <title>@RenderSection("TitleSection")</title> 5: @RenderSection("HeaderSection",false) 6: </head> 7: <body> 8: <div style="text-align:right"> 9: Hello, @Model.UserName 10: <a href="/Authentication/Logout">Logout</a> 11: </div> 12: <hr /> 13: <div> 14: @RenderSection("ContentBody") 15: </div> 16: @Html.Partial("Footer",Model.FooterData) 17: </body> 18: </html>

如上所看到的，布局頁面包括三部分，TitleSection, HeaderSection 和 ContentBody，內容頁面將使用這些部分來定義合適的內容。

6. 在 Index View中綁定布局頁面

打開Index.cshtml,在文件頂部會發現下面代碼：

1: @{ 2: Layout = null; 3: }

改動：

1: @{ 2: Layout = "~/Views/Shared/MyLayout.cshtml"; 3: }

7.設計Index View

• 從Index View中去除頁眉和頁腳
• 在Body標簽中復制保留的內容，并存放在某個地方。

• 復制Title標簽中的內容
• 移除View中全部的HTML 內容，確保僅僅移動了HTML，@model 且沒有移動layout語句
• 在復制的內容中定義TitleSection和 Contentbody

完整的View代碼例如以下：

1: @using WebApplication1.ViewModels 2: @model EmployeeListViewModel 3: @{ 4: Layout = "~/Views/Shared/MyLayout.cshtml"; 5: } 6: ? 7: @section TitleSection{ 8: MyView 9: } 10: @section ContentBody{ 11: <div> 12: @{ 13: Html.RenderAction("GetAddNewLink"); 14: } 15: <table border="1"> 16: <tr> 17: <th>Employee Name</th> 18: <th>Salary</th> 19: </tr> 20: @foreach (EmployeeViewModel item in Model.Employees) 21: { 22: <tr> 23: <td>@item.EmployeeName</td> 24: <td style="background-color:@item.SalaryColor">@item.Salary</td> 25: </tr> 26: } 27: </table> 28: </div> 29: }

?

8. 執行

9. 在 CreateEmployee 中綁定布局頁面

打開 Index.cshtml，改動頂部代碼：

1: @{ 2: Layout = "~/Views/Shared/MyLayout.cshtml"; 3: }

10. 設計 CreateEmployee? View

與第7步中的程序相似，定義 CreateEmployee View中的Section 。在本次定義中僅僅加入一項，例如以下：

1: @using WebApplication1.Models 2: @model Employee 3: @{ 4: Layout = "~/Views/Shared/MyLayout.cshtml"; 5: } 6: ? 7: @section TitleSection{ 8: CreateEmployee 9: } 10: ? 11: @section HeaderSection{ 12: <script src="~/Scripts/Validations.js"></script> 13: <script> 14: function ResetForm() { 15: document.getElementById('TxtFName').value = ""; 16: document.getElementById('TxtLName').value = ""; 17: document.getElementById('TxtSalary').value = ""; 18: } 19: </script> 20: } 21: @section ContentBody{ 22: <div> 23: <form action="/Employee/SaveEmployee" method="post" id="EmployeeForm"> 24: <table> 25: <tr> 26: <td> 27: First Name: 28: </td> 29: <td> 30: <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" /> 31: </td> 32: </tr> 33: <tr> 34: <td colspan="2" align="right"> 35: @Html.ValidationMessage("FirstName") 36: </td> 37: </tr> 38: <tr> 39: <td> 40: Last Name: 41: </td> 42: <td> 43: <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" /> 44: </td> 45: </tr> 46: <tr> 47: <td colspan="2" align="right"> 48: @Html.ValidationMessage("LastName") 49: </td> 50: </tr> 51: ? 52: <tr> 53: <td> 54: Salary: 55: </td> 56: <td> 57: <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" /> 58: </td> 59: </tr> 60: <tr> 61: <td colspan="2" align="right"> 62: @Html.ValidationMessage("Salary") 63: </td> 64: </tr> 65: ? 66: <tr> 67: <td colspan="2"> 68: ? 69: <input type="submit" name="BtnSubmit" value="Save Employee" οnclick="return IsValid();" /> 70: <input type="submit" name="BtnSubmit" value="Cancel" /> 71: <input type="button" name="BtnReset" value="Reset" οnclick="ResetForm();" /> 72: </td> 73: </tr> 74: </table> 75: </div> 76: }

11. 執行

Index View是? EmployeeListViewModel類型的強View類型，是 BaseViewModel的子類，這就是為什么Index View可一直發揮作用。

CreateEmployee View 是CreateEmployeeViewModel的強類型，并非BaseViewModel的子類，因此會出現以上錯誤。

12. 準備 CreateEmployeeViewModel

使CreateEmployeeViewModel 繼承 BaseViewModel，例如以下：

1: public class CreateEmployeeViewModel:BaseViewModel 2: { 3: ...

13. 執行

報錯。該錯誤好像與步驟11中的錯誤全然不同，出現這些錯誤的根本原因是未初始化AddNew action方法中的Header和Footer數據。

14. 初始化Header和Footer 數據

改動AddNew方法：

1: public ActionResult AddNew() 2: { 3: CreateEmployeeViewModel employeeListViewModel = new CreateEmployeeViewModel(); 4: employeeListViewModel.FooterData = new FooterViewModel(); 5: employeeListViewModel.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value 6: employeeListViewModel.FooterData.Year = DateTime.Now.Year.ToString(); 7: employeeListViewModel.UserName = User.Identity.Name; //New Line 8: return View("CreateEmployee", employeeListViewModel); 9: }

15. 初始化 SaveEmployee中的Header和 FooterData

1: public ActionResult SaveEmployee(Employee e, string BtnSubmit) 2: { 3: switch (BtnSubmit) 4: { 5: case "Save Employee": 6: if (ModelState.IsValid) 7: { 8: ... 9: } 10: else 11: { 12: CreateEmployeeViewModel vm = new CreateEmployeeViewModel(); 13: ... 14: vm.FooterData = new FooterViewModel(); 15: vm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value 16: vm.FooterData.Year = DateTime.Now.Year.ToString(); 17: vm.UserName = User.Identity.Name; //New Line 18: return View("CreateEmployee", vm); // Day 4 Change - Passing e here 19: } 20: case "Cancel": 21: return RedirectToAction("Index"); 22: } 23: return new EmptyResult(); 24: }

16. 執行

關于實驗24

RenderBody 有什么作用？

之前創建了Layout 頁面，包括一個Razor語句如：

1: @Html.RenderBody()

首先我們先來了RenderBody是用來做什么的？

在內容頁面。一般會定義Section，聲明Layout頁面。可是奇怪的是，Razor同意定義在Section外部定義一些內容。

全部的非section內容會使用RenderBody函數來渲染，下圖能夠更好的理解：

布局是否可嵌套？

能夠嵌套。創建Layout頁面，可使用其它存在的Layout頁面。語法同樣。

是否須要為每一個View定義Layout頁面？

會在View目錄下發現特殊的文件“__ViewStart.cshtml”，在其內部的設置會應用全部的View。

比如：在__ViewStart.cshtml中輸入下面代碼，并給全部View 設置 Layout頁面。

1: @{ 2: Layout = "~/Views/Shared/_Layout.cshtml"; 3: }

是否在每一個Action 方法中須要加入Header和Footer數據代碼？

不須要，可在Action 過濾器的幫助下刪除反復的代碼。

是否強制定義了全部子View中的Section？

是的，假設Section定義為須要的section，默認的值會設置為true。例如以下

1: @RenderSection("HeaderSection",false) // Not required 2: @RenderSection("HeaderSection",true) // required 3: @RenderSection("HeaderSection") // required

?

實驗25——使用Action Fliter讓Header和Footer數據更有效

在實驗23中，我們已經知道了使用 ActionFilter的一個優點，如今來看看使用 ActionFilter的其它優點

1. 刪除Action 方法中的冗余代碼

刪除Index。AddNew， SaveEmployee方法中的Header和Footer數據代碼。

Header代碼如：

1: bvm.UserName = HttpContext.Current.User.Identity.Name;

Footer代碼如：

1: bvm.FooterData = new FooterViewModel(); 2: bvm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value 3: bvm.FooterData.Year = DateTime.Now.Year.ToString();

2.創建HeaderFooter 過濾器

在Filter目錄下新建類”HeaderFooterFilter“。并通過繼承ActionFilterAttribute類升級為Action Filter

3. 升級ViewModel

重寫 HeaderFooterFilter類的 OnActionExecuted方法，在該方法中獲取當前View Model ，并綁定Header和Footer數據。

1: public class HeaderFooterFilter : ActionFilterAttribute 2: { 3: public override void OnActionExecuted(ActionExecutedContext filterContext) 4: { 5: ViewResult v = filterContext.Result as ViewResult; 6: if(v!=null) // v will null when v is not a ViewResult 7: { 8: BaseViewModel bvm = v.Model as BaseViewModel; 9: if(bvm!=null)//bvm will be null when we want a view without Header and footer 10: { 11: bvm.UserName = HttpContext.Current.User.Identity.Name; 12: bvm.FooterData = new FooterViewModel(); 13: bvm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value 14: bvm.FooterData.Year = DateTime.Now.Year.ToString(); 15: } 16: } 17: } 18: }

4. 綁定過濾器

在Index中。AddNew，SaveEmployee的action 方法中綁定 HeaderFooterFilter

1: [HeaderFooterFilter] 2: public ActionResult Index() 3: { 4: EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel(); 5: ... 6: } 7: ... 8: [AdminFilter] 9: [HeaderFooterFilter] 10: public ActionResult AddNew() 11: { 12: CreateEmployeeViewModel employeeListViewModel = new CreateEmployeeViewModel(); 13: //employeeListViewModel.FooterData = new FooterViewModel(); 14: //employeeListViewModel.FooterData.CompanyName = "StepByStepSchools"; 15: ... 16: } 17: ... 18: [AdminFilter] 19: [HeaderFooterFilter] 20: public ActionResult SaveEmployee(Employee e, string BtnSubmit) 21: { 22: switch (BtnSubmit) 23: { 24: ...

5. 執行

總結

本文主要介紹了ASP.NET MVC中頁眉頁腳的加入和Layout頁面的使用，并實現了用戶角色分配及Action Filter的使用，下一節中我們將是最難和最有趣的一篇。請持續關注吧。

原文鏈接：http://www.codeproject.com/Articles/1000435/Learn-MVC-Project-in-days-Day

總結

以上是生活随笔為你收集整理的七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。