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

系列文章

七天学会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 类，例如以下：

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会返回MVCHTMLString。更推荐使用Html.RenderAction，由于它更快。当我们想在显示前改动action执行的结果时，推荐使用Html.Action。

 

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

在实验23中我们将实现管理员和非管理员登录的功能。

需求非常easy：非管理员用户没有创建新Employee的权限。

实验23会帮助大家理解MVC提供的Session 和Actioｎ过滤器。

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

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

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

右击Model 目录。选择加入新项目。选择“Code File”选项。

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

“Code File”选项会创建一个“．ｃｓ”文件．

创建ＵｓｅｒＳｔａｔｕｓ枚举类型。例如以下：

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的使用，下一节中我们将是最难和最有趣的一篇。请持续关注吧。

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