您的位置：首页 > 编程语言 > ASP

七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

2015-07-07 14:38 274 查看


系列文章

七天学会ASP.NETMVC(一)——深入理解ASP.NETMVC七天学会ASP.NETMVC(二)——ASP.NETMVC数据传递七天学会ASP.NETMVC(三)——ASP.NetMVC数据处理七天学会ASP.NETMVC(四)——用户授权认证问题七天学会ASP.NETMVC(五)——Layout页面使用和用户角色管理
目录实验22——添加页脚实验23——实现用户角色管理实验24——实现项目外观一致性实验25——使用Action过滤器让页眉和页脚代码更有效总结

实验22——添加页脚

在本实验中，我们会在Employee页面添加页脚，通过本实验理解分部视图。什么是“分部视图”？从逻辑上看，分部视图是一种可重用的视图，不会直接显示，包含于其他视图中，作为其视图的一部分来显示。用法与用户控件类似，但不需要编写后台代码。1.创建分部视图的ViewModel右击ViewModel文件夹，新建FooterViewModel类，如下：
1:publicclassFooterViewModel
2:{
3:publicstringCompanyName{get;set;}
4:publicstringYear{get;set;}
5:}
2.创建分部视图右击“~/Views/Shared”文件夹，选择添加->视图。

输入View名称”Footer”，选择复选框“Createasapartialview”，点击添加按钮。注意：View中的Shared共享文件夹是为每个控制器都可用的文件夹，不是某个特定的控制器所属。3.在分部View中显示数据打开Footer.cshtml，输入以下HTML代码。
1:@usingWebApplication1.ViewModels
2:
3:@modelFooterViewModel
4:
5:<divstyle="text-align:right;background-color:silver;color:darkcyan;border:1pxsolidgray;margin-top:2px;padding-right:10px;">
6:
7:@Model.CompanyName©@Model.Year
8:
9:</div>
4.在MainViewModel中包含Footer数据打开EmployeeListViewModel类，添加新属性，保存Footer数据，如下：
1:publicclassEmployeeListViewModel
2:{
3:publicList<EmployeeViewModel>Employees{get;set;}
4:
5:publicstringUserName{get;set;}
6:
7:publicFooterViewModelFooterData{get;set;}//NewProperty
8:}
在本实验中Footer会作为IndexView的一部分显示，因此需要将Footer的数据传到IndexView页面中。IndexView是EmployeeListViewModel的强类型View，因此Footer需要的所有数据都应该封装在EmployeeListViewModel中。5.设置Footer数据打开EmployeeController,在Indexaction方法中设置FooterData属性值，如下：
1:publicActionResultIndex()
2:{
3:...
4:...
5:employeeListViewModel.FooterData=newFooterViewModel();
6:employeeListViewModel.FooterData.CompanyName="StepByStepSchools";//Canbesettodynamicvalue
7:employeeListViewModel.FooterData.Year=DateTime.Now.Year.ToString();
8:returnView("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.运行，打开IndexView

关于实验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:stringMyString="MySimpleString";
3:}
4:@MyString
以上代码会转换为：

Razor显示了全部的内容，许多人会认为已经看到加粗的字符串，是RazorHtml在显示内容之前将内容编码，这就是为什么使用纯内容来代替粗体。当不适用razor编码时，使用MvcHtmlString，MvcHtmlString是razor的一种表示，即“字符串已经编码完毕，不需要其他编码”。如：
1:@{
2:stringMyString="MySimpleString";
3:}
4:@MvcHtmlString.Create(MyString)

输出：


Html.RenderAction和Html.Action两者之间有什么不同？更推荐使用哪种方法？Html.RenderAction会将Action方法的执行结果直接写入HTTP响应请求流中，而Html.Action会返回MVCHTMLString。更推荐使用Html.RenderAction，因为它更快。当我们想在显示前修改action执行的结果时，推荐使用Html.Action。

实验23——实现用户角色管理

在实验23中我们将实现管理员和非管理员登录的功能。需求很简单：非管理员用户没有创建新Employee的权限。实验23会帮助大家理解MVC提供的Session和Actioｎ过滤器。因此我们将实验２3分为两部分：

第一部分：非管理员用户登录时，隐藏ＡｄｄＮｅｗ链接

１.创建标识用户身份的枚举类型右击Model文件夹，选择添加新项目。选择“CodeFile”选项。

输入“UserStatus”名，点击添加。“CodeFile”选项会创建一个“．ｃｓ”文件．创建ＵｓｅｒＳｔａｔｕｓ枚举类型，如下：
1:namespaceWebApplication1.Models
2:{
3:publicenumUserStatus
4:{
5:AuthenticatedAdmin,
6:AuthentucatedUser,
7:NonAuthenticatedUser
8:}
9:}
2.修改业务层功能删除IsValidUser函数，创建新函数“GetUserValidity“，如下：
1:publicUserStatusGetUserValidity(UserDetailsu)
2:{
3:if(u.UserName=="Admin"&&u.Password=="Admin")
4:{
5:returnUserStatus.AuthenticatedAdmin;
6:}
7:elseif(u.UserName=="Sukesh"&&u.Password=="Sukesh")
8:{
9:returnUserStatus.AuthentucatedUser;
10:}
11:else
12:{
13:returnUserStatus.NonAuthenticatedUser;
14:}
15:}
3.修改DoLoginaction方法打开AuthenticationController，修改DoLoginaction:
1:[HttpPost]
2:publicActionResultDoLogin(UserDetailsu)
3:{
4:if(ModelState.IsValid)
5:{
6:EmployeeBusinessLayerbal=newEmployeeBusinessLayer();
7://NewCodeStart
8:UserStatusstatus=bal.GetUserValidity(u);
9:boolIsAdmin=false;
10:if(status==UserStatus.AuthenticatedAdmin)
11:{
12:IsAdmin=true;
13:}
14:elseif(status==UserStatus.AuthentucatedUser)
15:{
16:IsAdmin=false;
17:}
18:else
19:{
20:ModelState.AddModelError("CredentialError","InvalidUsernameorPassword");
21:returnView("Login");
22:}
23:FormsAuthentication.SetAuthCookie(u.UserName,false);
24:Session["IsAdmin"]=IsAdmin;
25:returnRedirectToAction("Index","Employee");
26://NewCodeEnd
27:}
28:else
29:{
30:returnView("Login");
31:}
32:}
在上述代码中，已经出现Session变量来识别用户身份。什么是Session？Session是Asp.Net的特性之一，可以在MVC中重用，可用于暂存用户相关数据，session变量周期是穿插于整个用户生命周期的。4.移除存在的AddNew链接打开“~/Views/Employee”文件夹下Index.cshtmlView，移除”AddNew“超链接。
<!--RemovefollowinglinefromIndex.cshtml-->

<ahref="/Employee/AddNew">AddNew</a>
5.创建分部View右击“~/Views/Employee”文件夹，选择添加View,设置View名称”“AddNewLink”“，选中”CreateapartialView“复选框。

6.输入分部View的内容在新创建的分部视图中输入以下内容：
<ahref="/Employee/AddNew">AddNew</a>
7.新建Action方法打开EmployeeController，新建Action方法”GetAddNewLink“，如下：
1:publicActionResultGetAddNewLink()
2:{
3:if(Convert.ToBoolean(Session["IsAdmin"]))
4:{
5:returnPartialView("AddNewLink");
6:}
7:else
8:{
9:returnnewEmptyResult();
10:}
11:}
8.显示AddNew链接打开Index.html，输入以下代码：
1:<ahref="/Authentication/Logout">Logout</a>
2:</div>
3:<hr/>
4:@{
5:Html.RenderAction("GetAddNewLink");
6:}
7:<div>
8:<tableborder="1">
9:<tr>
Html.RenderAction执行Action方法，并将结果直接写入响应流中。9.运行测试1

测试2

第二部分：直接URL安全

以上实验实现了非管理员用户无法导航到AddNew链接。这样还不够，如果非管理员用户直接输入AddNewURL，则会直接跳转到此页面。

非管理员用户还是可以直接访问AddNew方法，为了解决这个问题，我们会引入MVCaction过滤器。Action过滤器使得在action方法中添加一些预处理和后处理的逻辑判断问题。在整个实验中，会注重ActionFilters预处理的支持和后处理的功能。1.安装过滤器新建文件夹Filters，新建类”AdminFilter“。

2.创建过滤器通过继承ActionFilterAttribute，将AdminFilter类升级为”ActionFilter“，如下：
1:publicclassAdminFilter:ActionFilterAttribute
2:{
3:
4:}
注意：使用”ActionFilterAttribute“需要在文件顶部输入”System.Web.Mvc“。3.添加安全验证逻辑在ActionFliter中重写OnActionExecuting方法：
1:publicoverridevoidOnActionExecuting(ActionExecutingContextfilterContext)
2:{
3:if(!Convert.ToBoolean(filterContext.HttpContext.Session["IsAdmin"]))
4:{
5:filterContext.Result=newContentResult()
6:{
7:Content="Unauthorizedtoaccessspecifiedresource."
8:};
9:}
10:}
4.绑定过滤器在AddNew和SaveEmployee方法中绑定过滤器，如下：
1:[AdminFilter]
2:publicActionResultAddNew()
3:{
4:returnView("CreateEmployee",newEmployee());
5:}
6:...
7:...
8:[AdminFilter]
9:publicActionResultSaveEmployee(Employeee,stringBtnSubmit)
10:{
11:switch(BtnSubmit)
12:{
13:case"SaveEmployee":
14:if(ModelState.IsValid)
15:{
16:EmployeeBusinessLayerempBal=newEmployeeBusinessLayer();
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.NETMVC过滤器中的一种，允许在action方法中添加预处理和后处理逻辑。

实验24——实现项目外观的一致性

在ASP.NET能够保证外观一致性的是母版页的使用。MVC却不同于ASP.NET,在RAZOR中，母版页称为布局页面。在开始实验之前，首先来了解布局页面1.带有欢迎消息的页眉2.带有数据的页脚最大的问题是什么？带有数据的页脚和页眉作为ViewModel的一部分传从Controller传给View。

现在最大的问题是在页眉和页脚移动到布局页面后，如何将数据从View传给Layout页面。解决方案——继承可使用继承原则，通过实验来深入理解。1.创建ViewModel基类在ViewModel文件夹下新建ViewModel类”BaseViewModel“，如下：
1:publicclassBaseViewModel
2:{
3:publicstringUserName{get;set;}
4:publicFooterViewModelFooterData{get;set;}//NewProperty
5:}
BaseViewModel可封装布局页所需要的所有值。2.准备EmployeeListViewModel删除EmployeeListViewModel类的UserName和FooterData属性，并继承BaseViewModel：
1:publicclassEmployeeListViewModel:BaseViewModel
2:{
3:publicList<EmployeeViewModel>Employees{get;set;}
4:}
3.创建布局页面右击shared文件夹，选择添加>>MVC5LayoutPage。输入名称”MyLayout“，点击确认
1:<!DOCTYPEhtml>
2:
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>
4.将布局转换为强类型布局
1:@usingWebApplication1.ViewModels
2:@modelBaseViewModel
5.设计布局页面在布局页面添加页眉，页脚和内容，内容，三部分，如下：
1:<html>
2:<head>
3:<metaname="viewport"content="width=device-width"/>
4:<title>@RenderSection("TitleSection")</title>
5:@RenderSection("HeaderSection",false)
6:</head>
7:<body>
8:<divstyle="text-align:right">
9:Hello,@Model.UserName
10:<ahref="/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.在IndexView中绑定布局页面打开Index.cshtml,在文件顶部会发现以下代码：
1:@{
2:Layout=null;
3:}
修改：
1:@{
2:Layout="~/Views/Shared/MyLayout.cshtml";
3:}
7.设计IndexView从IndexView中去除页眉和页脚
在Body标签中复制保留的内容，并存放在某个地方。
复制Title标签中的内容
移除View中所有的HTML内容，确保只移动了HTML，@model且没有移动layout语句
在复制的内容中定义TitleSection和Contentbody
完整的View代码如下：
1:@usingWebApplication1.ViewModels
2:@modelEmployeeListViewModel
3:@{
4:Layout="~/Views/Shared/MyLayout.cshtml";
5:}
6:
7:@sectionTitleSection{
8:MyView
9:}
10:@sectionContentBody{
11:<div>
12:@{
13:Html.RenderAction("GetAddNewLink");
14:}
15:<tableborder="1">
16:<tr>
17:<th>EmployeeName</th>
18:<th>Salary</th>
19:</tr>
20:@foreach(EmployeeViewModeliteminModel.Employees)
21:{
22:<tr>
23:<td>@item.EmployeeName</td>
24:<tdstyle="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.设计CreateEmployeeView与第7步中的程序类似，定义CreateEmployeeView中的Section，在本次定义中只添加一项，如下：
1:@usingWebApplication1.Models
2:@modelEmployee
3:@{
4:Layout="~/Views/Shared/MyLayout.cshtml";
5:}
6:
7:@sectionTitleSection{
8:CreateEmployee
9:}
10:
11:@sectionHeaderSection{
12:<scriptsrc="~/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:<formaction="/Employee/SaveEmployee"method="post"id="EmployeeForm">
24:<table>
25:<tr>
26:<td>
27:FirstName:
28:</td>
29:<td>
30:<inputtype="text"id="TxtFName"name="FirstName"value="@Model.FirstName"/>
31:</td>
32:</tr>
33:<tr>
34:<tdcolspan="2"align="right">
35:@Html.ValidationMessage("FirstName")
36:</td>
37:</tr>
38:<tr>
39:<td>
40:LastName:
41:</td>
42:<td>
43:<inputtype="text"id="TxtLName"name="LastName"value="@Model.LastName"/>
44:</td>
45:</tr>
46:<tr>
47:<tdcolspan="2"align="right">
48:@Html.ValidationMessage("LastName")
49:</td>
50:</tr>
51:
52:<tr>
53:<td>
54:Salary:
55:</td>
56:<td>
57:<inputtype="text"id="TxtSalary"name="Salary"value="@Model.Salary"/>
58:</td>
59:</tr>
60:<tr>
61:<tdcolspan="2"align="right">
62:@Html.ValidationMessage("Salary")
63:</td>
64:</tr>
65:
66:<tr>
67:<tdcolspan="2">
68:
69:<inputtype="submit"name="BtnSubmit"value="SaveEmployee"onclick="returnIsValid();"/>
70:<inputtype="submit"name="BtnSubmit"value="Cancel"/>
71:<inputtype="button"name="BtnReset"value="Reset"onclick="ResetForm();"/>
72:</td>
73:</tr>
74:</table>
75:</div>
76:}
11.运行

IndexView是EmployeeListViewModel类型的强View类型，是BaseViewModel的子类，这就是为什么IndexView可一直发挥作用。CreateEmployeeView是CreateEmployeeViewModel的强类型，并不是BaseViewModel的子类，因此会出现以上错误。12.准备CreateEmployeeViewModel使CreateEmployeeViewModel继承BaseViewModel，如下：
1:publicclassCreateEmployeeViewModel:BaseViewModel
2:{
3:...
13.运行

报错，该错误好像与步骤11中的错误完全不同，出现这些错误的根本原因是未初始化AddNewaction方法中的Header和Footer数据。14.初始化Header和Footer数据修改AddNew方法：
1:publicActionResultAddNew()
2:{
3:CreateEmployeeViewModelemployeeListViewModel=newCreateEmployeeViewModel();
4:employeeListViewModel.FooterData=newFooterViewModel();
5:employeeListViewModel.FooterData.CompanyName="StepByStepSchools";//Canbesettodynamicvalue
6:employeeListViewModel.FooterData.Year=DateTime.Now.Year.ToString();
7:employeeListViewModel.UserName=User.Identity.Name;//NewLine
8:returnView("CreateEmployee",employeeListViewModel);
9:}
15.初始化SaveEmployee中的Header和FooterData
1:publicActionResultSaveEmployee(Employeee,stringBtnSubmit)
2:{
3:switch(BtnSubmit)
4:{
5:case"SaveEmployee":
6:if(ModelState.IsValid)
7:{
8:...
9:}
10:else
11:{
12:CreateEmployeeViewModelvm=newCreateEmployeeViewModel();
13:...
14:vm.FooterData=newFooterViewModel();
15:vm.FooterData.CompanyName="StepByStepSchools";//Canbesettodynamicvalue
16:vm.FooterData.Year=DateTime.Now.Year.ToString();
17:vm.UserName=User.Identity.Name;//NewLine
18:returnView("CreateEmployee",vm);//Day4Change-Passingehere
19:}
20:case"Cancel":
21:returnRedirectToAction("Index");
22:}
23:returnnewEmptyResult();
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)//Notrequired
2:@RenderSection("HeaderSection",true)//required
3:@RenderSection("HeaderSection")//required
实验25——使用ActionFliter让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=newFooterViewModel();
2:bvm.FooterData.CompanyName="StepByStepSchools";//Canbesettodynamicvalue
3:bvm.FooterData.Year=DateTime.Now.Year.ToString();
2.创建HeaderFooter过滤器在Filter文件夹下新建类”HeaderFooterFilter“，并通过继承ActionFilterAttribute类升级为ActionFilter3.升级ViewModel重写HeaderFooterFilter类的OnActionExecuted方法，在该方法中获取当前ViewModel，并绑定Header和Footer数据。
1:publicclassHeaderFooterFilter:ActionFilterAttribute
2:{
3:publicoverridevoidOnActionExecuted(ActionExecutedContextfilterContext)
4:{
5:ViewResultv=filterContext.ResultasViewResult;
6:if(v!=null)//vwillnullwhenvisnotaViewResult
7:{
8:BaseViewModelbvm=v.ModelasBaseViewModel;
9:if(bvm!=null)//bvmwillbenullwhenwewantaviewwithoutHeaderandfooter
10:{
11:bvm.UserName=HttpContext.Current.User.Identity.Name;
12:bvm.FooterData=newFooterViewModel();
13:bvm.FooterData.CompanyName="StepByStepSchools";//Canbesettodynamicvalue
14:bvm.FooterData.Year=DateTime.Now.Year.ToString();
15:}
16:}
17:}
18:}
4.绑定过滤器在Index中，AddNew，SaveEmployee的action方法中绑定HeaderFooterFilter
1:[HeaderFooterFilter]
2:publicActionResultIndex()
3:{
4:EmployeeListViewModelemployeeListViewModel=newEmployeeListViewModel();
5:...
6:}
7:...
8:[AdminFilter]
9:[HeaderFooterFilter]
10:publicActionResultAddNew()
11:{
12:CreateEmployeeViewModelemployeeListViewModel=newCreateEmployeeViewModel();
13://employeeListViewModel.FooterData=newFooterViewModel();
14://employeeListViewModel.FooterData.CompanyName="StepByStepSchools";
15:...
16:}
17:...
18:[AdminFilter]
19:[HeaderFooterFilter]
20:publicActionResultSaveEmployee(Employeee,stringBtnSubmit)
21:{
22:switch(BtnSubmit)
23:{
24:...
5.运行

总结
本文主要介绍了ASP.NETMVC中页眉页脚的添加和Layout页面的使用，并实现了用户角色分配及ActionFilter的使用，下一节中我们将是最难和最有趣的一篇，请持续关注吧！原文链接：http://www.codeproject.com/Articles/1000435/Learn-MVC-Project-in-days-Day
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航