ASP.NET MVC添加视图示例

ASP.NET MVC高效构建Web应用- 商品搜索 - 京东

视图（V）是一个动态生成HTML页面的模板，它负责通过用户界面展示内容。本节将修改HelloWorldController类，并使用视图模板文件，以干净地封装生成对客户端的HTML响应的过程。

我们将使用Razor视图引擎创建视图模板文件。基于Razor的视图模板具有.cshtml文件扩展名，并提供一种使用C#创建HTML输出的优雅方法。Razor将编写视图模板时所需的字符数和击键次数降至最低，并支持快速、流畅的编码工作流。目前，我们只需知道，Razor是MVC框架视图引擎，可以用来创建视图模板文件。

3.3.1  新建项目添加视图文件

这里，我们可以复制一份例3.1代码作为本节的实例，然后基于此项目逐渐丰富内容。

【例3.2】将视图添加到MVC项目

（1）复制一份例3.1的项目文件夹test到磁盘另外某个目录，然后进入复制后的test文件夹，双击test.sln打开项目。打开HelloWorldController.cs文件，查看VS向导生成的Index方法，代码如下：

public string Index(){return "This is my <b>default</b> action...";}

当前，Index方法返回硬编码的含HTML的字符串。我们更改一下 Index 方法，代码如下所示：

public ActionResult Index() //方法的类型改为ActionResult{return View(); //返回View方法的结果}

我们使用视图模板生成对浏览器的HTML响应，此时Index方法返回的是ActionResult（或派生自 ActionResult）的类，而不是字符串等基元类型。View方法是控制器类（即类Controller）的一个内部方法，声明如下：

protected internal ViewResult View();

由于HelloWorldController类继承自类Controller，因此可以使用类Controller中的View方法。该方法创建一个ViewResult对象，该对象将视图呈现给响应。

我们知道，MVC中的控制器负责处理HTTP请求并生成响应结果，现在我们返回一个ViewResult对象作为响应结果，说白了，就是给客户端浏览器一个视图。语句return View();告诉方法Index应使用视图文件来呈现对浏览器的响应。但由于未显式指定要使用的视图文件的名称，ASP.NET MVC就默认使用\Views\HelloWorld文件夹中的Index.cshtml视图文件。那么，接下来我们要添加一个Index.cshtml文件。

（2）准备添加视图文件Index.cshtml。在解决方案资源管理器中，右键单击“Views\HelloWorld”文件夹并单击“添加”，然后单击“具有布局的MVC 5视图页(Razor)”，此时出现“指定项名称”窗口，我们在“项名称”文本框中输入Index，如图3-13所示。

图3-13

点击“确定”按钮，出现“选择布局页”对话框，如图3-14所示。

图5‑10

在“选择布局页”对话框中，接受默认_Layout.cshtml，然后单击“确定”，此时将创建\test\Views\HelloWorld\Index.cshtml文件。在上面的对话框中，在左窗格中选择Views\Shared文件夹，如果另一个文件夹中有一个自定义布局文件，则可以选择它。

在VS中双击刚才新增的Index.cshtml，添加代码如下：

@{Layout = "~/Views/Shared/_Layout.cshtml";}@{ ViewBag.Title = "my mvc"; }<h2>hi</h2><p>Hello from our View Template!</p>

粗体部分就是我们添加的。符号@是视图引擎Razor中的一个标记，表示用来插入一段服务器端的编程语言代码，这里是C#语言，也就是插入一段C#代码。VS MVC的视图引擎有两种：ASPX(C#)和Razor(cshtml)，建议以后都使用Razor视图引擎（VS2017中已经默认Razor引擎了）。原来<% %>用于ASPX引擎视图页中，作为插入C#代码的标识，而在Razor中用更简洁的@代替了。这样就可以在cshtml文件中使用C#代码了。所以我们知道，{ ViewBag.Title = "my mvc";}就是一段C#代码，意思是把字符串"my mvc"赋值给ViewBag.Title。ViewBag.Title就相当于一个全局变量，程序运行时，网页标题会取值这个全局变量值，这样ViewBag.Title所存储的字符串就可以显示在网页标题上了。我们可以打开Shared文件夹下的_Layout.cshtml，这个文件称为布局文件，在这个文件里有这么一句：

<title>@ViewBag.Title - 我的ASP.NET应用程序</title>

@ViewBag.Title就是显示全局变量ViewBag.Title中的内容。@不能省略，否则就是直接显示“ViewBag.Title”本身了。

再回到Index.cshtml，最后2行HTML代码没啥好讲的，就是显示在网页上的普通字符串而已。<h2>是HTML中的一个标签，代表heading level 2，用于表示一个二级标题。<p>表示段落标签，是HTML中用于定义段落的基本元素。

现在运行项目，在浏览器中输入URL：https://localhost:44308/HelloWorld/Index，运行结果如图3-15所示。

图3-15

可以看到，“my mvc”显示在浏览器标题栏上，而网页中也正确显示了“hi”和“Hello from our View Template!”两个硬编码的字符串。网页上方的“应用程序名称”“主页”“关于”和“联系方式”是4个网址链接，点击它们可以打开新的网页，这4个链接是布局自动生成的，下面我们来改变一下布局。

3.3.2  更改视图和布局页面

首先，需要更改页面顶部的“应用程序名称”链接。继续在刚才的项目中，转到解决方案资源管理器中的/Views/Shared文件夹，然后双击打开_Layout.cshtml文件。此文件称为布局页，它位于所有其他页面使用的共享文件夹中。

布局模板使你能够在一个位置指定网站的HTML容器布局，然后将它应用到网站中的多个页面。查找@RenderBody()行。RenderBody是一个占位符，在其中显示你创建的所有视图特定的页面，“包装”在布局页面中。例如，如果选择“关于”链接，Views\Home\About.cshtml视图将在方法内RenderBody呈现。

如果我们在布局页文件_Layout.cshtml中修改网页名称或网址链接，那将会在所有网页上发生效果。比如，我们在_Layout.cshtml中，修改<title></title>之间的内容如下：

<title>@ViewBag.Title - Movie App</title>

意思就是修改一下标题。然后再把“ActionLink("应用程序名称",…)”这一行的内容修改如下：

@Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })

意思就是修改一下网址链接的标题。此时运行项目，我们可以看到在标题栏中的页面标题也变为“Home Page - Movie App”了，而且主页上的第一个链接名称变为“MVC Movie”了，如图3-16所示。

这说明修改生效了。再单击“关于”链接，你也会看到该页面显示“MVC Movie”以及标题栏中的标题依旧有“Movie App”这样的字符串，如图3-17所示。

   

这就说明，我们能够在布局页文件_Layout.cshtml中进行更改，并让网站上的所有页面都反映新标题。那为何会所有页面都反映新标题呢？这是因为所有网页的源代码都包含了_Layout.cshtml了。比如，当我们第一次添加Views\HelloWorld\Index.cshtml文件时，它自动包含以下代码：

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

这几行代码就是显式地为Index.cshtml设置布局页_Layout.cshtml。那为何会自动包含这几行代码呢？这是因为在Views\_ViewStart.cshtml文件中指定了。Views\_ViewStart.cshtml文件定义了所有视图将使用的通用布局。如果不想让某个页面使用通用布局，我们可以注释掉或从该页面文件中删除该代码。比如，在Views\HelloWorld\Index.cshtml中注释掉布局引用：

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

其中是@*和*@用于注释。如果不想注释，也可以可以使用Layout属性设置不同的布局视图，或将它设置为null，这样将不会使用任何布局文件。

3.3.3  更改视图标题

了解了布局的来龙去脉。现在，让我们更改Index视图的标题，在项目中双击打开Views/HelloWorld/Index.cshtml，修改ViewBag.Title的赋值，代码如下：

@{ViewBag.Title = "Movie List";}

图3-18

ViewBag是一个可以在控制器和视图之间传递任意类型对象的动态对象，Title是ViewBag中的一个专门存储字符串的属性，除它以外，还有其他属性，以后会慢慢接触到。我们可以通过在控制器中设置ViewBag的属性值，然后在视图中使用ViewBag 来访问这些属性值。例如，在控制器中设置ViewBag.Title = "My Title"，然后在视图中使用@ViewBag.Title 来访问这个属性值，这样就可以将数据从控制器传递到视图中。当然这种使用方式也可以应用在多个cshtml文件中，就像现在，我们在HelloWorld/Index.cshtml中将字符串"Movie List"赋值给ViewBag.Title，那么在Views/Shared/_Layout.cshtml文件中的代码：

<title>@ViewBag.Title - Movie App</title>

就可以引用到ViewBag.Title所存储的最新内容了。使用此方法ViewBag，可以轻松地在视图模板和布局文件之间传递其他参数。我们按Ctrl+F5运行项目，然后在浏览器地址栏中输入URL：https://localhost:44308/HelloWorld/，运行结果如图3-18所示。

可以看到浏览器标题已被更改为“Movie List - Movie App”。如果在浏览器中未看到更改，则可能正在查看缓存的内容，此时可以在浏览器中按 Ctrl+F5强制加载来自服务器的响应。浏览器标题使用的ViewBag.Title是我们在Index.cshtml 视图模板中设置的，并在布局文件_Layout.cshtml中添加附加的“- Movie App”所创建。现在，我们学会了通过Index.cshtml 和_Layout.cshtml来修改浏览器标题了。其实，凭借布局文件可以很容易地对应用程序中所有页面进行更改。

不过，本例显示的数据（即“Hello from our View Template!”消息）是硬编码的。MVC应用程序有一个“V”（视图），而我们已有一个“C”（控制器），但还没有“M”（模型）。以后，我们将学习如何创建数据库并从中检索模型数据，而不是直接硬编码数据。

3.3.4  将数据从控制器传递给视图

在学习数据库并讨论模型之前，让我们先讨论如何将信息从控制器传递到视图。调用控制器类以响应传入的URL 请求，控制器类通过编写代码，用于处理传入浏览器请求、从数据库中检索数据，并最终决定发送回浏览器的响应类型。最后，我们可以从控制器使用视图模板来生成HTML响应并设置浏览器的格式。

控制器负责提供所需的任何数据或对象，以便视图模板向浏览器呈现响应。最佳做法是视图模板绝不应该执行业务逻辑或直接与数据库交互。相反，视图模板应仅处理控制器提供给它的数据。保持这种“关注点分离”有助于保持代码干净、可测试且更易于维护。

我们回顾一下类HelloWorldController中的Welcome方法，目前代码如下：

public string Welcome(string name,float height, int age = 10){return HttpUtility.HtmlEncode("Hello " + name + ", your height:"+height+" and age:"+age);}

可见，参数name、height和age直接输出到浏览器。我们将控制器更改为使用视图模板，而不是让控制器以字符串的形式呈现此响应。视图模板将生成动态响应，这意味着你需要将适当的数据从控制器传递给视图以生成响应。为此，我们可以让控制器将视图模板所需的动态数据（参数）存储在ViewBag，随后视图模板可以访问的对象中ViewBag。

打开HelloWorldController.cs文件，并在Welcome方法中为ViewBag对象添加 name和 height的值。ViewBag是一个动态对象，这意味着可以将任何你想要的对象放入其中。ASP.NET MVC模型绑定系统会自动将命名参数（name和height）从地址栏中的查询字符串映射到方法中的参数。修改后的Welcome方法如下所示：

public ActionResult Welcome(string name,float height, int age = 10){ViewBag.name = "Hello " + name;ViewBag.h = "Height:"+ height.ToString();ViewBag.age = age;return View();}

现在，ViewBag对象包含将自动传递给视图的数据。接下来，需要一个欢迎视图页来展现这些参数数据。语句return View();告诉方法Welcome应使用视图文件来呈现对浏览器的响应，但由于未显式指定要使用的视图文件的名称，ASP.NET MVC就默认使用\Views\HelloWorld文件夹中的Welcome.cshtml视图文件。接下来，我们要添加一个Welcome.cshtml文件。右键单击 Views\HelloWorld文件夹并单击“ 添加”，然后单击“带有布局的MVC 5视图页(Razor)”，在“指定项的名称”对话框中，输入“Welcome”，然后单击“ 确定”。在“选择布局页”对话框中，接受默认_Layout.cshtml，然后单击“确定”。此时，将会在磁盘上创建test\Views\HelloWorld\ Welcome.cshtml文件。下面我们在Welcome.cshtml文件中添加代码如下：

@{ViewBag.Title = "Welcome";}<h2>You are welcome!</h2><ul>@for (int i = 0; i < ViewBag.age; i++){<li>@ViewBag.name,@ViewBag.h</li>}</ul>

首先在页面上显示字符串“You are welcome!”，然后使用一个for循环，该循环中显示的内容由@ViewBag.name和@ViewBag.h决定，并且它们的实际值由用户在URL中指定。运行项目，在浏览器地址栏中输入URL：

https://localhost:44308/helloWorld/welcome?name=tom&height=1.18&age=5

运行结果如图3-19所示。

图3-20

可以看到实际数据从 URL中获取，并使用模型绑定器传递给控制器。控制器将数据打包到对象中，ViewBag并将该对象传递给视图。然后，视图以HTML形式向用户显示数据。在这个实例中，我们使用ViewBag对象将数据从控制器传递到视图。