MVC3快速入門-第三节添加一个视图.docVIP

ASP.NET MVC3 快速入门-第三节 添加一个视图 ? ASP.NET MVC3 快速入门-第三节 添加一个视图 分类：?ASP.NET MVC2011-04-10 16:27?4145人阅读?评论(2)?收藏?举报3.1??添加一个视图 ??? 在本节中我们修改HelloWorldController类，以便使用视图来向客户端展示HTML格式的响应结果。 我们使用ASP.NET MVC3中新增的Razor视图引擎来创建视图。Razor视图模板文件的后缀名为.cshtml,它提供了一种简洁的方式来创建HTML输出流。Razor视图大大减少了在书写视图模板文件时所需要输入的字符，提供了一个最快捷，最简便的编码方式。 ??? 这里，我们在HelloWorldController类的Index方法中添加使用一个视图。在修改前的Index方法中返回一个字符串，我们修改这个方法来使它返回一个视图，代码如下所示。 public ActionResult Index() { ??????return View(); } ??? 这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。接着，让我们来添加一个Index方法所使用的视图模板。在Index方法中点击鼠标右键，然后点击“添加视图”，将会弹出一个“添加视图”对话框。 ? 图3-1 添加视图 ??? 在该对话框中，不做任何修改，直接点击添加按钮，观察解决方案资源管理器中，在MvcMovie项目下的Views文件夹下创建了一个HelloWorld文件夹，并且在该文件夹中创建了一个Index.cshtml文件，同时该文件呈打开状态，如图3-3所示。 图3-3?视图模板文件被创建并呈打开状态 ??? 让我们在该文件中追加一些文字，代码如代码清单3-1所示。 ??? 代码清单3-1 Index.cshtml视图模板文件 @{ ????ViewBag.Title = ; } h2首页/h2 p这是我的第一个视图模板/p ??? 运行应用程序，输入地址“http://localhost:xxxx/HelloWorld”。由于在Index方法中并没有做任何事情，只是简单地一行代码—“return View()”,该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。因为我们并没有显式指定使用哪个视图模板文件，所以使用了默认的Views文件夹下的HelloWorld文件夹下的Index.cshtml视图模板文件。该视图模板文件中只有简单的两行文字，在浏览器中的显示结果如图3-4所示。 ??? 看上去还不错，但是请注意，该网页的标题为“首页”,但是网页中的大标题文字却为“我的MVC应用程序”，需要修改一下。 3.2??? ??? 首先，让我们修改页面大标题中的“我的MVC应用程序”文字。这段文字是所有页面中的公共大标题，在这个应用程序中，虽然所有页面中都显示了这个共同的大标题，但只有一处地方对其进行了设置。打开解决方案资源管理器中Views文件夹下的Shared文件夹下的_Layout.cshtml文件。该文件被称为布局页面，位于公有文件夹Shared下，被所有其他网页所共用。 ? ??? 布局模板页允许你统一在一个地方指定整个Web应用程序或Web网站的所有HTML页面的布局方法。请注意文件底部的“@RenderBody()”代码行。@RenderBody()是一个占位符，代表了所有你创建出来的实际应用的视图页面，在这里统一指定。将布局模板文件中的“我的 MVC 应用程序”修改为“我的 MVCMovie 应用程序”。代码如下所示。 div id=title ????h1?MVCMovie?应用程序/h1 /div ??? 运行应用程序，注意网页中的大标题被修改为“我的 MVCMovie 应用程序”。点击“关于”链接，你可以看见“关于”页面中的大标题也被修改为“我的 MVCMovie 应用程序”。由此可以看出一旦修改了布局页面中的某处地方，该修改将会被应用到所有页面中。 图3-6 在布局页面中修改了网页中显示的大标题 ??? 完整的_Layout.cshtml文件中的代码如代码清单3-2所示。 ??? 代码清单3-2 _Layout.cshtml文件中的完整代码 !DOCTYPE html html head ????meta http-equiv=Content-Type content=text/html; charset=utf-8/ ????title@ViewBag.Title/title ????link href=@Url.Content(~/Content/Site.css) rel=stylesheet type=