ASP.NET MVC4 新手入门教程之三 ---3.添加视图

时间 2019-11-20

标签 asp.net asp mvc4 mvc 新手入门教程之三添加视图栏目 ASP 繁體版

原文原文链接

在这一节你要修改HelloWorldController类要使用的视图模板文件来干净封装生成 HTML 响应到客户端的过程。html

您将建立一个使用Razor 视图引擎介绍 ASP.NET MVC 3 的视图模板文件。剃刀基于视图模板具备.cshtml文件扩展名，并提供优雅的方式来建立 HTML 输出使用 C#。剃刀将字符和击键时编写一个视图模板所需的数量降至最低，并使快速流畅的编码工做流。jquery

目前Index方法返回一条消息，是在控制器类中硬编码的字符串。更改Index方法，以返回View对象，以下面的代码所示：web

public ActionResult Index() { return View(); }

上面的Index方法使用一个视图模板来生成到浏览器的 HTML 响应。控制器方法（也称为操做方法），如上述，Index方法一般返回一个（或从一个派生的类），喜欢不原始类型的字符串。ajax

在项目中，添加一个视图模板，您可使用与该Index方法。要作到这一点，Index法内单击鼠标右键并单击添加视图.数据库

出现添加视图对话框。保留默认值并单击添加按钮的方式：编程

建立的MvcMovie\Views\HelloWorld文件夹和MvcMovie\Views\HelloWorld\Index.cshtml文件。你能够看到他们在解决方案资源管理器:canvas

下面显示了建立的Index.cshtml文件：api

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

<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>

若是使用的 Visual Studio 2012，在解决方案资源管理器中，右键单击Index.cshtml文件，并选择在 Page Inspector 视图.

Page Inspector 教程有有关这个新工具的详细信息。

或者，运行应用程序，浏览到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。Index法在您的控制器没有作不少工做；它只是跑了语句return View()，它指定该方法应使用一个视图模板文件来呈现到浏览器的响应。由于你没有显式指定要使用的视图模板文件的名称，ASP.NET MVC 默认设置为\Views\HelloWorld文件夹中使用Index.cshtml视图文件。下面的图像显示的字符串"Hello 从咱们的视图模板!"在视图中硬编码。

看上去很不错。可是，注意到浏览器的标题栏显示"索引个人 ASP.NET 第一"和大的连接页面顶部说，"您的徽标在这里"。如下连接"你标志在这里"。是注册和登陆的连接，连接到首页，上下约和联系页面。让咱们改变其中的一些。

更改视图和布局页

首先，你想要改变"你标志在这里"。在页面的顶部的标题。该文本是常见的每一页。它实际上实现只在一个地方在项目中，即便它出如今应用程序中的每一页上。转到/Views/Shared文件夹中的解决方案资源管理器中，并打开_Layout.cshtml文件。此文件被称为布局页面，它是全部其余页面使用共享"壳"。

布局模板容许您指定您的网站的 HTML 容器布局在同一个地方，而后将其应用跨多个页面在您的网站。发现@RenderBody()线。 RenderBody是一个占位符，您建立的全部视图特定页都现身在哪里，在布局页的"包装"。例如，若是您选择关于连接，在RenderBody方法内部呈现Views\Home\About.cshtml视图。

更改网站标题标题在布局模板从"您的徽标在这里"到"MVC 电影"。

<div class="float-left"> <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p> </div>

标题元素的内容替换为如下标记：

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

运行该应用程序，并注意它如今说"MVC 电影"。关于连接，点击，你看到如何该页面显示的"MVC 电影"，太。咱们可以在布局模板一次更改，在该网站上的全部页面有都反映新的标题。

如今，让咱们改变索引视图的标题。

打开MvcMovie\Views\HelloWorld\Index.cshtml。有两个地方作出改变：第一，文本，显示在浏览器的标题，而后在二级标题（ <h2>元素）。你要让他们略有不一样，因此你能够看到哪一部分的代码更改应用程序的哪一部分。

@{ ViewBag.Title = "Movie List"; } <h2>My Movie List</h2> <p>Hello from our View Template!</p>

若要指示显示的 HTML 标题，上面的代码设置Title属性ViewBag对象（即Index.cshtml视图模板中）。若是你回望布局模板的源代码，你会注意到该模板使用此值在<title>元素中做为咱们之前修改过的 HTML <head>节的一部分。使用此ViewBag方法，能够容易地传递您的视图模板与您的布局文件之间其余参数。

运行该应用程序，而后浏览到http://localhost:xx/HelloWorld。浏览器标题、主标题和二级标题已更改的通知。（若是你看不到更改浏览器中的，您可能正在查看缓存的内容。按 Ctrl + F5 在您的浏览器，迫使来自服务器要加载的响应）。浏览器的标题建立的ViewBag.Title咱们在Index.cshtml视图模板和附加设置"-电影应用程序"在布局文件中添加。

此外注意到Index.cshtml视图模板中的内容如何与_Layout.cshtml视图模板合并和单个 HTML 响应被发送到浏览器。布局模板使它真的很容易进行更改以应用在全部您的应用程序中的页面。

咱们的"数据"（在本例中的"从咱们的视图模板 Hello!"消息）的一点是硬编码的虽然。MVC 应用程序中有一个"V"（视图），你得"C"（控制器），但无"M"（模型）还没有。不久，咱们会穿越如何建立数据库并从中检索模型数据。

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

咱们转到一个数据库，谈论模型以前，虽然，先来谈谈将信息从控制器传递到视图。控制器类调用传入的 URL 请求的响应。控制器类是响应的你在哪里写处理传入的浏览器的代码请求，从数据库中检索数据和最终决定哪一种类型发送回浏览器。视图模板能够而后使用从控制器生成并设置其格式到浏览器的 HTML 响应。

控制器是负责提供任何数据或对象必需的一个视图模板，呈现到浏览器的响应。最佳实践：视图模板应该永远不会执行的业务逻辑，或与数据库直接交互。相反，一个视图模板应工做只能处理由控制器提供给它的数据。维持这个"关注点分离"有助于保持您的代码，清洁、可检验性和更容易维护。

目前， HelloWorldController类中的Welcome的行动方法须要一个name和一个numTimes参数，而后输出直接到浏览器中的值。而不是有控制器呈现为一个字符串，此响应，让咱们改变控制器，而是使用一个视图模板。视图模板将生成的动态响应，这意味着你须要经过适当的字节数据从控制器到视图才能生成响应。你能够经过把视图模板须要的动态数据（参数）放在视图模板而后能够访问一个ViewBag对象的控制器。

返回到HelloWorldController.cs文件并更改的 Welcome的方法，将一个Message和NumTimes的值添加到 ViewBag对象。ViewBag是一个动态的对象，这意味着您能够在任何你想要它；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 = 1) { ViewBag.Message = "Hello " + name; ViewBag.NumTimes = numTimes; return View(); } } }

如今ViewBag对象包含将自动传递给视图的数据。

接下来，您须要一个受欢迎的视图模板！在生成菜单中，选择生成 MvcMovie以确保编译项目。

在Welcome的方法内部右键单击，而后单击添加视图.

这里是添加视图对话框中看起来像：

单击添加，而后在新的Welcome.cshtml文件中添加下面的代码在 <h2>元素之下。您将建立一个循环来多少倍，用户说它应该说"Hello"。下面显示了完整的Welcome.cshtml文件。

@{ ViewBag.Title = "Welcome"; } <h2>Welcome</h2> <ul> @for (int i=0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </ul>

运行该应用程序，浏览到如下 URL：

http://localhost:xx，HelloWorld，欢迎光临吗？名称 = Scott & numtimes = 4

如今数据被从 URL 并传递给控制器使用的模型联编程序。控制器的数据打包成一个ViewBag对象，并将该对象传递给视图。视图而后是向用户显示为 html 格式的数据。

在上面的示例中，咱们使用一个ViewBag对象将数据从控制器传递到视图。后者在本教程中，咱们将使用一个视图模型将数据从控制器传递到视图。视图模型方法来传递数据优于通常多视图包方法。请参阅博客动态 V 强类型化的视图的详细信息。

好吧，那是一种"M"的模型，而不是数据库的那种。让咱们学会的并建立一个数据库，电影。