MVC3 快速入门第三节 添加一个视图.docx
《MVC3 快速入门第三节 添加一个视图.docx》由会员分享,可在线阅读,更多相关《MVC3 快速入门第三节 添加一个视图.docx(13页珍藏版)》请在冰点文库上搜索。
MVC3快速入门第三节添加一个视图
ASP.NETMVC3快速入门-第三节添加一个视图
ASP.NETMVC3快速入门-第三节添加一个视图
分类:
ASP.NETMVC2011-04-1016:
27 4145人阅读 评论
(2) 收藏 举报
3.1 添加一个视图
在本节中我们修改HelloWorldController类,以便使用视图来向客户端展示HTML格式的响应结果。
我们使用ASP.NETMVC3中新增的Razor视图引擎来创建视图。
Razor视图模板文件的后缀名为.cshtml,它提供了一种简洁的方式来创建HTML输出流。
Razor视图大大减少了在书写视图模板文件时所需要输入的字符,提供了一个最快捷,最简便的编码方式。
这里,我们在HelloWorldController类的Index方法中添加使用一个视图。
在修改前的Index方法中返回一个字符串,我们修改这个方法来使它返回一个视图,代码如下所示。
publicActionResultIndex()
{
returnView();
}
这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。
接着,让我们来添加一个Index方法所使用的视图模板。
在Index方法中点击鼠标右键,然后点击“添加视图”,将会弹出一个“添加视图”对话框。
图3-1添加视图
图3-2 添加视图对话框
在该对话框中,不做任何修改,直接点击添加按钮,观察解决方案资源管理器中,在MvcMovie项目下的Views文件夹下创建了一个HelloWorld文件夹,并且在该文件夹中创建了一个Index.cshtml文件,同时该文件呈打开状态,如图3-3所示。
图3-3 视图模板文件被创建并呈打开状态
让我们在该文件中追加一些文字,代码如代码清单3-1所示。
代码清单3-1Index.cshtml视图模板文件
@{
ViewBag.Title="首页";
}
首页
这是我的第一个视图模板
运行应用程序,输入地址“http:
//localhost:
xxxx/HelloWorld”。
由于在Index方法中并没有做任何事情,只是简单地一行代码—“returnView()”,该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。
因为我们并没有显式指定使用哪个视图模板文件,所以使用了默认的Views文件夹下的HelloWorld文件夹下的Index.cshtml视图模板文件。
该视图模板文件中只有简单的两行文字,在浏览器中的显示结果如图3-4所示。
图3-4 在浏览器中显示视图
看上去还不错,但是请注意,该网页的标题为“首页”,但是网页中的大标题文字却为“我的MVC应用程序”,需要修改一下。
3.2 修改视图,修改应用程序的页面布局
首先,让我们修改页面大标题中的“我的MVC应用程序”文字。
这段文字是所有页面中的公共大标题,在这个应用程序中,虽然所有页面中都显示了这个共同的大标题,但只有一处地方对其进行了设置。
打开解决方案资源管理器中Views文件夹下的Shared文件夹下的_Layout.cshtml文件。
该文件被称为布局页面,位于公有文件夹Shared下,被所有其他网页所共用。
图3-5 公有布局页面
布局模板页允许你统一在一个地方指定整个Web应用程序或Web网站的所有HTML页面的布局方法。
请注意文件底部的“@RenderBody()”代码行。
@RenderBody()是一个占位符,代表了所有你创建出来的实际应用的视图页面,在这里统一指定。
将布局模板文件中的“我的MVC应用程序”修改为“我的MVCMovie应用程序”。
代码如下所示。
我的 MVCMovie 应用程序