专栏首页漫漫全栈路ASP.NET MVC学习笔记03视图

ASP.NET MVC学习笔记03视图

早在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,选中代码块,按下快捷键注释。

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET MVC学习笔记04数据传递

    上一篇的末尾讲到了,在了解模型之前,先来看看ASP.NET MVC是如何将数据从控制器传递给视图的。 ---- 简单梳理一下: 控制器想要请求的URL,控...

    李郑
  • ASP.NET MVC学习笔记05模型与访问数据模型

    上一篇使用的M模型,并不是真正意义上的Model,现在来添加一些类,并将这些类用来管理数据库中数据(电影)。而这些类,就是ASP.NET MVC中的Model...

    李郑
  • Python爬虫学习之旅-从基础开始

    知其然,知其所以然。使用爬虫,必须要先理解爬虫的原理,先说下爬虫的基本流程和基本策略。

    李郑
  • 类视图 vs. 函数视图

    基于类的视图(CBV)和基于函数的视图(FBV)到底有什么区别? 有什么优缺点? 本篇将会去探讨。 在阅读本篇之前,请记住一点「基于类的视图不会替代基于函数的视...

    用户1416054
  • AI综述专栏 | 孙仕亮:多视图机器学习综述

    在科学研究中,从方法论上来讲,都应先见森林,再见树木。当前,人工智能科技迅猛发展,万木争荣,更应系统梳理脉络。为此,我们特别精选国内外优秀的综述论文,开辟“AI...

    用户7282388
  • 不看后悔 —— 视图详细介绍

    在MySQL中,视图可能是我们最常用的数据库对象之一了。那么你知道视图和表的区别吗?你知道创建及使用视图要注意哪些点吗?可能很多人对视图只是一知半解,想详细了解...

    MySQL技术
  • 快速学习Oracle-视图

    我们尝试着修改视图但是发现是视图所查询的表的字段值被修改了。所以我们一般不会去修改视图。

    cwl_java
  • 【DB笔试面试431】在视图上不能完成的操作是()

    视图是由从数据库的基本表中选取出来的数据组成的逻辑窗口,它不同于基本表,它是一个虚拟表,其内容由查询定义。在数据库中,存放的只是视图的定义而已,而不存放数据,这...

    小麦苗DBA宝典
  • 【DB笔试面试516】Oracle中的视图分为哪几类?

    (5)内联视图(Inline View),也叫内嵌视图、临时视图、行内视图、或内建视图,它是出现在FROM子句中的子查询,内联视图不属于数据库对象。

    小麦苗DBA宝典
  • MySQL视图操作

    视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。 通过视图,可以展现基表的部分数据;视图数据来自...

    卡二条的技术圈子

扫码关注云+社区

领取腾讯云代金券