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

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

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

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

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

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

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

 

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

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

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

HelloWorldIndex

添加<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 视图.

PI

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

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

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

更改视图和布局页

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

_LayoutCshtml

布局模板允许您指定您的网站的 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"的模型，而不是数据库的那种。让我们学会的并创建一个数据库，电影。

posted @ 2015-01-22 10:59  178mz  阅读(390)  评论(0)  编辑  收藏  举报