首页 > 代码库 > Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图
Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图
Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图
在本节中，您需要修改HelloWorldController类，从而使用视图模板文件，干净优雅的封装生成返回到客户端浏览器HTML的过程。
您将创建一个视图模板文件，其中使用了ASP.NET MVC 3所引入的Razor视图引擎。Razor视图模板文件使用.cshtml文件扩展名，并提供了一个优雅的方式来使用C＃语言创建所要输出的HTML。用Razor编写一个视图模板文件时，将所需的字符和键盘敲击数量降到了最低，并实现了快速，流畅的编码工作流程。
当前在控制器类中的Index方法返回了一个硬编码的字符串。更改Index方法返回一个View对象，如下面的示例代码：
public ActionResult Index() { return View(); }上面的Index方法使用一个视图模板来生成一个HTML返回给浏览器。控制器的方法（也被称为action method(操作方法) ），如上面的Index方法，一般返回一个ActionResult（或从ActionResult所继承的类型），而不是原始的类型，如字符串。
在该项目中，您可以使用的Index方法来添加一个视图模板。要做到这一点，在Index方法中单击鼠标右键，然后单击“ 添加视图“。
出现添加视图对话框。保留缺省值，并单击添加按钮
您可以在解决方案资源管理器中看到MvcMovie\Views\HelloWorld 文件夹和已被创建的MvcMovie\View\HelloWorld\Index.cshtml文件：
下图显示了已被创建的Index.cshtml文件：
@{ ViewBag.Title = "Index";}<h2>Index</h2>在<h2>标签后面添加以下HTML:<p>从我们的视图模板里返回!</p>
完整的MvcMovie\HelloWorld\Index.cshtml文件如下所示。
@{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>从我们的视图模板里返回!</p>
运行程序，访问HellWorld控制器http://localhost:5279/HelloWorld/。控制器里的Index方法并没有做很多工作，仅仅是执行 return View()语句，指定使用模板文件来响应浏览器请求。因为你没有指定使用的模板文件名称，ASP.NET MVC默认使用\Views\HelloWorld目录下的Index.cshtml视图文件。
看上去很不错。然而，注意浏览器标题栏“Index- 我的 ASP.NET MVC 应用程序”，以及页面顶部一个大号的链接“将你的徽标放置在此处”。链接下方是注册和登录链接，再往下是主页、关于和联系方式的页面链接。让我们来修改这些。
修改视图页和布局页
首先，你想修改页面顶部的标题“将你的徽标放置在此处”。该文本在每个页面中通用。虽然出现在应用的每一个页面，实际上在项目中只定义了一次，。在解决方案资源管理器中定位到/Views/Shared目录下，打开 _Layout.cshtml文件。该文件称为布局页，共享为外壳，被所有其他页面使用。
布局模板使你指定特定的HTML容器来布局整个站点，在一处定义，在站点多个页面应用。找到@RenderBody()行。RenderBody是一个你创建的视图页面中的占位符，在布局页面中断行。例如，如果你选择“关于”链接，\Home\About.cshtml 视图在RenderBody方法中呈现。
在布局模板中修改站点标题行，由“将你的徽标放置在此处”改为“MVC 电影”。
<divclass="float-left"><pclass="site-title">@Html.ActionLink("MVC 电影", "Index", "Home")</p></div>
使用以下标记替换标题内容：
<title>@ViewBag.Title - 电影应用程序</title>
运行程序，并注意现在显示是“MVC 电影”。点击“关于”链接，你会发现该页面同样显示“MVC 电影”。我们在布局模板中改变一次，站点中所有页面都会变更为新的标题。
现在，让我们来修改Index视图的标题。
打开MvcMovie\Views\HelloWorld\Index.cshtml文件。里面有两处地方需要修改：首先，在浏览器标题栏显示的文本，其次是在二级标题（<H2>元素）处。你可以将两处修改稍微不同，以便能区分出哪个地方分别对应应用程序的哪个部分。
@{ ViewBag.Title = "首页";}<h2>我的首页</h2>代码通过设置ViewBag的Title属性来指明HTML标题的显示内容。如果你查看布局模板的源码，你会注意到模板在<title>元素中使用该值作为 <head>的一部分。使用ViewBag，你可以容易地在视图模板和布局文件间传递其他参数。
运行程序，浏览 http://localhost:xx/HelloWorld。你会发现浏览页面的标题、一级标题、二级标题已经发生改变（如果在浏览器中看不到改变，那么可能你看到的是缓存内容，使用Ctrl+F5强制浏览器从服务器加载数据到客户端）。浏览器标题由两部分组成，首先是我们在Index.cshtml视图模板里设置的ViewBag.Title，然后是在布局文件中设置的“-电影应用程序”。
同时注意Index.cshtml视图模板文件内容是如何与 _Layout.cshtml视图模板合并，形成单一的HTML响应返回给浏览器。布局模板使修改应用到你的应用程序所有页面变得容易。
上面例子中我们很少一点数据是硬编码。此MVC应用程序有视图，并且你已经创建了控制器，但是还没有模型。很快，我们将涉及如何创建数据库并从中取得模型数据。
从控制器传递数据到视图
在我们创建数据库并谈论模型之前，让我们先谈论下从控制器传递信息到视图。控制器类被调用来响应输入网址请求。在控制器类中编写代码，处理浏览器输入请求，从数据库获取数据，并且决定什么类型的响应被发回浏览请求。来自控制器的视图模板被用于生成和格式化HTML响应给浏览器。
控制器负责提供需要的任何数据或对象给视图模板来生成响应给浏览器。最佳实践是：视图模板不应该处理业务逻辑或者直接与数据库发生交互。视图模板应该仅仅处理控制器提供给它的数据。保持关系的隔离，有助于使你的代码干净、可测试和易于维护。
目前，HelloWorldController类中的Welcome方法是用name和num参数，直接输出值到浏览器。让我们改变控制器，使用视图模板来替代控制器使用字符串响应请求。视图模板将生产一个动态响应，意味着你需要传递一个视图模板可访问的ViewBag对象。
返回到 the HelloWorldController.cs文件，修改Welcome方法，为ViewBag对象增加Message和Num值。ViewBag是一个动态对象，意味着你可以放任何你想放的东西进去；该对象在你放什么进去之前，没有定义的属性。ASP.NET MVC 模型绑定机制自动将地址栏查询字符串中的命名参数映射到你的方法中的参数。完整的HelloWorldController.cs如下图所示：
public ActionResult Welcome(string message, int num = 1) { ViewBag.Message = message; ViewBag.Num = num; return View(); } 现在包含数据的ViewBag对象将被自动传递到视图。
接下来，你需要一个Welcome视图模板。在生成菜单中，选择生成MVCMovie来确保该工程被编译。
然后在Welcome方法中右键单击，选择添加视图，保持默认，添加。
将Welcome.cshtml文件中的<h2>Welcome</h2>替换为以下内容
<ul>@for (int i = 0; i < ViewBag.Num; i++){ <li>@ViewBag.Message</li>}</ul>运行查看效果。
现在数据通过模型绑定从地址栏传递给控制器。控制器将数据打包放进ViewBag对象，并将该对象传递给视图。视图将数据显示为HTML给用户。
在上面这个例子中，我们使用ViewBag对象从控制器传递数据到视图。稍后的学习中，我们将使用视图模型来传递数据。相对于ViewBag方式，视图模型方式传递数据更加优秀
这是一种方式的模型，但不是数据库方式。让我们来学习和创建电影的数据库。
Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图