原文:【译】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. sed 技巧一例：特定位置插入

    通过一例子熟悉 sed 的运用 下面命令是在修改 ~/fs/install/nzos.conf 文件, 并在 env 第一次出现的地方再添加一行 env LXC_EXTRA_PORT=5556 sed ...

  2. Codeforces Round #306 (Div. 2) D.E. 解题报告

    D题:Regular Bridge 乱搞. 构造 这题乱搞一下即可了.构造一个有桥并且每一个点的度数都为k的无向图. 方法非常多.也不好叙述.. 代码例如以下: #include <cstdio ...

  3. DLP底座（威创定制）

    品牌:威创 型号:BC06730-1000 生产商:广东威创视讯科技股份有限公司 1.DLP底座说明 DLP底座由威创统一定制,确保了整套系统的完整性和可靠性.材质为钢结构,根据淄川地下管线中心的现场 ...

  4. 怎样使用CMenu类

    CMenu类从CObject类派生而来.为什么要使用CMenu类呢?AppWzard不是把菜单做好了吗?在资源编辑器上修改菜单不是很方便吗?     我是个vc++初学者,自从当斑竹以来,天天看贴子, ...

  5. centos7 opera济览器安装

    网网下rpm安装包: http://www.opera.com/computer/thanks?partner=www&par=id%3D39136%26amp;location%3D403& ...

  6. -force_load

    Crash Log: Last Exception Backtrace: 0   CoreFoundation                 0x2f087f06 __exceptionPrepro ...

  7. 14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读

    14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读 一致性读 意味着 InnoDB 使用多版本来保护查询一个数据库在当前时间点的快照. 查询看到被事务做出的修改, ...

  8. VMware Workstation(虚拟机软件) V10.0 简体中文版可以安装了

    在虚拟机软件中VMware Workstation算是一款非常强大较稳定的软件了,今天 VMware Workstation 10.0正式发布了,最让人欣喜的是该版本终于有了简体中 文版了,从现在开始 ...

  9. [Android]图片资源管理学习

    一.概念 几个概念:1.像素:像素是组成图像的最基本单位:点该点自身有大小,其中保存了颜色值 2.屏幕尺寸:screen size手机屏幕的物理尺寸.单位:inch(英寸)ex:4.0英寸 3.8英寸 ...

  10. Advanced Data Structures

    Advanced Data Structures Advanced Data Structures