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

1. 使用 @ 字符将代码添加到页面中。正如传统的aspx视图的<% %>相同。
    下面代码是介绍单语句块、内嵌代码块、多行语句块

<!-- 简单块 声明两个变量-->

 @{int num = 10;}

 @{string str = "hello cnblogs";}

 <!-- 内联表达式 输入刚才声明的两个变量-->

 <p>刚才声明的整形的值为： @num</p>

 <p>刚才声明的字符型的值为： @str</p>

 

 <!-- 多声明代码块 -->

 @{

     string strHello = "您好，我叫李亮";

     string now = DateTime.Now.ToString();

     string sayHello = strHello + "当前时间为：" + now;

  }

  <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>

 }

 

 @for (int i = 0; i <= 10; i++) { 

    <span>第 @i 行<br /></span>

 }

 

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

3.代码与纯文本混合

 <p>第一种方式</p>

 @if (true) { 

    <text>这里是if语句内部-1</text>

 }

 <p>第二种方式</p>

 @if (true) { 

    @:这里是if语句内部-2

 }

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

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

 

5. Email地址和@符号

 <p>Email地址</p>

 [email protected]

 

     Razor视图会自动识别email地址，而不需要进行特殊的处理，但是我就单单的输出一个@字符怎么办呢？——反转义！
     反转义的方法是加前面在加一个@字符既您写两个@字符  @@ 就就识别成一个@字符。

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

      服务器端注释是对代码的注释它不同于客户端注释(<!-- -->),客户端的注释代码会被发送到浏览器虽在界面上看不到，但是查看源文件会看到滴。相反服务器端注释不会被发送到浏览器。

格式：@* 注释内容 *@  非常类似于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>