目录
系列文章
[Asp.net MVC]Asp.net MVC5系列——第一个项目
[Asp.net MVC]Asp.net MVC5系列——添加视图
[Asp.net MVC]Asp.net MVC5系列——添加模型
[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据
[Asp.net MVC]Asp.net MVC5系列——添加数据
[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则
[Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图
概念
Razor视图引擎是Asp.net MVC3中新扩展的内容,并且也是它的默认视图引擎。还有另外一种Web Forms视图引擎。通过前面的文章可知在Asp.net mvc5中创建视图,默认使用的是Razor视图引擎。而且真正的就一种了。记得之前版本的,还可以让开发者选择是使用Razor还是webfroms视图引擎。
Razor为视图表示提供了一种精简的语法,最大限度的减少了语法和额外的字符。这样就有效的减少了语法障碍,并且在视图标记语言中也没有新的语法规则。
Razor支持两种文件类型,分别是.cshtml 和.vbhtml,其中.cshtml 的服务器代码使用了c#的语法,.vbhtml 的服务器代码使用了vb.net的语法。
Razor语法
Razor的核心转换字符是“at”符号(@)。
该字符作用
用作标记-代码的转换字符。
代码-标记的转换字符。
有两种基本类型的转换:代码表达式和代码块。求出表达式的值,然后将值写入到响应中。
代码表达式
隐式代码表达式
示例:
1 @{string strName = "wofly";} 2 <h1> Length of the boy's name is @strName.Length chars.</h1>
结果
Razor十分智能,可以知道表达式后面的空格字符不是一个有效的标识符,所以可以顺畅地回到标记语言。
显示代码表达式
Razor自动从代码转会标记的能力有时也会带来二义性,例如下面的Razor片段:
1 @{string rootNameSpace = "MyApp";} 2 <span>@rootNameSpace.Models</span>
想要输出的结果是:
<span>MyApp.Models</span>
编译时出错,提示string没有Models属性。在这种情况下,Razor不能理解我们想要干啥,而会认为@rootNameSpace是代码表达式。那么该怎么解决呢?Razor可以通过将表达式用圆括号括起来显示代码表达式:
<span>@(rootNameSpace).Models</span>
这样就告知Razor,.Models是字面量文本,而不是表达式的一部分。
@符号如何跟邮箱中的@区别呢?
例如:
<span>wolfy@163.com</span>
你会发现,形如上面的代码并没有报错,Razor是如何做到呢?
Razor采用了一个简单的算法来判别看起来像邮箱地址的字符串到底是不是一个有效的邮箱地址。虽然它并不完美,但却可以适用于大多数情况。在一些特殊情况下,有效的邮箱地址可能会显示不出来,这是可以用两个@@符号转义一个@符号。
如果,我们想要这样的字符串作为一个表达式,该怎么办?
假如,我们有这样的一个列表项:
<li>item_@item.Length</li>
这种特殊情况下,这个表达式会被解析为一个邮箱地址,所以Razor将其逐字打印。但我们想要的结果是:
<li>item_3</li>
所以遇到这种情况,我们仍可以使用圆括号指明想要的内容。
<li>item_@(item.Length)</li>
如果想输出@开头的字符,可以使用@@转义@字符。
HTML编码
在很多情况下需要用视图显示用户的输入,例如一些网站的评论功能。所以总是存在潜在的跨站脚本注入攻击(XSS)。这些,Razor也替我们想到了,Razor表达式是用HTML自动编码的。
1 @{string strAlert = "<script>alert('警告');</script>";} 2 <span>@strAlert</span>
查看生成的html,你会发现对标签进行了html编码:
<span><script>alert('警告');</script></span>
页面显示
无编码代码表达式
如果我们确实想让浏览器解析成html标签,就需要返回一个System.Web.IHtmlString对象的实例,这种情况下Razor并不对它进行编码。例如html辅助类。同样我们可以使用Html.Raw方法。
1 @{string strAlert = "<script>alert('警告');</script>";} 2 <span>@Html.Raw(strAlert)</span>
此时浏览该视图,就会出现弹出框。
另外需要注意,当在js中将用户提供的值赋给变量时,要使用js字符串编码而不仅仅是html编码。也就是要是用@Ajax.JavaScriptStringEncode方法对用户输入进行编码。
代码块
代码块是简单的执行代码部分。
例如
1 @{ 2 int x = 123; 3 string y = "wofly"; 4 }
上面代码块定义变量int类型的x和字符串类型y,如果想输出它们,则可以使用@x和@y。
文本和标签混合使用
1 @foreach (var item in models) {
2 <span>@item.Name</span> 3 }
混合代码和纯本文
1 @if (true) 2 { 3 <text>这是文本</text> 4 }
服务器端的注释可以使用@**@对不想要的代码进行注释。
@*@if (true) { <text>这是文本</text> }*@
调用泛型方法
1 @(Html.SomeMethod<T>())
总结
这里简单的介绍了Razor的两种基本类型:代码表达式和代码块。语法没有想的那么难。关键在于@字符。