7 天玩转 asp.net MVC — 第 2 天

0. 前言

我相信在开始第 2 天的学习时，你已经顺利地完成了第 1 天的课程。

我们回顾一下第 1 天的主要关注点：

• 为什么选择 ASP.NET MVC ？

• ASP.NET Webforms 和 ASP.NET MVC 的对比

• 理解 ASP.NET MVC 的 Controller 以及 Views

提醒：如果你还没有完成第 1 天的学习，最好先确保完成它。我们的目标是在最后一天用最佳实践和最新技术方法来创建一个小的 MVC 项目。每一天的 Lab 训练中，我们都会比之前一天增加一些实用性的功能，这样看起来会比之前的程序更趋于完美。

1. Controller 向 View 传输数据

在 Lab 2 中，View 的创建都是偏于静态的。然而在真实的场景中，View 展示的通常是一些动态数据。在下一个 Lab 中，我们将展示 View 中如何动态展示数据。

View 将从 Controller 中获取以 Model 格式展示的数据。

Model

在 ASP.NET MVC 中，Model 展示的是业务数据。

Lab 3 - 使用 ViewData

ViewData 是一个字典，它存储了 Controller 传输给 View 的数据。Controller 将向 ViewData 字典添加条目，然后 View 从这个字典里读取。现在我们开始做一个 Demo 吧。

第一步：创建一个 Model 类

在 Model 文件夹下创建一个新的类，命名为 Employee。

public class Employee{    public string FirstName { get; set; }    public string LastName { get; set; }    public int Salary { get; set; }}

第二步：从 Controller 中获取 Model

在 GetView 方法中创建一个 Employee 对象。

Employee emp = new Employee();emp.FirstName = "Sukesh";emp.LastName="Marla";emp.Salary = 20000;

注意：确保在类中使用 Using 语句将 Model 引入，否则就要在编写程序时使用 Employee 类的全名。

using Webapplication1.Models;

第三步：创建 ViewData 并返回 View

在 ViewData 中存储 Employee 对象。

ViewData["Employee"] = emp;return View("MyView");

第四步：在 View 中展示 Employee 数据

打开文件 MyView.cshtml。从 ViewData 中检索 Employee 数据并展示。

<div>    @{        WebApplication1.Models.Employee emp =      (WebApplication1.Models.Employee)ViewData["Employee"];    }    <b>Employee Details </b><br/>    Employee Name : @[email protected] <br/>    Employee Salary: @emp.Salary.ToString("C")</div>

第五步：测试输出

按下 F5，测试应用。

Lab 3 的 Q&A

写 Razor 代码的过程中，使用花括号「『{』和『}』」和不使用花括号，有什么区别？

在 lab 3 中，@emp.FirstName 可以使用以下代码替换。

@{    Response.Write(emp.FirstName);}

如果在 @ 后没有使用花括号，那么它仅仅是为了展示变量或者表达式的值。

为什么需要强制转换？

ViewData 内部承载了一些对象。每一次增加一个新值，就会把它转换为 Object 类型。

所以每一次都需要强制转换来获取对象的值。

「@emp.FirstName @emp.LastName」的含义是什么？

这个意味着 LastName 展示在 FirstName 之后，并通过空格隔开。

如果只想使用一个 @ 关键字，能做到刚才的效果吗？

答案是肯定的。通过语法 @(emp.FirstName+””+emp.LastName)。

为什么在 Controller 类中要硬编码 Employee 类？

这仅仅是为了展示 demo。实际上，我们将会在数据库，WCF ，Web Service 或者其它地方获取数据。

什么是数据库逻辑，数据访问层以及业务层？

• 数据访问层在 ASP.NET MVC 中是一个未显示的层。实际上，它一直存在，但是在 MVC 的定义中从来没包含过它。

• 业务层像之前所解释的，它是 Model 的一部分。

完整的 MVC 结构。

Lab 4 - 使用 ViewBag

ViewBag 就像是 ViewData 的语法蜜糖。ViewBag 运用 C# 4.0 的动态特征，使得 ViewData 动态化。

ViewBag 内部运用 ViewData。

第一步：创建 View Bag

继续 Lab 3，然后用如下代码片段替换 Lab 3 中的第三步：

ViewBag.Employee = emp;

第二步：在 View 中展示 EmployeeData

用如下的代码片段替换 Lab3 中的第四步：

@{     WebApplication1.Models.Employee emp =          (WebApplication1.Models.Employee)ViewBag.Employee;}Employee DetailsEmployee Name: @emp.FirstName @emp.LastName Employee Salary: @emp.Salary.ToString("C")

第三步：测试并输出

按下 F5 并测试应用程序。

Lab 4 的 Q&A

我们是否可以传输 ViewData，然后以 ViewBag 的形式获取到？

答案是肯定的。反过来也是可以的。就像我之前所提到过的，ViewBag 仅仅是 ViewData 的语法蜜糖。

ViewData 和 ViewBag 的问题

ViewData 和 ViewBag 是 Controller 与 View 之间传输数据的很好选择方式。但是在实际的项目应用中，它们之中的任何一个都不是最佳的实践方式。现在我们来讨论一下运用 ViewData 和 ViewBag 的缺点吧。

性能问题

ViewData 中的数据类型是 Object。所以我们在使用之前需要进行正确的类型转换。这个操作为性能带来了额外的负担。

没有类型安全，也没有编译时的错误。

如果我们尝试将类型转换为错误的类型，或者我们在检索对象值的时候使用错误的 Key 值，我们将会在运行时出错。但是对于一个好的编程实践而言，错误应该在编译的时候就被捕获到。

在数据传输和数据接收之间没有正确的连接

作为一个开发者，我个人认为这是一个很主要的问题。

在 MVC 中， Controller 和 View 彼此之间的连接是弱连接，松散的。

Controller 完全不会关心 View 之中发生了什么，同理，View 也完全不会关心 Controller 之中发生了什么。

从 Controller 中我们可以传输一个或者多个 ViewData 或者 ViewBag 值。现在，当一个开发者要写一个 View 时，他需要记住 Controller 将要传输什么。如果一个 Controller 开发者与 View 开发者不是同一个人，那么情况将会变得更困难。因为是完全的不关心，所以这将导致开发过程的低效率，也有可能引起运行错误。

Lab 5 - 理解强类型 Views

刚才上述关于 ViewData 和 ViewBag 的三点问题可以归结于是由数据类型所引起的。ViewData 中存储的数据类型是 「Object」。

如果以某种方式，我们能够为传输在 Controller 和 View 中的数据设置数据类型，那么问题将会迎刃而解，而这种方式便是强类型 Views。

现在让我们做一个 Demo。这次我们将会提升 View 的需求到下一个级别层次。如果薪水大于 15000，那么那么就展示为黄颜色，否则为绿颜色。

第一步：创建强类型的 View

在 View 的顶部加上如下代码：

@model WebApplication1.Models.Employee

基于这条语句，使得我们的 View 成为一个类型为 Employee 的强类型视图。

第二步：展示数据

现在，在 View 中，仅仅使用 @Model 和 Dot(.) 操作就可以智能获取 Model，即 Empolyee 的所有数据值。

写下如下代码来展示数据：

Employee DetailsEmployee Name : @Model.FirstName @Model.LastName @if(Model.Salary>15000){    <span style="background-color:yellow">    Employee Salary: @Model.Salary.ToString("C")    </span>}else{               <span style="background-color:green">    Employee Salary: @Model.Salary.ToString("C")        </span>}

第三步：从 Controller 的 Action 方法传输 Model 数据

更改 Action 方法为如下代码片段：

Employee emp = new Employee();emp.FirstName = "Sukesh";emp.LastName="Marla";emp.Salary = 20000;           return View("MyView",emp);

第四步：测试并输出

Lab 5 的 Q&A

每次在 View 中的类型声明都需要使用类的全称吗，即 Namespace.ClassName ？

答案是否定的。我们可以运用 「using」声明。

@using WebApplication1.Models@model Employee

我们必须总是使用强类型视图吗，还是我们可以偶尔使用一下 ViewData 或者 ViewBag ？

如果想实践最佳方式，最好使用强类型视图。

我们可以为强类型视图的 View 使用多个 Model 类型吗 ？

答案是否定的。在实际项目中，当我们想要在一个视图中展示多个 Model 时，我们经常会结束在这点上。这一需求的解决方案将在下一节中讨论。

2. 理解 ASP.NET MVC 中的 View Model

在 Lab 5 中我们已经违反了 MVC 的准则。根据 MVC， V 代表的是纯粹的 UI。它应该不包含任何的逻辑。我们已经通过如下的三点违反了 MVC 的结构规则：

• 附加了 First Name 和 Last Name，并且用它们展示了全名。这属于逻辑操作。

• 以货币形式展示了 Salary。这属于逻辑操作。

• 展示了不同工资的不同颜色。这些基于不同值的简单的操作改变了 HTML 元素的外观。这属于逻辑操作。

除了以上三点，这里还有一个更值得讨论的问题点。

这一种情形是，我们想要在 View 中展示不同类型的数据。比如：显示当前登录的用户名称和雇员数据。

我们可以使用如下两种方式实现这个问题：

1. 向 Employee 类增加一个 UserName 属性。每一次我们想要在视图中展示一个新数据，我们就像 Employee 类中增加一个属性。这似乎是不合理的，这个属性也许和 Employee 没有关联。这也违反了 SOLID 的 SRP 准则。

2. 运用 ViewBag 或者 ViewData。这个方法我们已经在刚才讨论了其弊端。

ViewModel 解决方案

ViewModel 是 ASP.NET MVC 应用中没有声明出的层。它适合于 Model 和 View 之间并且为 View 作为一个数据容器。

Model 和 ViewModel 的区别是什么？

Model 特指业务数据。它基于业务和数据结构创建。ViewModel 特指 View 数据。它基于视图 View 创建。

ViewModel是如何工作的？

工作原理非常简单。

• Controller 处理用户的交互逻辑，或者简单来说，处理用户请求。

• Controller 获得一个或多个 Model 数据。

• Controller 将决定哪个 View 为请求作出正确回应。

• Controller 将会根据视图的需求从接收的 Model 数据中创建并初始化 ViewModel 对象。

• Controller 将会以 ViewData/ViewBag/强类型 View 的方式传输 ViewModel 数据给 View。

• Controller 将会返回 View。

View 和 ViewModel 将如何关联？

View 将会是一个以 ViewModel 为强类型的视图。

Model 和 ViewModel 将如何关联？

Model 和 ViewModel 彼此之间应该是独立的。Controller 将会基于一个或多个 Model 对象来创建并初始化 ViewModel 对象。

让我们做一个小的 Lab 来更好地理解它吧。

3. Lab 6 - 实现 View Model

第一步：创建一个文件夹

在项目中命名一个文件夹，命名为 ViewModels。

第二步：创建 EmployeeViewModel

为了做这一步，我们先来理清一下 View 的所有需求。

1. First Name 和 LastName 需要合并展示，所以在展示前它们应该是合并的。

2. 使用货币形式来显示 Amount。

3. 不同的 Salary 展示出不同的颜色。

4. 当前的 User Name 也要展示在视图中。

在 ViewModels 文件夹下创建一个 EmployeeViewModel 类，如下所示：

public class EmployeeViewModel{