asp.net mvc3 Razor引擎中@使用规则小记

　　项目中前台用的是asp.net mvc3，Razor引擎（关于Razor的介绍可以参考：http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx），深深体验到了Razor引擎的方便强大。但在编码过程中也遇到了一些问题，就是Razor的@标记，这个标记到底什么时候该加什么时候不该加呢？

　　先看一段代码（只是为了说明问题用，没任何意义）吧：

代码一：

<div>
    for(int i=0;i<3;i++)
    {
        </div>i<div>
        for(int j=0;j<3;j++)
        {
            if(j==1)
{
                <div>
                    for(int k=0;k<5;k++)
                    {
                        k++;
                        <span>
                            k
</span>
                    }
</div>
                break;
            }
        }
    }
</div>

　　这一段代码没添加任何@标记，肯定是有问题的，你能准确地判断出这段代码中哪些地方要添加@标记吗？看到这里，停几分钟，填上你的答案吧：），然后把你的答案跟下面的参考答案做个对比吧，如果你很确定地完成了并且完全正确，那么恭喜你，这个知识点你已经掌握了，下面的内容你可以直接跳过了。

　　参考答案：

<div>
    @for(int i=0;i<3;i++)
    {
        @:</div>@i<div>
        for(int j=0;j<3;j++)
        {
            if(j==1)
{
                <div>
                    @for(int k=0;k<5;k++)
                    {
                        k++;
                        <span>
                            @k
</span>
                    }
</div>
                break;
            }
        }
    }
</div>

　　亲，做错的童鞋有木有，有木有。做错了也没什么关系啦，我之前也错了呢，这里给出一个小小的规则（自己定义的，不一定准确，如果已经有专用名词欢迎大家指出），掌握这个小规则后你就很容易做对了。

　　Razor语法中有block(块)的说法，这个大家应该都不陌生了，就是代码段，如我们可以把using(){}包起来的代码叫一个block(段/块)，block内部还可以有block，这个是可以嵌套的。比如上面的示例代码中我们可以把最外层的for循环内部的代码（第2行到第21行）是一个block，第4行是一个代码块，第二个for循环内部的代码（第5行到第20行）也可以叫一个block，划分不是固定的，粒度你可以自己定义。

　　block内部的代码分为两种，一种是HTML代码块，一种是C#（本例中为C#，也可以是其他.NET语言）代码块。有了block的概念后，Razor中@标记的规则就是：

如果同一种代码块（HTML代码块不需要加@，这里排除开）内部跟的是同类代码块，这时不需要加@标记，否则要加@标记

　　用这个规则逐一解析一下上面的代码，在解析之前我的block划分是这样的：

　　第1—22行，2—21行，第4行，5—20行，7—19行，9—17行，10—16行，12行，13—15行，14行

　　我们从里往外看，第14行外层block是HTML代码，所以第14行要加@，12行外层block也是C#代码块，因此不加，以此类推，直到第5行，这一行有点特殊，这个涉及到VS中的标签匹配。

　　我们知道VS能在编码时对HTML标签进行匹配，这个匹配只是给出警告，并不是强制的，用了Razor后，混在C#（也可以是其他语言）中的HTML标签也要进行匹配，只是这个匹配是在代码块内部进行的，同时也是野蛮的，如果不匹配就会出错，例如下面的代码是通不过的：

<div>
<tr>
    @if(true)
    {
</tr>
    }
</div>

　　错误页面：

　　改为这样就好了：

<div>
<tr>
    @if(true)
    {
<tr></tr>
    }
</div>

　　那么如果遇到像最开始那段代码</div><div>这样进行拼接的HTML怎么办呢，Razor提供了两种方案，一是在前面加上“@：”，如 @:</div><div>；一是用@Html.Raw，如：@Html.Raw("</div><div>");

　　了解了这点后代码一第4行就应该这样：@:</div>@i<div>，第4行没问题了，最后只剩第5行了，这时直接把第4行忽略，按规则写就OK了，因为第2行是C#代码块，因此第5行不需要添加@。

　　好了，写到这里只剩最后一个点了，如果把代码一中第4行改为<div>i</div>，那么第5行应该是什么样的呢？如果Razor内HTML标签是匹配的，Razor可以识别，这时可以忽略匹配的HTML标签对即可。

　　规则有时并不是万能的，极个别的还是要经过尝试，最后说个小小的技巧，可以把Razor代码背景颜色改一下，这样就能比较容易地识别了：

　　欢迎大家留言讨论，给出更优的解决方案。