原文:【译】ASP.NET MVC 5 教程 - 3：添加视图

在本节内容中，我们将修改HelloWorldController类，使用视图模板来干净利索的封装生成HTML响应客户端的过程。

您将创建一个使用Razor 视图引擎的视图模板文件。.cshtml扩展名的文件都是基于 razor 视图模板文件，Razor 视图引擎将编写视图模板所需的代码降至最低。

目前的 Index 方法返回一条消息，是在控制器类中直接写入的字符串。更改 Index 方法使其返回一个View对象，如以下代码所示：

 public ActionResult Index()

 {

     return View();

 }

上面的Index方法使用一个视图模板来生成浏览器所需的 HTML 代码。控制器方法 （也称为操作方法），如上述，Index方法通常返回的 ActionResult（或从 ActionResult 派生的类），但他不像是基元类型的字符串。

首先，对 HelloWorld 控制器创建一个视图文件夹。右键单击“View”，单击添加，然后单击新建文件夹。

右键单击HelloWorld文件夹并单击添加，然后单击支架。

添加支架对话框中，单击5 视图 MVC-空无模型。然后单击添加。

在添加视图对话框中，命名视图Index和保留的其他设置的默认值，然后单击添加。

创建的MvcMovie\Views\HelloWorld\Index.cshtml文件。

下面显示所创建的 Index.cshtml 文件：

添加下面的 html 代码<h2>标记下。

<p>Hello from our View Template!</p>

下面是一个完整的MvcMovie\Views\HelloWorld\Index.cshtml文件。

 @{

     ViewBag.Title = "Index";

 }

 <h2>Index</h2>

 <p>Hello from our View Template!</p>

右键单击Index.cshtml文件，然后选择 View in Page Inspector.

请参见教程页面检查器的详细信息。

另外，运行程序，浏览到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。控制器中的Index方法并没有做太多工作，它只是简单的运行了语句 return View()，指定Index方法应该使用一个视图模板文件呈现到浏览器的响应。因为你没有明确指定要使用的视图模板文件的名称，ASP.NET MVC 默认使用\Views\HelloWorld 文件夹下的Index.cshtml文件。下面图片中显示的“Hello from our View Template!”硬编码在视图中。

看起来还不错。但是，注意浏览器标题栏显示的“Index - My ASP.NET Ap”和在页面顶部的大个儿的“Application name”链接。根据你窗口大小不同，你可能会看到右上角的三条杠，点击后会看到 Home、About、Contact、Register和Log in 链接。

更改视图和布局页面

首先，你希望改变页面顶部的“Application name”链接，这段文字在每个页面都有，是公用的。尽管它出现在程序中的每个页面，但实际上它只写在一个地方。在解决方案资源管理器中找到 /Views/Shared 文件夹，打开_Layout.cshtml 文件。这个页面叫做布局页，放在所有页面都能用的共享文件夹中。

布局模板允许你在页面的某个地方指定HTML容器，然后在网站多个页面中应用。找到@RenderBody() 行，RenderBody 是一个占位符，所有你使用了_layout.cshtml文件的视图页面会被显示在这个地方，“包装”在布局页中。例如，如果你选择About链接，视图Views\Home\About.cshtml 将被绘制在 RenderBody  方法中。

修改布局模板中的ActionLink，将"Application name"改为"MVC Movie"。

 <body>

     <div class="navbar navbar-inverse navbar-fixed-top">

         <div class="navbar-inner">

             <div class="container">

                 <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                 </button>

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

                 <div class="nav-collapse collapse">

                     <ul class="nav">

                         <li>@Html.ActionLink("Home", "Index", "Home")</li>

                         <li>@Html.ActionLink("About", "About", "Home")</li>

                         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                     </ul>

                     @Html.Partial("_LoginPartial")

                 </div>

             </div>

         </div>

     </div>

用下面的标签替换title元素的内容：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

     @Styles.Render("~/Content/css")

     @Scripts.Render("~/bundles/modernizr")

 </head>

运行应用程序，现在已将变成“MVC Movie”了。单击About链接，你会看到这个页面也显示“MVC Movie”。我们仅仅修改了布局模板，就为网站中的所有页面换上了新的标题。

现在让我们来改变Index视图中的title吧。

打开MvcMovie\Views\HelloWorld\Index.cshtml 。有两个地方需要我们修改：浏览器标题栏中的文本，然后是次要的标题（<h2>元素）。你可以稍微修改一下代码，这样就可以看到哪些代码影响了哪些部分。

 @{

     ViewBag.Title = "Movie List";

 }

 <h2>My Movie List</h2>

 <p>Hello from our View Template!</p>

为了指明HTML显示的标题，上面的代码中设置了ViewBag对象（在Index.cshtml视图模板中）的Title属性。在布局模板中（Views\Shared\_Layout.cshtml ）的<head>节点的<title>标签使用了这个值。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

     @Styles.Render("~/Content/css")

     @Scripts.Render("~/bundles/modernizr")

 </head>

使用此ViewBag的方法，你可以轻松地其他参数之间传递您的视图模板和布局文件。

运行应用程序并浏览到http://localhost:xx/HelloWorld。注意这个页面发生的变化：浏览器标题、主标题、此标题都发生了改变（如果你没有看到这些变化，可能是浏览器缓存了之前的内容，在浏览器中按CTRL+F5强制从刷新页面）。浏览器标题使我们在Index.cshtml中传递给布局页的参数，布局页又加上了“- Movie App”部分。通过这个例子你会看到，布局模板提供了一种简单的修改应用程序中全部页面的方式。

到目前为止，我们用到的少量数据（像上面例子中的“Hello from our View Template!”）都是硬编码的。我们用到了MVC中的“V”（View）和“C”（Controller），但还没用到过“M”（Model）。接下来我们就演练一下如何创建数据库，并通过模型来获取数据。

将数据从控制器传递到视图

在讨论数据库和模型之前,让我们先说说容控制器传递数据给视图。控制器类在响应传入的请求时被调用，控制器类是你写代码处理浏览器请求、从数据库中检索数据、并最终决定发送什么类型的响应给浏览器。视图模板被控制器用来生成和格式化HTML响应给浏览器。

控制器的责任是为视图模板提供必须的数据或对象，用来绘制HTML响应浏览器。一个最佳实践是：视图模板从来不参与业务逻辑，或直接与数据库交互。相反的，视图模板仅与控制器提供的数据一起工作。保持这种“关注点分离（separation of concerns）”有助于保持代码的整洁，可测试性和更容易维护。

目前，HelloWorldController 类中的 Welcome 方法需要两个参数：name 和 numTimes，然后直接与将值输出给浏览器。让我们修改控制器，使用视图来替换直接相应string字符串。视图模板会生成一个动态响应，这意味着你需要通过控制器传递一些数据用来生成响应。要做到这些，你需要通过在控制器中将数据（参数）放到ViewBag对象中，视图可以访问ViewBag对象。

回到 HelloWorldController.cs  文件中，修改Welcome方法，在ViewBag对象中添加一个Message和NumTimes值。ViewBag是dynamic 类型的对象，你可以为它添加任何你想要的数据，ViewBag对象在你添加数据之前，不具有任何属性。ASP.NET MVC 模型绑定系统从地址参数中自动映射命名的参数（name 和 numTimes）到方法中。完整的HelloWorldController.cs文件如下：

 using System.Web;

 using System.Web.Mvc;

 namespace MvcMovie.Controllers

 {

     public class HelloWorldController : Controller

     {

         public ActionResult Index()

         {

             return View();

         }

         public ActionResult Welcome(string name, int numTimes = )

         {

             ViewBag.Message = "Hello " + name;

             ViewBag.NumTimes = numTimes;

             return View();

         }

     }

 }

现在ViewBag对象已经包含了数据，它会被自动传递给视图。

接下来，你需要一个Welcome视图模板。在生成菜单中，选择生成解决方案（或使用快捷键 CTRL+SHIFT+B）确定项目已经编译了。

在Views\HelloWorld 文件夹右键，选择“添加”>“支架”：

在添加支架对话框中，选择“MVC 5 View - Empty without model”。

在Add View对话框中，将视图命名为Welcome

文件MvcMovie\Views\HelloWorld\Welcome.cshtml  已经创建好了。

在文件Welcome.cshtml  的<h2>元素下添加如下的代码，完整的代码如下：

 @{

     ViewBag.Title = "Welcome";

 }

 <h2>Welcome</h2>

 <ul>

     @for (int i = 0; i < ViewBag.NumTimes; i++)

     {

         <li>@ViewBag.Message</li>

     }

 </ul>

运行应用程序，在浏览器中查看如下地址：

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

现在数据从URL取出来，通过模型绑定传递给控制器，控制器将数据封装在ViewBag对象中，传递给视图，然后视图将数据以HTML的方式呈现给用户。

在上面的例子中，我们使用ViewBag对象将数据从控制器传递给视图。在家下来的章节中，我们会使用视图模型来传递数据。使用视图模型传递数据比用ViewBag要好得多。

这也是模型“M”的一种，但并没有使用数据库。我们接下来要学习的是创建一个数据库，创建一个真正意义的视图模型。

【译】ASP.NET MVC 5 教程 - 3：添加视图的更多相关文章

  1. 【译】ASP.NET MVC 5 教程 - 10：添加验证

    原文:[译]ASP.NET MVC 5 教程 - 10:添加验证 在本节中,我们将为Movie模型添加验证逻辑,并确认验证规则在用户试图使用程序创建和编辑电影时有效. DRY 原则 ASP.NET M ...

  2. 【译】ASP.NET MVC 5 教程 - 9：添加新字段

    原文:[译]ASP.NET MVC 5 教程 - 9:添加新字段 在本节中,我们将使用Entity Framework Code First 数据迁移功能将模型类的改变应用到数据库中. 默认情况下,当 ...

  3. 【译】ASP.NET MVC 5 教程 - 4：添加模型

    原文:[译]ASP.NET MVC 5 教程 - 4:添加模型 在本节中,我们将添加一些管理电影数据库的类,这些类在ASP.NET MVC 应用程序中扮演“Model”的角色. 我们将使用.NET F ...

  4. 【译】ASP.NET MVC 5 教程 - 2：添加控制器

    原文:[译]ASP.NET MVC 5 教程 - 2:添加控制器 MVC 表示 模型-视图-控制器.MVC 是一种用于开发应用程序的模式,具备良好架构,可测试和易于维护.基于 MVC 应用程序中包含: ...

  5. 【译】ASP.NET MVC 5 教程 - 11：Details 和 Delete 方法详解

    原文:[译]ASP.NET MVC 5 教程 - 11:Details 和 Delete 方法详解 在教程的这一部分,我们将研究一下自动生成的 Details 和Delete 方法. Details ...

  6. 【译】ASP.NET MVC 5 教程 - 8：搜索查询

    原文:[译]ASP.NET MVC 5 教程 - 8:搜索查询 添加一个搜索的方法和搜索的视图 在本节中,我们为 Index 方法添加查询功能,使我们能够根据电影的题材或名称进行查找. 修改 Inde ...

  7. 【译】ASP.NET MVC 5 教程 - 7：Edit方法和Edit视图详解

    原文:[译]ASP.NET MVC 5 教程 - 7:Edit方法和Edit视图详解 在本节中,我们继续研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打 ...

  8. 【译】ASP.NET MVC 5 教程 - 6：通过控制器访问模型的数据

    原文:[译]ASP.NET MVC 5 教程 - 6:通过控制器访问模型的数据 在本节中,你将新建一个MoviesController 类,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. ...

  9. 【译】ASP.NET MVC 5 教程 - 5：使用 SQL 服务器 LocalDB 创建连接字符串

    原文:[译]ASP.NET MVC 5 教程 - 5:使用 SQL 服务器 LocalDB 创建连接字符串 在上一节中,我们创建了MovieDBContext 类来连接数据库.处理Movie 对象和数 ...

随机推荐

  1. 14.18 InnoDB Backup and Recovery 备份和恢复:

    14.18 InnoDB Backup and Recovery 备份和恢复: 安全数据库管理的关键是 做定期的备份,依赖你的数据卷, MySQL server的数量和数据库的负载,你可以使用那些技术 ...

  2. Android中吐司当前电池电量

    /** * * @author chrp * *土司当当电池电量 */ public class MainActivity extends Activity { class BtteryReceive ...

  3. ExtJS拖拽效果

    ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...

  4. GitHub上项目配置和导入eclispe的问题解决

    在github上下载的工程文件导入的时候总是遇到各种各样的问题,昨天晚上瞎忙一晚上查资料没搞定.早上找高手请教了一下,一起弄了好一会终于解决了,这里记录一下方法解决的具体方法步骤. 本方法适用于离线导 ...

  5. Codeforces Round #275 (Div. 2) C - Diverse Permutation （构造）

    题目链接:Codeforces Round #275 (Div. 2) C - Diverse Permutation 题意:一串排列1~n.求一个序列当中相邻两项差的绝对值的个数(指绝对值不同的个数 ...

  6. fopen()功能

    1.2 文件输入和输出功能 键盘.显示器.打印机.磁盘驱动器和其他逻辑器件, 输入和输出可以通过文件管理方法可以完成. 最经常使用的编程是一个磁盘文件, 因此,这一部分主要是基于磁盘文件, 简介Tur ...

  7. 　　PS2: 这篇文章中的图片绘图工具使用的是Dia (sudo apt-get install dia)。据说yEd也很不错。

    SBCL编译过程 - O.Nixie的专栏 - 博客频道 - CSDN.NET PS2: 这篇文章中的图片绘图工具使用的是Dia (sudo apt-get install dia).据说yEd也很不 ...

  8. 【iOS发展-44】通过案例谈iOS重构：合并、格式化输出、宏观变量、使用数组来存储数据字典，而且使用plist最终的知识

    我们今天的情况下是第一个例子,下面的5一来通过切换页上一页下一页: (1)第一步,基本是以非常傻非常直接的方式来创建.这里用到的主要点有: --把对象变量设置为全局变量使得能够在其它方法中调用来设置它 ...

  9. 【菜鸟看框架】——EF怎样自己主动生成实体

    引言 在上一篇博客中给大家介绍了一些关于EF框架的基本知识.让大家对实体架构算是有了一个入门的认识,当然知识 这一篇博客是不能非常清楚的理解实体架构的内涵的.我们须要在实践中自己去不断的研究和探索当中 ...

  10. KMP算法及KMP算法的应用(POJ2406)

    ///KMP算法#include<bits/stdc++.h> using namespace std; ]; void makeNext(const char P[],int next[ ...