早在ASP.NET MVC 3就引入了Razor视图引擎( Razor view engine)。Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优 雅的方式来使用C#语言创建所要输出的HTML。用Razor编写一个视图模板文件时,将 所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程。
当前在控制器类中的Index方法返回了一个硬编码的字符串。更改HelloController
方法返回一个 View对象,如下面的示例代码:
public ActionResult Index() { return View(); } |
---|
上面的Index方法使用一个视图模板来生成一个HTML返回给浏览器。控制器的方法 (也被称为action method(操作方法) ),如上面的Index方法,一般返回一个ActionResult
(或从ActionResult所继承的类型),而不是原始的类型,如字符串。
在该项目中,您可以使用的Index方法来添加一个视图模板。要做到这一点,在
Views\Hello
文件夹上,单击鼠标右键,然后单击“ 添加“,选择“带有布局的MVC 5 视图页(Razor)“。
指定视图的名称,这里填入index
选择页面的布局,这里就选择默认提供的基于Bootstrap的一个布局模板_Layout.cshtml
.当然,在实际项目中,你可以提前搭建好布局页面,并使用布局功能来实现整体站点的风格统一,在后面会提到。
对Hello的View也就是Index.cshtml文件进行修改,然后预览查看效果
上述操作中:Hello控制器( http://localhost:xxxx/Hello
)。在控制器的Index方法中并没有做太多的工 作,它只是执行了return View()
,这个方法指定使用一个视图模板文件来Render返回给浏览器的HTML。因为没有明确指定使用那个视图模板文件,ASP.NET MVC会默认 使用\Views\HelloWorld
文件夹下的Index.cshtml
视图文件。下图显示了在视图文件中硬编码的字符串 “Hello from our View Template!
“
首先,想要修改在页面顶部的链接 “Application name
“。这段文字是每个页面的公用文 字,即使这段文字出现在每个页面上,但是实际上它仅保存在工程里的一个地方。在解决方案资源管理器里找到 /Views/Shared
文件夹,打开 _Layout.cshtml
文件。此文件被称为布局页面 (Layout page),并且其它所有的子页面,都共享使用这个布局页面。
布局模版允许在一个位置放置占位所需的 HTML 容器,然后将其应用到您网站中所有 的网页布局。 查找@RenderBody()
. 所创建的所有视图页面都被”包装” 在布局页面中 来显示,RenderBody
只是个占位符。例如,如果点击“关于(About)”链接,Views\Home\About.cshtml
视图会在RenderBody
方法内进行Render
。
在布局模板页面内修改ActionLink
内容, 把网站标题从 “应用程序名称“ 修改为 “MVC Movie。参考上图,保存运行。
通过修改布局模板上的站点标题后缀,ActionLink
中的文本内容,修改了站点标题,站点名称,以及版权说明中的通用部分,并适配到了所有的页面。
下面来修改一下我们之前创建的Hello视图,在右侧的解决方案管理器中找到Hello/Index.cshtml
第一个代码块表示,定义当前视图使用通用布局,我们使用@* *@
把这块代码注释掉,自己修改当前视图的布局。在这里顺带一提,VS的注释快捷键是Ctrl+E+C
,选中代码块,按下快捷键注释。
同时,我们修改下当前的页面的Title
为Movie List
以及二级标题内容如下图。此时通过路由访问Hello
,会自动参照当前的布局样式展示页面,而缺省内容会沿用默认布局。
上图中所做的修改,如给ViewBag.Title
变量的值都会传递到如图3.5所示的页面布局中,从而替换掉其中的变量实现页面内容的加载。此外还要注意Index.cshtml
视图模板中的内容是如何合并到 _Layout.cshtml
模板,从而形 成一个完整的HTML返回到客户端浏览器的。使用布局模板页面,可以很容易进行一个 修改并应用到所有页面
对视图的介绍就是这样,下面开始接触MVC中的M,但是在介绍模型之前,不得不说一下数据是如何从控制器传给视图的,下一篇就先解决清楚这个问题。