asp.net mvc3 Razor引擎中@使用規則小記

　　項目中前台用的是asp.net mvc3，Razor引擎（關於Razor的介紹可以參考：http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx），深深體驗到了Razor引擎的方便強大。但在編碼過程中也遇到了一些問題，就是Razor的@標記，這個標記到底什麼時候該加什麼時候不該加呢？

　　先看一段代碼（只是為了說明問題用，沒任何意義）吧：

代碼一：

 1 <div>
 2     for(int i=0;i<3;i++)
 3     {
 4         </div>i<div>
 5         for(int j=0;j<3;j++)
 6         {
 7             if(j==1)
 8 {
 9                 <div>
10                     for(int k=0;k<5;k++)
11                     {
12                         k++;
13                         <span>
14                             k
15 </span>
16                     }
17 </div>
18                 break;
19             }
20         }
21     }
22 </div>

　　這一段代碼沒添加任何@標記，肯定是有問題的，你能準確地判斷出這段代碼中哪些地方要添加@標記嗎？看到這裡，停幾分鐘，填上你的答案吧：），然後把你的答案跟下面的參考答案做個對比吧，如果你很確定地完成了並且完全正確，那麼恭喜你，這個知識點你已經掌握了，下面的內容你可以直接跳過了。

　　參考答案：

參考答案

 1 <div>
 2     @for(int i=0;i<3;i++)
 3     {
 4         @:</div>@i<div>
 5         for(int j=0;j<3;j++)
 6         {
 7             if(j==1)
 8 {
 9                 <div>
10                     @for(int k=0;k<5;k++)
11                     {
12                         k++;
13                         <span>
14                             @k
15 </span>
16                     }
17 </div>
18                 break;
19             }
20         }
21     }
22 </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標籤也要進行匹配，只是這個匹配是在代碼塊內部進行的，同時也是野蠻的，如果不匹配就會出錯，例如下面的代碼是通不過的：

1 <div>
2 <tr>
3     @if(true)
4     {
5 </tr>
6     }
7 </div>

　　錯誤頁面：

　　改為這樣就好了：

1 <div>
2 <tr>
3     @if(true)
4     {
5 <tr></tr>
6     }
7 </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代碼背景顏色改一下，這樣就能比較容易地識別了：

　　歡迎大家留言討論，給出更優的解決方案。