楠槡

ASP.NET MVC学习笔记03视图

2017-05-12

早在ASP.NET MVC 3就引入了Razor视图引擎( Razor view engine)。Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优 雅的方式来使用C#语言创建所要输出的HTML。用Razor编写一个视图模板文件时,将 所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程。


控制器返回指定视图

当前在控制器类中的Index方法返回了一个硬编码的字符串。更改HelloController方法返回一个 View对象,如下面的示例代码:

1
2
3
4
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
index.cshtml

第一个代码块表示,定义当前视图使用通用布局,我们使用@* *@把这块代码注释掉,自己修改当前视图的布局。在这里顺带一提,VS的注释快捷键是Ctrl+E+C,选中代码块,按下快捷键注释。

同时,我们修改下当前的页面的TitleMovie List以及二级标题内容如下图。此时通过路由访问Hello,会自动参照当前的布局样式展示页面,而缺省内容会沿用默认布局。
修改视图

上图中所做的修改,如给ViewBag.Title 变量的值都会传递到如图3.5所示的页面布局中,从而替换掉其中的变量实现页面内容的加载。此外还要注意Index.cshtml视图模板中的内容是如何合并到 _Layout.cshtml模板,从而形 成一个完整的HTML返回到客户端浏览器的。使用布局模板页面,可以很容易进行一个 修改并应用到所有页面

对视图的介绍就是这样,下面开始接触MVC中的M,但是在介绍模型之前,不得不说一下数据是如何从控制器传给视图的,下一篇就先解决清楚这个问题。

Tags: dotNET
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱