【ASP.NET MVC系列】详解View
本篇文章内容属于ASP.NET MVC系列视图篇,主要讲解View,大致内容如下:
1.Views文件夹讲解
2.View种类
3.Razor语法
4.对视图的基本操作
一 Views文件夹
(一) Views文件夹下常用文件种类
分析:
1.ASP.NET MVC页面基本被放在Views文件夹下;
2.利用APS.NET MVC模板生成框架,Views文件夹下的默认页面为.cshtml页面;
3.ASP.NET MVC默认页面为Razor格式的页面,因此默认页面为.cshtml页面;
4.ASP.NET MVC中,支持WebForm页面,即.aspx页面;
5.ASP.NET MVC中,支持静态html页面;
(二) 默认Views文件夹包含内容
分析:
1.这里没添加Account控制器;
2).默认约定:在Controllers新增一个控制器,就会默认地在Views文件夹下新增一个视图问价,用来存放该控制器添加的视图,如上图中增加Home控制器,
在Views下就自动新增加Home文件,用来存放是Home控制器视图;
二 视图种类
(一) 起始视图——_ViewStart.cshtml
分析:
1.打开_ViewStart.cshtml文件,我们发现该文件是引用Shared文件夹下的_Layout.cshtml文件,_Layout.cshtml是什么文件?布局页,稍后将分析;
2.我们来做如下动作
(1)将_ViewStart.cshtml内容注释掉,且添加一个div内容
(2)添加控制器_ViewStartDemoController和Index.cshtml视图
(3)运行程序,访问视图:http://localhost:2016/_ViewStartDemo/Index
分析:
查看html
(二)布局视图
如上,我们分析了_VeiwStart.cshtml文件,我们发现里面有一段代码
1
2
3
|
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } |
不理解这局话不要紧,它采用的Razor语法格式,将稍后与大家分享Razor,但我们看到了_Layout.cshtml文件,该文件即是Views文件夹下,Shared文件夹下的_Layout.cshtml视图
1.查看_Layout.cshtml视图
分析:
(1)_Layout.cshtml基本结构就是HTML基本结构(其实,.aspx和.cshtml结构,均是html结构);
(2)我们发现在<body></body>区域,有两个后台代码:@RenderBody()和@RenderSection()。@RenderBody()表示视图体,@RenderSection()表示部分视图和节点;
(3)我们将程序运行起来,看看
分析:
(1)我们发现最终呈现的页面由两部分组成:Layout.cshtml页面(由_ViewStart.cshtml页面引用_Layout.cshtml页面实现)和Home控制器下的Index页面;
(2)_Layout.cshtml到底是什么?布局页,相当于WebForm的模板页面;
(3)下面我们来定义一个模板页
(三)强类型视图
何为“强类型视图”?Controller向View传递少量数据,一般情况,我们可以归为两大类别:弱类别传递(ViewBag,ViewData,TempData)和强类别传递(强类型视图)。然而,在实际操作中,当涉及大量数据时,
弱类别就显得不是那么方便,此时,一般采用强类型视图。强类型视图一般由三部分构成,即控制器层,视图层和模型层,三者之间调用关系可表示为:
1.创建一个强类型视图
(1)在Model文件夹添加一个UserInfo类
1
2
3
4
5
|
public class UserInfo { string UserName { get ; set ; } string UserAddress { get ; set ; } } |
(2)在控制器PartialViewDemo中添加一个方法QiangLeiXing(),并添加视图
(3)强类型视图分析
使用强类型视图,从控制器向视图传递一个在两端都是强类型的模型对象,从那个人获得智能感知、编译检查等好处。在Controller方法中,可以通过向重载的View方法中传递模型实例来指定模型。
1
2
3
4
5
6
7
8
9
10
|
public ActionResult QiangLeiXingView() { List<UserInfo> List_UserInfo = new List<UserInfo>(); for ( int i = 0; i < 2; i++) { List_UserInfo.Add( new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" + (i++) }); } ViewBag.List_UserInfo = List_UserInfo; return View(List_UserInfo); } |
下一步是告知视图哪种类型的模型正在使用@model声明。注意,这里需要输入模型的完全限定名(名称空间和类型名称)
1
|
@model IEnumerable<ViewDemo.Models.UserInfo> |
对应View
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
@model IEnumerable< ViewDemo.Models.UserInfo > @{ Layout = null; } <! DOCTYPE html> < html > < head > < meta name="viewport" content="width=device-width" /> < title >QiangLeiXingView</ title > </ head > < body > < div > < ul > @foreach(ViewDemo.Models.UserInfo V_UserInfo in Model) { @V_UserInfo.UserName @V_UserInfo.UserAddress < br /> } </ ul > </ div > </ body > </ html > |
当然你也可以采用如下限定
1
2
|
@ using ViewDemo.Models @model IEnumerable<UserInfo> |
对应的View
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
@using ViewDemo.Models @model IEnumerable< UserInfo > @{ Layout = null; } <! DOCTYPE html> < html > < head > < meta name="viewport" content="width=device-width" /> < title >QiangLeiXingView</ title > </ head > < body > < div > < ul > @foreach(UserInfo V_UserInfo in Model) { @V_UserInfo.UserName @V_UserInfo.UserAddress < br /> } </ ul > </ div > </ body > </ html > |
2.关于Controller和View之间传值,请参考我的另一篇文章:【ASP.NET MVC】View与Controller之间传递数据
由于本篇文章关于页面之间传值讲得比较详细,因此这里就不分析了。
3.我们来分析一下,为什么使用弱型别来传递不是很方便的原因
关于这个例子,只举例ViewBag(ViewData和TempData差不多原理)
(1)在控制器PartialViewDemo中添加方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/// <summary> /// 弱类型视图,使用ViewBag来传递数据 /// </summary> /// <returns></returns> public ActionResult RuoLeiXingView() { List<UserInfo> List_UserInfo = new List<UserInfo>(); for ( int i = 0; i < 2; i++) { List_UserInfo.Add( new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" }); } ViewBag.List_UserInfo = List_UserInfo; return View(); } |
(2)在视图中接收数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@{ Layout = null; } <! DOCTYPE html> < html > < head > < meta name="viewport" content="width=device-width" /> < title >RuoLeiXingView</ title > </ head > < body > < div > @foreach(ViewDemo.Models.UserInfo V_UserInfo in (ViewBag.List_UserInfo as IEnumerable< ViewDemo.Models.UserInfo >)) { @V_UserInfo.UserName @V_UserInfo.UserAddress < br /> } </ div > </ body > </ html > |
我们发现在枚举之前,需要将动态的ViewBag.List_UserInf 转化为IEnumerable<UserInfo>类型,比较麻烦,当然,你可以使用Dynamic代替
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<! DOCTYPE html> < html > < head > < meta name="viewport" content="width=device-width" /> < title >RuoLeiXingView</ title > </ head > < body > < div > @foreach(dynamic D_UserInfo in ViewBag.List_UserInfo) { @D_UserInfo.UserName @D_UserInfo.UserAddress < br /> } </ div > </ body > </ html > |
使用Dynamic似乎方便了许多,但细心的你可能已经发现,变量没有了智能感应功能。
到此,大家应该明白了ViewBag的不方便性了,当然,细心的你又会发现,强类型视图,刚好具备如上两个优势。
(四)部分视图
何为“分布视图”?在WebForm开发中,我们经常用到用户自定义控件,其作用是提高代码的复用性,减少代码的冗余,使程序更加模块化,那么,在ASP.NET MVC中,对应地引入了基于Razor结构的分布页,其作用与
WebForm开发中的用户自定义控件差不多。
1. 创建分布页
我们在/Views/Shared文件夹下创建一个分布页_PartialPageDemo.cshtml,并向该页面中添加一段代码:
1
|
< h1 style="color:red">我是分布页</ h1 > |
创建过程如下:
2.调用分布页
(1) 添加控制器PartialViewDemo和视图Index.cshtml
(2)在Index.cshtml页面中调用_PartialPageDemo.cshtml
3.调用分布页的几种方式
方式一:
1
|
@Html.Partial() |
方式二:
1
|
@Html.Action() |
方式三:
通过Ajax方式调用;
三 Razor语法
Razor视图引擎是ASP.NET MVC3中新扩展的内容,并且也是他的默认视图引擎,其设计理念是:简单直观。Razor视图引擎可分为MVC和WebForm视图引擎,基于篇幅限制,本文只分析MVC Razor视图引擎。Razor中的核心转
换符"@",代表:标记-代码或代码-标记的意思。一般有两种基本转换,即代码表达式和代码块。
(一)代码表达式
1.支持隐式代码表达式求解
这个特性,在强类型视图中,体现得很明显。
1
2
3
4
5
6
7
8
9
10
|
< div > < ul > @foreach(UserInfo V_UserInfo in Model) { @V_UserInfo.UserName @V_UserInfo.UserAddress < br /> } </ ul > </ div > |
2.支持显示代码表达式
1
|
< div >1+2=@(1+2)< div > |
3.Razor十分智能,可以知道表达后面的空格字符不是一个有效的标识符,所以它可以顺畅地转回到标记语言。
4.自动识别邮件格式
会自动识别邮件,而并不是当作变量。
1
|
<div>@www.qq.com</div> |
5.支持文本量
1
2
3
4
5
|
@{ string BlogName= "Alan_beijing" ; } <div>@BlogName.Views</div> |
这段代码回提示错误,提示string没有Views属性。
其实我们想要输出的结果:Alan_beijing.Views,但@BlogName.Views ,View被解析为BlogName的一个属性,因此出错,此时,应用字面量
1
2
3
4
5
|
@{ string BlogName= "Alan_beijing" ; } <div>@(BlogName).Views</div> |
6.支持转义字符
如我想输出:@Alan_beijing
1
|
<div>@@Alan_beijing</div> |
(二)支持HTML编码
我们知道,在防止XSS攻击时了(跨站脚本注入攻击) ,首先要做到HTML编码,Razor刚好是HTML编码的。
1
2
3
4
5
6
|
@{ string message= "<script>alert('haacked!')</script>" ; } <span>@message<span> |
这段代码不会弹出警告框而只会呈现编码的HTML
1
|
< span >&alt;script>alert('haacked!');&alt;/script></ span > |
这里不论述这个,后在【ASP.NET MVC系列】的后续篇幅中,专门讲解。
(三) 代码块
这个大家应该用的比较多,foreach
1
2
3
4
5
6
7
8
9
10
|
< div > < ul > @foreach(UserInfo V_UserInfo in Model) { @V_UserInfo.UserName @V_UserInfo.UserAddress < br /> } </ ul > </ div > |
四 对视图的基本操作
ASP.NET MVC 提供的模板中,当创建View时,提供了六种模型,分别为Create,Delete,Detail,Edit,Empty,Empty(不具有模型),List。基于该模型,我们可以轻松地创建具体实体的增删改查。由于比较简单,本例只
简单结合UserInfo实体演示Create,其他操作,请读者自行操作,原理思路一样,这里不一 一论述。
我们创建一个基础UserInfo实体的Create
测试结果
四 参考文献
【01】【01】ASP.NET MVC5 高级编程(Jon Galloway,Brad Wilson,K.Scott Allen,David Matson ,孙远帅 译)
【02】APS.NET MVC4
【ASP.NET MVC系列】详解View的更多相关文章
- Asp.Net Mvc 控制器详解
理解控制器 控制器的角色 (1)中转作用:控制器通过前面的学习大家应该知道它是一个承上启下的作用,根据用户输入,执行响应行为(动 作方法),同时在行为中调用模型的业务逻辑,返回给用户结果(视图). ( ...
- asp.net MVC ViewData详解
转自:http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html 控制器向视图中传值ViewData详解 1.将一个字符串传值到视图中 ...
- ASP.NET MVC Route详解
在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎.Razor在减少代码冗余.增 ...
- asp.net Mvc 路由详解,非常详细.
关于路由的理解 为什么要定义路由?路由的定义在开发中的工作量非常小,但是非常重要,因为任何请求都离不开路由. 各个电商网站的 URL 使用非常灵活,都离不开路由的定义,请大家参考几家电商的 URL 如 ...
- ASP.NET MVC 过滤器详解
http://www.fwqtg.net/asp-net-mvc-%E8%BF%87%E6%BB%A4%E5%99%A8%E8%AF%A6%E8%A7%A3.html 我经历了过滤器的苦难,我想到了还 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 控制器
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 路由
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【.NET特供-第三季】ASP.NET MVC系列:MVC与三层图形对照(颠覆性理论)
在[.NET特供-第三季]系列博客中的第一篇<ASP.NET MVC系列:MVC与三层图形对照>发表之后,引起了领导的注意.同一时候,开发小组内部在交流MVC和三层之间关系的 ...
随机推荐
- 【最小割】BZOJ3438-小M的作物(Rank 2???!!!)(含新款Dinic模板)
一开始被T掉了之后,才害怕地发现之前写的Dinic基本上都是错的??!!!正确的写在注释里了,注意一下(;3<)馬鹿やろ 一个丧心病狂的优化前后效率对比:
- 1.4(SQL学习笔记)分组、子查询、联结、组合查询
一.分组 建表及数据填充语句下载:链接: https://pan.baidu.com/s/1WHYafwqKJEKq1kDwCH_Zlg 提取码: 3wy4 1.1初识分组 分组是按照某一列,将该列中 ...
- boost_1.63.0编译VS2013
编译 boost 库的步骤: 从官网下载最新版本的 boost 库(目前最新版本为:boost_1_63_0):下载地址:http://www.boost.org/users/download/ 解压 ...
- [转]Syntax error on token "Invalid Character", delete this token 的解决
原文 http://blog.csdn.net/actsai/article/details/24256987 主题 Eclipse Unicode Java eclipse 中遇到了Syntax ...
- Codeforces Round #127 (Div. 1) B. Guess That Car! 扫描线
B. Guess That Car! 题目连接: http://codeforces.com/contest/201/problem/B Description A widely known amon ...
- <摘录>Linux 环境下编译 0.11版本内核 kernel
系统环境:Fedora 13 + gcc-4.4.5 最近在看<linux内核0.11完全注释>一书,由于书中涉及汇编语言的地方众多,本人在大学时汇编语言学得一塌糊涂,所以实在看不下去了, ...
- new placement 的使用
#include <iostream> #include "TModel.h" int main() { ]; std::cout<<"Sourc ...
- mybatis查询日期时间数据得到long类型数据的问题
使用mybatis查询数据时,如果数据库存储的是timestamp.datetime.date.time等时间类型,而Java bean也使用的是date类型,mybatis会自动将date类型转换为 ...
- HTTP 错误 404.0 - Not Found 您要找的资源已被删除、已更名或暂时不可用。
现象:打开一个页面,一直报404异常,但是文件是存在的,打开同一目录下的其它文件都没问题,改文件名也不行,始终找不到原因 解决方案:404异常是一个幌子,实际异常是页面读取了null值,应该报空引用, ...
- Tomcat之内存、并发、缓存方面优化方法
一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS ...