ASP.NET MVC 3 Razor 视图引擎 基本语法

本篇博文将进入MVC 3 的世界了，首先学习一下MVC 3 新增的Razor视图引擎的基本语法。

1. 使用 @ 字符将代码添加到页面中。正如传统的aspx视图的<% %>相同。

    下面代码是介绍单语句块、内嵌代码块、多行语句块

 1 <!-- 简单块 声明两个变量-->
 2 @{int num = 10;}
 3 @{string str = "hello cnblogs";}
 4 <!-- 内联表达式 输入刚才声明的两个变量-->
 5 <p>刚才声明的整形的值为： @num</p>
 6 <p>刚才声明的字符型的值为： @str</p>
 7
 8 <!-- 多声明代码块 -->
 9 @{
10     string strHello = "您好，我叫李亮";
11     string now = DateTime.Now.ToString();
12     string sayHello = strHello + "当前时间为：" + now;
13  }
14  <p>问好: @sayHello</p>

运行效果如下：

如果我要是在输出的文本中加入html标记呢？

string sayHello = strHello + "<b>当前时间为：</b>" + now;

和上面的代码唯一不同的是在“当前时间为：”几个字的首尾加了<b></b>，大家都知道b标记是加粗文本显示的，那么好咱先看下运行结果。



    运行结果为：

“问好：您好，我叫李亮<b>当前时间为</b>：2012-5-25 18:03:21”

和想象的不一样哎，没关系！到这咱得引入一个新的概念html编码。asp.net为了安全考虑会默认的把诸如<  > . @ 等等特殊的字符编码。为什么要这么干就是为了防止SSH跨站脚本攻击，您感兴趣的话可以搜一下有关跨站脚本攻击的知识，今天本文的重点不是讲它。从浏览器的html源中可以看出，那源是什么呢？

     <p>问好: 您好，我叫李亮&lt;b&gt;当前时间为：&lt;/b&gt;2012-5-26 18:25:49</p>

可以很明显的看出<b>被编码成&lt;b&gt;  <b/>被编码成：&lt;/b&gt; 因此呈现在页面中就是刚才那个结果了。

问题来了，结果办法呢？？再往下看

 <p>问好: @Html.Raw(sayHello)</p>

@Html.Raw()  防止自动编码^^^^^^^

2. 代码和标记混合

 @for (int i = 0; i <= 10; i++) {
    <span>第 @i 行<br /></span>
 }

运行结果：

大家有没有发现一个问题：就是在第和数字以及数字和行字之间必须有空格，这是因为@字符前面是空字符的时候编译器才能识别@符号后面的代码是C#代码，同理C#完事后也必须跟的是空字符，否则就本例而言它就默认识别为@i行 既 i行这个变量（因为编译器找不到这个变量所以报错。） O(∩_∩)O~。那如果我非得输出没有空格的字符串怎么办呢？告诉您非常好吧只需要一对括弧就搞定。

 @for (int i = 0; i <= 10; i++) {
    <span>第@(i)行<br /></span>
 }

运行结果自己猜吧！如果您这也猜不到的话，(*^__^*) 嘻嘻…… 不说了 - -/

3.代码与纯文本混合

 <p>第一种方式</p>
 @if (true) {
    <text>这里是if语句内部-1</text>
 }
 <p>第二种方式</p>
 @if (true) {
    @:这里是if语句内部-2
 }

3.1 第一种方式是使用了Razor中内置的标签<text></text>注意这不是html标签，他的映射到浏览器上的时候就是纯文本显示没有任何的标记。

3.2 第二种方式是使用@:  他就表示后面的东东就是文本了。

运行效果：

另附html源文件：证明text标签额并非html标签

 <p>第一种方式</p>
    这里是if语句内部-1
 <p>第二种方式</p>
    这里是if语句内部-2

4. 表达式与文本混合

 <p>表达式与文本混合</p>
 Hello @strHello .当前时间： @now

此种方式很简单不做太多解释，知识点是确保@字符前面是空字符 然后表单式结尾也是空字符即可。

运行结果

5. Email地址和@符号

 <p>Email地址</p>
 wlit2011@126.com

Razor视图会自动识别email地址，而不需要进行特殊的处理，但是我就单单的输出一个@字符怎么办呢？您说怎么办啊学这么多年程序了，还能怎么办反转义呗！

     反转义的方法是加前面在加一个@字符既您写两个@字符  @@ 就就识别成一个@字符。

<p>我要输出强大的@@符号</p>

运行结果

6.刚才要输出的实例超出了页面范围所以我想临时把前面的演示代码注释掉，好下面讲怎么注释

服务器端注释是对代码的注释它不同于客户端注释(<!-- -->),客户端的注释代码会被发送到浏览器虽在界面上看不到，但是查看源文件会看到滴。相反服务器端注释不会被发送到浏览器。起到对代码注释的效果，看下以下的代码也正好回顾下以上将的知识。

 1 <h2>RazorTest</h2>
 2 @*
 3 <!-- 简单块 声明两个变量-->
 4 @{int num = 10;}
 5 @{string str = "hello cnblogs";}
 6 <!-- 内联表达式 输入刚才声明的两个变量-->
 7 <p>刚才声明的整形的值为： @num</p>
 8 <p>刚才声明的字符型的值为： @str</p>
 9
10 <!-- 多声明代码块 -->
11 @{
12     string strHello = "您好，我叫李亮";
13     string now = DateTime.Now.ToString();
14     string sayHello = strHello + "<b>当前时间为：</b>" + now;
15  }
16  <p>问好: @Html.Raw(sayHello)</p>
17
18  @for (int i = 0; i <= 10; i++) {
19     <span>第@(i)行<br /></span>
20  }
21
22  <p>第一种方式</p>
23  @if (true) {
24     <text>这里是if语句内部-1</text>
25  }
26  <p>第二种方式</p>
27  @if (true) {
28     @:这里是if语句内部-2
29  }
30  <p>表达式与文本混合</p>
31  Hello @strHello .当前时间： @now
32  *@
33  <p>Email地址</p>
34  wlit2011@126.com
35
36 <p>我要输出强大的@@符号</p>

从第2行的@*（服务端注释开始标记）一直到第32行的*@（服务端注释结束标记）中间即为注释内容，输出结果即为第5.Email地址和@符号的输出结果。

格式：@* 注释内容 *@  非常类似于C#的多行注释方式（/*    */）

7.内容中混合代码

好好的看下下面这些代码是对以上知识的综合应用

<p>内容中混合代码</p>
<ul>
 @for (int i = 0; i <= 10; i++) {
    <li>
        当前循环到第@(i+1)次
        @if (i == 5) {
            @:哇塞！遍历到数字5了
        }
        else if (i == 9) {
            @:亲这是循环倒数第二次也就是第@(i+1)次哟！
        }
    </li>
 }
 </ul>

运行结果