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

本文参考自：http://www.codeproject.com/Articles/1000435/Learn-MVC-Project-in-days-Day

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

系列文章

七天学会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页面使用和用户角色管理

 七天学会ASP.NET MVC (六)——线程问题、异常处理、自定义URL

七天学会ASP.NET MVC（七）——创建单页应用

目录

实验22——添加页脚

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

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

实验25——使用Action  过滤器让页眉和页脚代码更有效

总结

 

实验22——添加页脚

在本实验中，我们会在Employee 页面添加页脚，通过本实验理解分部视图。

什么是“分部视图”？

从逻辑上看，分部视图是一种可重用的视图，不会直接显示，包含于其他视图中，作为其视图的一部分来显示。用法与用户控件类似，但不需要编写后台代码。

1. 创建分部视图的 ViewModel

右击 ViewModel 文件夹，新建 FooterViewModel 类，如下：

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

2. 创建分部视图

右击“~/Views/Shared”文件夹，选择添加->视图。

输入View 名称”Footer”，选择复选框“Create as a partial view”，点击添加按钮。

注意：View中的Shared 共享文件夹是为每个控制器都可用的文件夹，不是某个特定的控制器所属。

3. 在分部View 中显示数据

打开Footer.cshtml，输入以下HTML 代码。

@using WebApplication1.ViewModels

@model FooterViewModel

<div style="text-align:right;background-color: silver;color: darkcyan;border: 1px solid gray;margin-top:2px;padding-right:10px;">

   @Model.CompanyName © @Model.Year

</div>

4.  在Main ViewModel 中包含Footer 数据

打开 EmployeeListViewModel 类，添加新属性，保存 Footer数据，如下：

public class EmployeeListViewModel
{
    public List<EmployeeViewModel> Employees { get; set; }

    public string UserName { get; set; }

    public FooterViewModel FooterData { get; set; }//New Property
}

在本实验中Footer会作为Index View的一部分显示，因此需要将Footer的数据传到Index View页面中。Index View 是EmployeeListViewModel的强类型View，因此Footer需要的所有数据都应该封装在EmployeeListViewModel中。

5. 设置Footer 数据

打开 EmployeeController ,在Index  action 方法中设置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);
}

6. 显示Footer

打开Index.cshtml 文件，在Table 标签后显示Footer 分部View，如下：

</table>
        @{
            Html.RenderPartial("Footer", Model.FooterData);
        }
    </div>
</body>
</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编码的字符串，不需要二次编码。代码如下：

@{
   string MyString = "My Simple String";
}
@MyString

以上代码会转换为：

Razor显示了全部的内容，许多人会认为已经看到加粗的字符串，是Razor Html在显示内容之前将内容编码，这就是为什么使用纯内容来代替粗体。

当不适用razor编码时，使用 MvcHtmlString，MvcHtmlString是razor的一种表示，即“字符串已经编码完毕，不需要其他编码”。

如：

@{
   string MyString = "My Simple String";
}
@MvcHtmlString.Create(MyString)

输出：

Html.RenderAction 和 Html.Action两者之间有什么不同？更推荐使用哪种方法？

Html.RenderAction会将Action 方法的执行结果直接写入HTTP 响应请求流中，而 Html.Action会返回MVC HTML 字符串。更推荐使用Html.RenderAction，因为它更快。当我们想在显示前修改action执行的结果时，推荐使用Html.Action。

 

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

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

因此我们将实验23分为两部分：

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

１. 创建标识用户身份的枚举类型

右击Model 文件夹，选择添加新项目。选择“Code File”选项。

输入“UserStatus”名，点击添加。

“Code File”选项会创建一个“.cs”文件．

创UserStatus枚举类型，如下：

namespace WebApplication1.Models
{
    public enum UserStatus
    {
        AuthenticatedAdmin,
        AuthentucatedUser,
        NonAuthenticatedUser
    }
}

 2. 修改业务层功能

删除  IsValidUser函数，创建新函数“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;
    }
}

3. 修改DoLogin action方法

打开 AuthenticationController， 修改DoLogin action:

[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 变量来识别用户身份。

什么是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“，如下：

public ActionResult GetAddNewLink()
{
    if (Convert.ToBoolean(Session["IsAdmin"]))
    {
        return Partial View("AddNewLink");
    }
    else
    {
        return new EmptyResult();
    }
}

8.  显示  AddNew 链接

打开 Index.html，输入以下代码：

<a href="/Authentication/Logout">Logout</a>
</div>
<hr />
@{
  Html.RenderAction("GetAddNewLink");
}
<div>
<table border="1">
<tr>

Html.RenderAction 执行Action 方法，并将结果直接写入响应流中。

9. 运行

测试1

测试2

第二部分： 直接URL 安全

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

非管理员用户还是可以直接访问AddNew方法，为了解决这个问题，我们会引入MVC action 过滤器。Action 过滤器使得在action方法中添加一些预处理和后处理的逻辑判断问题。在整个实验中，会注重ActionFilters预处理的支持和后处理的功能。

1. 安装过滤器

新建文件夹Filters，新建类”AdminFilter“。

2. 创建过滤器

通过继承 ActionFilterAttribute ，将 AdminFilter类升级为”ActionFilter“，如下：

public class AdminFilter:ActionFilterAttribute
{

}

注意：使用”ActionFilterAttribute “需要在文件顶部输入”System.Web.Mvc“。

3. 添加安全验证逻辑

在ActionFliter中重写 OnActionExecuting方法：

public override void OnActionExecuting(ActionExecutingContext filterContext)
{
    if (!Convert.ToBoolean(filterContext.HttpContext.Session["IsAdmin"]))
    {
        filterContext.Result = new ContentResult()
        {
            Content="Unauthorized to access specified resource."
        };
    }
}

4. 绑定过滤器

在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();
....
....

5. 运行

关于实验23

可以通过浏览器直接调用GetAddNewLink方法吗？

 可以直接调用，也可直接停止”GetAddNewLink“的运行。

Html.Action有什么作用？

与Html.RenderAction作用相同，Html.Action会执行action 方法，并在View中显示结果。

语法：

@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“，如下：

public class BaseViewModel
{
    public string UserName { get; set; }
    public FooterViewModel FooterData { get; set; }//New Property
}

BaseViewModel可封装布局页所需要的所有值。

2. 准备 EmployeeListViewModel

删除EmployeeListViewModel类的 UserName和 FooterData属性，并继承 BaseViewModel：

public class EmployeeListViewModel:BaseViewModel
{
    public List<EmployeeViewModel> Employees { get; set; }
}

3.  创建布局页面

右击shared文件夹，选择添加>>MVC5 Layout Page。输入名称”MyLayout“，点击确认

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

4. 将布局转换为强类型布局

@using WebApplication1.ViewModels
@model BaseViewModel

5. 设计布局页面

在布局页面添加页眉，页脚和内容，内容，三部分，如下：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@RenderSection("TitleSection")</title>
    @RenderSection("HeaderSection",false)
</head>
<body>
    <div style="text-align:right">
        Hello, @Model.UserName
        <a href="/Authentication/Logout">Logout</a>
    </div>
    <hr />
    <div>
    @RenderSection("ContentBody")
    </div>
    @Html.Partial("Footer",Model.FooterData)
</body>
</html>

如上所示，布局页面包含三部分，TitleSection, HeaderSection 和 ContentBody，内容页面将使用这些部分来定义合适的内容。

6. 在 Index View中绑定布局页面

打开Index.cshtml,在文件顶部会发现以下代码：

@{
    Layout = null;
}

修改：

@{
    Layout = "~/Views/Shared/MyLayout.cshtml";
}

7.设计Index View

• 从Index View中去除页眉和页脚
• 在Body标签中复制保留的内容，并存放在某个地方。
• 复制Title标签中的内容
• 移除View中所有的HTML 内容，确保只移动了HTML，@model 且没有移动layout语句
• 在复制的内容中定义TitleSection和 Contentbody

完整的View代码如下：

@using WebApplication1.ViewModels
@model EmployeeListViewModel
@{
    Layout = "~/Views/Shared/MyLayout.cshtml";
}

@section TitleSection{
    MyView
}
@section ContentBody{
    <div>
        @{
            Html.RenderAction("GetAddNewLink");
        }
        <table border="1">
            <tr>
                <th>Employee Name</th>
                <th>Salary</th>
            </tr>
            @foreach (EmployeeViewModel item in Model.Employees)
            {
                <tr>
                    <td>@item.EmployeeName</td>
                    <td style="background-color:@item.SalaryColor">@item.Salary</td>
                </tr>
            }
        </table>
    </div>
}

 

8. 运行

9. 在 CreateEmployee 中绑定布局页面

打开 Index.cshtml，修改顶部代码：

@{
    Layout = "~/Views/Shared/MyLayout.cshtml";
}

10. 设计 CreateEmployee  View

与第7步中的程序类似，定义 CreateEmployee View中的Section ，在本次定义中只添加一项，如下：

@using WebApplication1.Models
@model Employee
@{
    Layout = "~/Views/Shared/MyLayout.cshtml";
}

@section TitleSection{
    CreateEmployee
}

@section HeaderSection{
<script src="~/Scripts/Validations.js"></script>
<script>
    function ResetForm() {
        document.getElementById('TxtFName').value = "";
        document.getElementById('TxtLName').value = "";
        document.getElementById('TxtSalary').value = "";
    }
</script>
}
@section ContentBody{
    <div>
        <form action="/Employee/SaveEmployee" method="post" id="EmployeeForm">
            <table>
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    @Html.ValidationMessage("FirstName")
                </td>
            </tr>
            <tr>
                <td>
                    Last Name:
                </td>
                <td>
                    <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    @Html.ValidationMessage("LastName")
                </td>
            </tr>

            <tr>
                <td>
                    Salary:
                </td>
                <td>
                    <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    @Html.ValidationMessage("Salary")
                </td>
            </tr>

            <tr>
                <td colspan="2">

                    <input type="submit" name="BtnSubmit" value="Save Employee" onclick="return IsValid();" />
                    <input type="submit" name="BtnSubmit" value="Cancel" />
                    <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
                </td>
            </tr>
            </table>
    </div>
}

11. 运行

Index View是  EmployeeListViewModel类型的强View类型，是 BaseViewModel的子类，这就是为什么Index View可一直发挥作用。CreateEmployee View 是CreateEmployeeViewModel的强类型，并不是BaseViewModel的子类，因此会出现以上错误。

12. 准备 CreateEmployeeViewModel

使CreateEmployeeViewModel 继承 BaseViewModel，如下：

public class CreateEmployeeViewModel:BaseViewModel
{
...

13. 运行

报错，该错误好像与步骤11中的错误完全不同，出现这些错误的根本原因是未初始化AddNew action方法中的Header和Footer数据。

14. 初始化Header和Footer 数据

修改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);
}

15. 初始化 SaveEmployee中的Header和 FooterData

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();
}

16. 运行

关于实验24

RenderBody 有什么作用？

之前创建了Layout 页面，包含一个Razor语句如：

@Html.RenderBody()

首先我们先来了RenderBody是用来做什么的？

在内容页面，通常会定义Section，声明Layout页面。但是奇怪的是，Razor允许定义在Section外部定义一些内容。所有的非section内容会使用RenderBody函数来渲染，下图能够更好的理解：

布局是否可嵌套？

可以嵌套，创建Layout页面，可使用其他存在的Layout页面，语法相同。

是否需要为每个View定义Layout页面？

会在View文件夹下发现特殊的文件“__ViewStart.cshtml”，在其内部的设置会应用所有的View。

例如：在__ViewStart.cshtml中输入以下代码，并给所有View 设置 Layout页面。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

是否在每个Action 方法中需要加入Header和Footer数据代码？

不需要，可在Action 过滤器的帮助下删除重复的代码。

是否强制定义了所有子View中的Section？

是的，如果Section定义为需要的section，默认的值会设置为true。如下

@RenderSection("HeaderSection",false) // Not required
@RenderSection("HeaderSection",true) // required
@RenderSection("HeaderSection") // required

 

实验25——使用Action Fliter让Header和Footer数据更有效

在实验23中，我们已经知道了使用 ActionFilter的一个优点，现在来看看使用 ActionFilter的其他好处

1. 删除Action 方法中的冗余代码

删除Index，AddNew， SaveEmployee方法中的Header和Footer数据代码。

Header代码如：

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

Footer代码如：

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

2.创建HeaderFooter 过滤器

在Filter文件夹下新建类”HeaderFooterFilter“，并通过继承ActionFilterAttribute类升级为Action Filter

3. 升级ViewModel

重写 HeaderFooterFilter类的 OnActionExecuted方法，在该方法中获取当前View Model ，并绑定Header和Footer数据。

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();
                }
        }
    }
}

4. 绑定过滤器

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

[HeaderFooterFilter]
public ActionResult Index()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
...
}
...
[AdminFilter]
[HeaderFooterFilter]
public ActionResult AddNew()
{
    CreateEmployeeViewModel employeeListViewModel = new CreateEmployeeViewModel();
    //employeeListViewModel.FooterData = new FooterViewModel();
    //employeeListViewModel.FooterData.CompanyName = "StepByStepSchools";
...
}
...
[AdminFilter]
[HeaderFooterFilter]
public ActionResult SaveEmployee(Employee e, string BtnSubmit)
{
    switch (BtnSubmit)
    {
        ...

5. 运行

总结

本文主要介绍了ASP.NET MVC中页眉页脚的添加和Layout页面的使用，并实现了用户角色分配及Action Filter的使用，下一节中我们将是最难和最有趣的一篇，请持续关注吧！

在学习了本节Layout页面及用户角色管理之后，你是否也跃跃欲试想要进行MVC开发？不妨试试 ComponentOne Studio ASP.NET MVC 这款轻量级控件，它与Visual Studio无缝集成，完全与MVC6和ASP.NET 5.0兼容，将大幅提高工作效率.

 

相关阅读：

是什么让C＃成为最值得学习的编程语言

从Visual Studio看微软20年技术变迁

C#开发人员应该知道的13件事情

Visual Studio 2017正式版发布全纪录