7天玩轉(zhuǎn)ASP.NETMVC—第5天

目錄

  • 第 1 天

    創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比巍山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式巍山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋巍山地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

  • 第 2 天

  • 第 3 天

  • 第 4 天

  • 第 5 天

  • 第 6 天

  • 第 7 天

0. 前言

歡迎來到第五天的學習。希望第一天到第四天的學習，你都是開心的。

1. Lab 22 — 增加 Footer

在這個實驗中，我們將會向 Employee 頁面添加 Footer。本次實驗的目標是理解分部視圖(Partial Views)。

什么是「Partial Views」？

邏輯上講，分部視圖(Partial Views) 是一個可重用的視圖，它不會被直接顯示。它會被其它視圖所包含，然后作為該視圖的一部分來顯示。它類似于 ASP.NET Web Forms 中的用戶控件，但是沒有后臺代碼。

第一步：為 Partial View 創(chuàng)建 ViewModel

右擊 ViewModel 文件夾，然后創(chuàng)建一個類，命名為 FooterViewModel。

public class FooterViewModel{   public string CompanyName { get; set; }   public string Year { get; set; }}

第二步：創(chuàng)建 Partial View

右擊「~/Views/Shared」文件夾，選擇 Add -> View。

7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天

設置視圖的名稱為 Footer。選中「Create as a partial view」復選框，然后點擊「Add」。

注意：我們已經(jīng)在第一天的學習中談論了 Shared 文件夾。Shared 文件夾包含了視圖，這些視圖不會屬于一個特定的控制器。在 Shared 文件夾下的視圖適用于所有控制器。

第三步：在 Partial View 中顯示數(shù)據(jù)

打開 Footer.cshtml，然后放置如下代碼。

  1. @usingWebApplication1.ViewModels
  3. @modelFooterViewModel
  5. <div style="text-align:right;background-color: silver;color: darkcyan;border: 1px solid gray;margin-top:2px;padding-right:10px;">
  7. @Model.CompanyName&copy;@Model.Year
  9. </div>
第四步：在 Main ViewModel 中包含 Footer 數(shù)據(jù)
打開 EmployeeListViewModel 類，然后增加一個新的屬性來承載 Footer 數(shù)據(jù)。
  1. publicclassEmployeeListViewModel
  2. {
  3.     publicList<EmployeeViewModel>Employees{get;set;}
  5.     publicstringUserName{get;set;}
  7.     publicFooterViewModelFooterData{get;set;}//New Property
  8. }
在我們的例子中，F(xiàn)ooter 視圖將會作為 Index 視圖的一部分展示。
我們將會在 Index 視圖中向 Footer 傳輸必要數(shù)據(jù)。
Index 視圖是一個 EmployeeListViewModel 的強類型視圖，因此 Footer 中需要的數(shù)據(jù)都應該被封裝在 EmployeeListViewModel 類中。
第五步：設置 Footer 數(shù)據(jù)
打開 EmployeeController，然后在 Index 行為方法中設定 FooterData 屬性值。
public ActionResult Index(){   ...   ...    employeeListViewModel.FooterData = new FooterViewModel();    employeeListViewModel.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value    employeeListViewModel.FooterData.Year = DateTime.Now.Year.ToString();    return View("Index", employeeListViewModel);}
第六步：展示 Footer
打開 Index.cshtml 文件，然后在 Table 標簽后展示 Footer 視圖。
</table>        @{            Html.RenderPartial("Footer", Model.FooterData);        }    </div></body></html>
第七步：執(zhí)行并測試
按下 F5。導航到 Index 視圖。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
Lab 22 的 Q&A
Html.Partial 是用來做什么的？
它類似于 Html.RenderPartial，Html.Partial 用于在視圖中展示 Partial View。
它的語法如下。非常簡單。
@Html.Partial("Footer", Model.FooterData);
兩者的區(qū)別是什么？
Html.RenderPartial 將會把 Partial View 的結(jié)果寫入 HTTP 響應流中，而 Html.Partial 將會以 MvcHtmlString 的格式返回結(jié)果。
什么是 MvcHtmlString，為什么 Html.Partial 返回的是 MvcHtmlString，而不是字符串？
首先讓我們理解下什么是 MvcHtmlString。
MSDN 的定義是「MvcHtmlString 代表一個 HTML 編碼的字符串，這種字符串不應該再次編碼」。
更好地理解這個定義，請查看下面代碼。
@{   string MyString = "My Simple String";}@MyString
它將會產(chǎn)生如下輸出。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
正如你所看見的，Razor 展示了所有的內(nèi)容?？赡茉S多人會以為將輸出加粗的字符串，但是 Razor Html 在展示之前對內(nèi)容進行了編碼，這就是為什么我們獲得的是純內(nèi)容，而不是加粗的字符串。
當我們不想用 Razor 編碼時，我們可以使用 MvcHtmlString。MvcHtmlString 是 Razor 的一種表示，即「字符串已經(jīng)編碼了，不再需要額外編碼」。
例如我們可以看下面的代碼。
@{   string MyString = "My Simple String";}@MvcHtmlString.Create(MyString)
它將會產(chǎn)生如下輸出。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
為什么 Html.Partial 返回的是 MvcHtmlString，而不是字符串呢？
我
們已經(jīng)理解了「Razor 將會編碼字符串，但是不會對 MvcHtmlString 編碼」這一事實。如果 Partial View 
內(nèi)容被認為是像它展示的那樣的純字符串，便沒有意義。我們希望它被當成是一個 HTML 內(nèi)容，這樣我們就需要停止 Razor 編碼，因此 
Partial 方法被設計為返回 MvcHtmlString。
哪個更加推崇，Html.RenderPartial 還是 Html.Partial ？
Html.RenderPartial 更被推崇，因為它更快。
什么時候運用 Html.Partial 更好？
當我們想在展示之前改變 Partial View 返回的結(jié)果，推薦使用 Html.Partial。
打開 Index.cshtml，然后打開 Footer，放置如下代碼。
@{            MvcHtmlString result = Html.Partial ("Footer", Model.FooterData);    string finalResult = result.ToHtmlString().Replace("2015", "20000");            }@MvcHtmlString.Create(finalResult)
現(xiàn)在頁腳展示如下。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
為什么將 Partial View 放置在 Shared 文件夾下？
因為 Partial View 意味著可以重復利用的資源，因此放置它們的地點是 Shared 文件夾下。
我們不能將 Partial View 放置到一個特殊的控制器文件夾內(nèi)嗎？例如 Employee 或者 Authentication？
我們可以這樣做，但是在這種場景下，它將不會適用于指定控制器。
例如：當我們將 Partial View 放置到 Employee 文件夾下，它將不會適用于 AuthenticationController 或者適用于 AuthenticationController 相關的視圖。
為什么 Partial View 的定義包含「邏輯」詞匯？
在定義中，我們已經(jīng)知道 Partial View 是一個可重用的視圖，但是它不能通過自己執(zhí)行。它需要放置到其它視圖中，然后作為這些視圖的一部分來展示。
我們所說的 Partial View 可重用是事實，但是我們提到的執(zhí)行在邏輯上是事實。技術(shù)上而言，這不是一個正確的解釋。我們可以創(chuàng)建一個行為方法，來返回如下的視圖結(jié)果。
public ActionResult MyFooter(){    FooterViewModel FooterData = new FooterViewModel();    FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value    FooterData.Year = DateTime.Now.Year.ToString();    return View("Footer", FooterData);}
它將會展示如下的輸出。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
盡管在邏輯上沒有意義，但是技術(shù)上是可行的。Footer.cshtml 不會包含正確的結(jié)構(gòu)性 HTML。它意味著作為視圖的一部分來展示。因為我們說「邏輯上是沒有意義的」。
為什么要創(chuàng)建 Partial View，而不是直接在視圖底部添加內(nèi)容？
這樣做有兩個優(yōu)勢。
  1. 可重用性。我們可以將一個 Partial View 運用到多個視圖中去。
  2. 代碼保留。將其放置為一個分割的文件，使其管理和操縱都非常方便。
為什么在 Partial View 中沒有創(chuàng)建 Header？
作為最佳實踐，我們需要為 Partial View 創(chuàng)建 Header，但是為了保持最初實驗簡單化，我們并沒有這樣做。
2. Lab 23 — 實現(xiàn)基于角色的安全性
在本次實驗中，我們將會實現(xiàn) Admin 和 Non-Admin 兩種登錄功能。
需求是很簡單的。即「Non-Admin 用戶不能創(chuàng)建 Employees」。
通過這個實驗，我們將會理解 MVC 中的兩個主題。
  • Session
  • Action Filters
現(xiàn)在我們開始進行實驗。為了簡單化，我們將實驗分為兩部分。
Part 1 — Non-Admin 用戶登錄，隱藏 AddNew 鏈接
第一步：創(chuàng)建標識 UserStatus 的枚舉
右擊 Models 文件夾，選擇「Add New Item」。
在對話框中選擇「Code File」選項。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
在名稱欄中輸入「UserStatus」，然后點擊添加?！窩ode File」的選項將會創(chuàng)建一個空白的「.cs」文件。
創(chuàng)建一個枚舉，命名為 UserStatus，代碼如下。
namespace WebApplication1.Models{    public enum UserStatus    {        AuthenticatedAdmin,        AuthentucatedUser,        NonAuthenticatedUser    }}
第二步：更改業(yè)務層功能
刪除 IsValidUser 功能，然后創(chuàng)建一個新的功能，命名為 GetUserValidity。
public UserStatus GetUserValidity(UserDetails u){    if (u.UserName == "Admin" && u.Password == "Admin")    {        return UserStatus.AuthenticatedAdmin;    }    else if (u.UserName == "Sukesh" && u.Password == "Sukesh")    {        return UserStatus.AuthentucatedUser;    }    else    {        return UserStatus.NonAuthenticatedUser;    }}
第三步：更改 DoLogin 行為方法
打開 AuthenticationController，然后更改 DoLogin 行為方法如下。
[HttpPost]public ActionResult DoLogin(UserDetails u){    if (ModelState.IsValid)    {        EmployeeBusinessLayer bal = new EmployeeBusinessLayer();        //New Code Start        UserStatus status = bal.GetUserValidity(u);        bool IsAdmin = false;        if (status==UserStatus.AuthenticatedAdmin)        {            IsAdmin = true;        }        else if (status == UserStatus.AuthentucatedUser)        {            IsAdmin = false;        }        else        {            ModelState.AddModelError("CredentialError", "Invalid Username or Password");            return View("Login");        }        FormsAuthentication.SetAuthCookie(u.UserName, false);        Session["IsAdmin"] = IsAdmin;        return RedirectToAction("Index", "Employee");        //New Code End    }    else    {        return View("Login");    }}
正如你所看見的，我們運用 Session 變量來識別用戶是 Admin 用戶還是 non-Admin 用戶。
不知道什么是 Session？
Session 是 ASP.NET 的一個功能，在 ASP.NET MVC 中被重用。
我們運用 Session 變量來承載用戶相關的數(shù)據(jù)。Session 的生命周期取決于用戶的生命周期。它將一直可用直到當前的 Session 結(jié)束。
第四步：刪除已經(jīng)存在的 AddNew 鏈接
在「~/Views/Employee」文件夾下打開 Index.cshtml 視圖，然后完全刪除「Add New」超鏈接。
  1. <!-- Remove following line from Index.cshtml -->
  3. <a  href="/Employee/AddNew">Add New</a>
第五步：創(chuàng)建 Partial View
右擊「~/Views/Employee」文件夾，然后選擇 Add -> View。設置視圖的名稱為「AddNewLink」，然后確保選擇「Create as a partial view」復選框。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
第六步：在 Partial View 中放置內(nèi)容
在剛創(chuàng)建的 Partial View 中放置如下內(nèi)容。
<a  href="/Employee/AddNew">Add New</a>
第七步：創(chuàng)建行為方法
打開 EmployeeController 然后創(chuàng)建一個新的行為方法，命名為「GetAddNewLink」。
public ActionResult GetAddNewLink(){    if (Convert.ToBoolean(Session["IsAdmin"]))    {        return Partial View("AddNewLink");    }    else    {        return new EmptyResult();    }}
第八步：展示 AddNew 鏈接
打開 Index.html，然后放置如下代碼。
<a href="/Authentication/Logout">Logout</a></div><hr />@{  Html.RenderAction("GetAddNewLink");}<div><table border="1"><tr>
Html.RenderAction 執(zhí)行行為方法，然后向響應流中直接寫入結(jié)果。
第九步：執(zhí)行并測試
按下 F5，然后執(zhí)行應用。
  • Test 1
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
  • Test 2
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
Part 2 — 直接的 URL 安全性
按照上述的邏輯，一件事是可以確保的。即現(xiàn)在 non-Admin 用戶不能通過超鏈接導航到 AddNew 行為。
這樣就夠了嗎？
答案是否定的，這還不夠。如果一個 non-Admin 用戶直接通過 URL 試圖導航到 AddNew 行為會發(fā)生什么呢。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
正如你在上述例子中所看見的，一個 non-Admin 用戶依然可以訪問 AddNew 行為。
為
了解決這個問題，我們需要運用 MVC 中的 Action Filters。Action Filters 
讓我們向行為方法中添加一些預處理和后處理的邏輯。在本實驗中，我們將著重于 Action Filters 
的預處理功能，在后面的實驗中，我們再著重于后處理功能。
第一步：設置過濾器
在項目下創(chuàng)建一個新的文件夾，命名為 Filters，然后創(chuàng)建一個新的類，命名為 AdminFilter。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
第二步：創(chuàng)建過濾器
升級簡單的 AdminFilter 類到 ActionFilter，通過將其繼承 ActionFilterAttribute 類，代碼如下。
  1. publicclassAdminFilter:ActionFilterAttribute
  2. {
  4. }
注：為了運用 ActionFilterAttribute，你需要在頂部引用 System.Web.Mvc。
第三步：增加安全認證邏輯
在 ActionFilter 中重寫 OnActionExecuting 方法。
public override void OnActionExecuting(ActionExecutingContext filterContext){    if (!Convert.ToBoolean(filterContext.HttpContext.Session["IsAdmin"]))    {        filterContext.Result = new ContentResult()        {            Content="Unauthorized to access specified resource."        };    }}
第四步：附加過濾器
向 AddNew 和 SaveEmployee 行為方法添加過濾器。
[AdminFilter]public ActionResult AddNew(){    return View("CreateEmployee",new Employee());}......[AdminFilter]public ActionResult SaveEmployee(Employee e, string BtnSubmit){    switch (BtnSubmit)    {        case "Save Employee":            if (ModelState.IsValid)            {                EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();........
第五步：執(zhí)行和測試
按下 F5，然后執(zhí)行應用。運用 non-Admin 身份登錄，然后試圖通過 AddNew 行為的 URL 導航到 AddNew 行為方法。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
正如你所看見的，現(xiàn)在你的行為方法處于完全安全狀態(tài)。
Lab 23 的 Q&A
我們可以通過地址欄直接觸發(fā) GetAddNewLink 嗎？
答案是肯定的，我們已經(jīng)在「Talk on Lab 22」部分討論了這個行為。
直接停止執(zhí)行 GetAddNewLink 有可能嗎？
可以直接在 GetAddNewLink 中添加 ChildActionOnly 屬性。
[ChildActionOnly]public ActionResult GetAddNewLink(){    if (Convert.ToBoolean(Session["IsAdmin"])){
Html.Action 是用來做什么的？
就類似于 Html.RenderAction，Html.Action 將會執(zhí)行行為方法用于呈現(xiàn)視圖的結(jié)果。下面是語法。
@Html.Action("GetAddNewLink");
可以看出，語法相對來說簡單多了。
兩者的區(qū)別是什么？
Html.RenderAction 將會把行為方法的執(zhí)行結(jié)果直接寫入 HTTP 響應流，而 Html.Action 將會返回 MvcHtmlString 結(jié)果。
哪個更推崇？是 Html.RenderAction 還是 Html.Action？
更推崇 Html.RenderAction，因為它更快。
什么時候用 Html.Action 更好？
當我們想在呈現(xiàn)之前改變行為方法執(zhí)行的結(jié)果時，用 Html.Action 更好。
什么是 ActionFilter？
就類似于 AuthenticationFilter，ActionFilter 是 ASP.NET MVC 的一種過濾器類型。它允許我們向行為方法添加預處理和后處理邏輯。
3. Lab 24 — 任務實驗 — 處理 CSRF ***
從視圖的安全性方面出發(fā)，我們還需要在項目中處理 CSRF ***。這里我將不再做過多指導，你需要自己手動完成。
我建議你閱讀下述文章，然后實現(xiàn)方法。
如何在 MVC 中防止 CSRF ***
4. Lab 25 — 實現(xiàn)項目的一致性外觀
在 ASP.NET 領域中，一致性的布局意味著母版頁(MasterPage)。
但 ASP.NET MVC 是區(qū)別于此的。在 Razor 中，母版頁被稱為布局頁(Layout Pages)。
在正式開始試驗之前，我們先來討論一下在母版頁中我們需要放置哪些元素。
1.帶有歡迎信息的 Header。 
2.帶有頁腳數(shù)據(jù)的 Footer。
最大的問題是什么？
頁腳和頁眉的數(shù)據(jù)作為 ViewModel 的一部分從控制器傳輸?shù)揭晥D中。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
現(xiàn)在最大的問題便是，當頁眉和頁腳移動到布局頁后，數(shù)據(jù)如何從視圖傳輸?shù)讲季猪摗?/p>
解決方案 — 繼承
在這里我們可以簡單地遵循面向?qū)ο罄^承準則。讓我們通過一個小實驗來理解。
第一步：創(chuàng)建 ViewModel 的基類
在 ViewModel 文件夾下創(chuàng)建一個新的 ViewModel 類，稱為 BaseViewModel 類。
public class BaseViewModel{    public string UserName { get; set; }    public FooterViewModel FooterData { get; set; }//New Property}
正如你所看見的，BaseViewModel 封裝了 Layout 頁所需的所有元素。
第二步：準備 EmployeeListViewModel
從 EmployeeListViewModel 類中移除 UserName 和 FooterData 屬性，然后讓它繼承 BaseViewModel 類。
public class EmployeeListViewModel:BaseViewModel{    public List<EmployeeViewModel> Employees { get; set; }}
第三步：創(chuàng)建布局頁
右擊 Shared 文件夾，選擇 Add -> MVC 5 Layout Page。輸入名稱為 MyLayout，然后點擊確定。
它將會創(chuàng)建一個如下格式的代碼。
  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <metaname="viewport"content="width=device-width"/>
  6.     <title>@ViewBag.Title</title>
  7. </head>
  8. <body>
  9.     <div>
  10.         @RenderBody()
  11.     </div>
  12. </body>
  13. </html>
第四步：轉(zhuǎn)換布局頁為強類型布局
在布局頁的上方放置如下的簡單聲明，使其變?yōu)閺婎愋筒季帧?/p>
@using WebApplication1.ViewModels@model BaseViewModel
第五步：設計布局頁
在布局頁添加頁眉，頁腳和內(nèi)容三部分。
<html><head>    <meta name="viewport" content="width=device-width" />    <title>@RenderSection("TitleSection")</title>    @RenderSection("HeaderSection",false)</head><body>    <div >        Hello, @Model.UserName        <a href="/Authentication/Logout">Logout</a>    </div>    <hr />    <div>    @RenderSection("ContentBody")    </div>    @Html.Partial("Footer",Model.FooterData)</body></html>
正如你所看見的，我們已經(jīng)為布局頁創(chuàng)建了三塊。Title 部分，Header 部分和Content 部分。內(nèi)容頁面將會用到這三部分來定義合適的內(nèi)容。
第六步：向 Index 視圖附上 Layout 頁面
打開 Index.cshtml 頁面，在頂部會發(fā)現(xiàn)如下代碼。
@{    Layout = null;}
將這段代碼改為如下代碼。
@{    Layout = "~/Views/Shared/MyLayout.cshtml";}
第七步：設計 Index 視圖
  1. 從 Index 視圖中移除 Headers 和 Footers。
  2. 復制 Body 標簽中的剩余內(nèi)容，然后將它保存在別處。
  3. 復制 Title 標簽里的內(nèi)容。
  4. 將視圖中的所有 HTML 內(nèi)容都移除。確保你只是移除了 HTML，@model 和布局聲明不需要被移除。
  5. 定義 Title 部分和 Content 部分，內(nèi)容是剛才所復制下的內(nèi)容。
完整的視圖將會如下所示。
  1. @usingWebApplication1.ViewModels
  2. @modelEmployeeListViewModel
  3. @{
  4.     Layout="~/Views/Shared/MyLayout.cshtml";
  5. }
  7. @sectionTitleSection{
  8.     MyView
  9. }
  10. @sectionContentBody{      
  11.     <div>        
  12.         @{
  13.             Html.RenderAction("GetAddNewLink");
  14.         }
  15.         <table border="1">
  16.             <tr>
  17.                 <th>EmployeeName</th>
  18.                 <th>Salary</th>
  19.             </tr>
  20.             @foreach(EmployeeViewModel iteminModel.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. }
正如你所看見的，視圖中所有的元素都定義在指定的位置上。
第八步：執(zhí)行并測試
按下 F5，然后執(zhí)行應用。導航到 Index 行為上。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
第九步：在 CreateEmployee 視圖中附上 Layout 頁面
打開 Index.cshtml 頁面，在頂部會發(fā)現(xiàn)如下代碼。
@{    Layout = null;}
將其改為如下代碼。
@{    Layout = "~/Views/Shared/MyLayout.cshtml";}
第十步：設計 CreateEmployee 視圖
像第七步的步驟一樣，定義 CreateEmployee 視圖的區(qū)域。這一次會增加一點。我們將會定義 Header 部分。
完整的 HTML 代碼如下。
  1. @usingWebApplication1.Models
  2. @modelEmployee
  3. @{
  4.     Layout="~/Views/Shared/MyLayout.cshtml";
  5. }
  7. @sectionTitleSection{
  8.     CreateEmployee
  9. }
  11. @sectionHeaderSection{
  12. <script src="~/Scripts/Validations.js"></script>
  13. <script>
  14.     functionResetForm(){
  15.         document.getElementById('TxtFName').value="";
  16.         document.getElementById('TxtLName').value="";
  17.         document.getElementById('TxtSalary').value="";
  18.     }
  19. </script>
  20. }
  21. @sectionContentBody{
  22.     <div>
  23.         <form action="/Employee/SaveEmployee" method="post" id="EmployeeForm">
  24.             <table>
  25.             <tr>
  26.                 <td>
  27.                     FirstName:
  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.                     LastName:
  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>
  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>
  66.             <tr>
  67.                 <td colspan="2">
  69.                     <input type="submit" name="BtnSubmit" value="Save Employee" onclick="return IsValid();"/>
  70.                     <input type="submit" name="BtnSubmit" value="Cancel"/>
  71.                     <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();"/>
  72.                 </td>
  73.             </tr>
  74.             </table>
  75.     </div>
  76. }
第十一步：執(zhí)行并測試
按下 F5，然后執(zhí)行應用。通過嘗試超鏈接來導航到 AddNew 行為上。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
Index
 視圖是 EmployeeListViewModel 的強類型視圖，EmployeeListViewModel 又是 BaseViewModel
 的子類，所以 Index 視圖可以運轉(zhuǎn)。但是 CreateEmployee 視圖是 CreateEmployeeViewModel 
的強類型視圖，而 CreateEmployeeViewModel 不是 BaseViewModel 的子類，所以 CreateEmployee 
出現(xiàn)了這樣的錯誤。
第十二步：準備 CreateEmployeeViewModel
讓 CreateEmployeeViewModel 繼承 BaseViewModel，代碼如下。
public class CreateEmployeeViewModel:BaseViewModel{...
第十三步：執(zhí)行并測試
再一次測試。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
這次的錯誤看起來與之前的不一樣。錯誤真正的原因是，我們在 AddNew 行為中沒有初始化 Header 和 Footer 的數(shù)據(jù)。
第十四步：初始化 Header 和 Footer 數(shù)據(jù)
將 AddNew 行為方法的代碼改為如下所示。
public ActionResult AddNew(){    CreateEmployeeViewModel employeeListViewModel = new CreateEmployeeViewModel();    employeeListViewModel.FooterData = new FooterViewModel();    employeeListViewModel.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value    employeeListViewModel.FooterData.Year = DateTime.Now.Year.ToString();    employeeListViewModel.UserName = User.Identity.Name; //New Line    return View("CreateEmployee", employeeListViewModel);}
第十五步：在 SaveEmployee 中初始化 Header 和 Footer 數(shù)據(jù)
類似于 SaveEmployee 行為方法一樣，我們更改其代碼如下。
public ActionResult SaveEmployee(Employee e, string BtnSubmit){    switch (BtnSubmit)    {        case "Save Employee":            if (ModelState.IsValid)            {                ...            }            else            {                CreateEmployeeViewModel vm = new CreateEmployeeViewModel();                ...                vm.FooterData = new FooterViewModel();                vm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value                vm.FooterData.Year = DateTime.Now.Year.ToString();                vm.UserName = User.Identity.Name; //New Line                return View("CreateEmployee", vm); // Day 4 Change - Passing e here            }        case "Cancel":            return RedirectToAction("Index");    }    return new EmptyResult();}
第十六步：執(zhí)行并測試
按下 F5，然后執(zhí)行應用。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
Lab 25 的 Q&A
RenderBody 是用于做什么的？
當我們第一次創(chuàng)建 Layout 頁面時，我們有一個 Razor 聲明如下。
@Html.RenderBody()
現(xiàn)在讓我們來理解下它是做什么的。在內(nèi)容頁面上，我們正常地定義區(qū)域，這些區(qū)域在布局頁聲明。
但是奇怪的是，Razor 允許我們在區(qū)域外定義一些內(nèi)容。在內(nèi)容頁面上，所有非區(qū)域內(nèi)的內(nèi)容將會被 RenderBody 函數(shù)呈現(xiàn)。
下圖將會更好地進行解釋。
7 天玩轉(zhuǎn) ASP.NET MVC — 第 5 天
我們有嵌套的布局嗎？
答案是肯定的。我們能創(chuàng)建一個嵌套了其它布局頁的布局頁。語法是一樣的。
在每一個視圖中都指定布局頁是必須的嗎？
你能夠在 Views 文件夾下發(fā)現(xiàn)一個特殊的布局頁，稱為「__ ViewStart.cshtml」。在其內(nèi)部設定定義，將會應用于所有視圖。
例如，在「__ ViewStart.cshtml」中放置如下的代碼，將會使「_Layout.cshtml」適用于所有視圖的布局。
@{    Layout = "~/Views/Shared/_Layout.cshtml";}
在每一個行為方法中，是否都需要放置 Header 和 Footer 的數(shù)據(jù)代碼？
答案是否定的。我們可以運用 Action 過濾器來避免這種重復。我們將會在接下來的實驗中實踐。
在子視圖中定義所有區(qū)域是否是必須的？
答案是肯定的。如果 Section 的聲明為必須的，那么默認值是 True。
@RenderSection("HeaderSection",false) // Not required@RenderSection("HeaderSection",true) // required@RenderSection("HeaderSection") // required
5. Lab 26 — 運用 Action 過濾器讓 Header 和 Footer 數(shù)據(jù)更高效
在 Lab 23 中，我們已經(jīng)知道了 ActionFilter 的優(yōu)勢，現(xiàn)在我們來看它的第二點優(yōu)勢。
第一步：從行為方法中刪除冗余代碼
從 Index，AddNew 和 SaveEmployee 方法中刪除 Header 和 Footer 數(shù)據(jù)的代碼。
Header 代碼如下。
bvm.UserName = HttpContext.Current.User.Identity.Name;
Footer 代碼如下。
bvm.FooterData = new FooterViewModel();bvm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic valuebvm.FooterData.Year = DateTime.Now.Year.ToString();
第二步：創(chuàng)建 HeaderFooterFilter
在 Filters 文件夾下創(chuàng)建一個類，命名為 HeaderFooterFilter，然后通過將它繼承 ActionFilterAttribute 類來將其升級 Action 過濾器。
第三步：升級 ViewModel
在 HeaderFooterFilter 類中重寫 OnActionExecuted。在這個方法中我們將會得到當前的視圖模型，然后將其附上 Header 和 Footer 數(shù)據(jù)。
public class HeaderFooterFilter : ActionFilterAttribute{    public override void OnActionExecuted(ActionExecutedContext filterContext)    {        ViewResult v = filterContext.Result as ViewResult;        if(v!=null) // v will null when v is not a ViewResult        {                BaseViewModel bvm = v.Model as BaseViewModel;                if(bvm!=null)//bvm will be null when we want a view without Header and footer                {                        bvm.UserName = HttpContext.Current.User.Identity.Name;                        bvm.FooterData = new FooterViewModel();                        bvm.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value                        bvm.FooterData.Year = DateTime.Now.Year.ToString();                    &            

                當前文章：7天玩轉(zhuǎn)ASP.NETMVC—第5天
                

                文章鏈接：http://muchs.cn/article44/jpiihe.html
            

            

                成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、關鍵詞優(yōu)化、App設計、面包屑導航、小程序開發(fā)、響應式網(wǎng)站            

            

                廣告
                
            

            

                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)
            

        

        
    


    

        搜索引擎優(yōu)化