ASP.NET MVC 3 Razor 視圖引擎 基本語法

 

 

 

本篇博文將進入MVC 3 的世界了，首先學習一下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>
 }

 

運行結果：

      大家有沒有發現一個問題：就是在第和數字以及數字和行字之間必須有空格，這是因為@字符前面是空字符的時候編譯器才能識別@符號后面的代碼是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>
 [e-mail]

 

     Razor視圖會自動識別email地址，而不需要進行特殊的處理，但是我就單單的輸出一個@字符怎么辦呢？您說怎么辦啊學這么多年程序了，還能怎么辦反轉義唄！
     反轉義的方法是加前面在加一個@字符既您寫兩個@字符  @@ 就就識別成一個@字符。

<p>我要輸出強大的@@符號</p>

運行結果

 

 

 

6.剛才要輸出的實例超出了頁面范圍所以我想臨時把前面的演示代碼注釋掉，好下面講怎么注釋

      服務器端注釋是對代碼的注釋它不同於客戶端注釋(<!-- -->),客戶端的注釋代碼會被發送到瀏覽器雖在界面上看不到，但是查看源文件會看到滴。相反服務器端注釋不會被發送到瀏覽器。起到對代碼注釋的效果，看下以下的代碼也正好回顧下以上將的知識。

 

<h2>RazorTest</h2>
@*
<!-- 簡單塊 聲明兩個變量-->
@{int num = 10;}
@{string str = "hello cnblogs";}
<!-- 內聯表達式 輸入剛才聲明的兩個變量-->
<p>剛才聲明的整形的值為： @num</p>
<p>剛才聲明的字符型的值為： @str</p>

<!-- 多聲明代碼塊 -->
@{
    string strHello = "您好，我叫李亮";
    string now = DateTime.Now.ToString();
    string sayHello = strHello + "<b>當前時間為：</b>" + now;
 }
 <p>問好: @Html.Raw(sayHello)</p>

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

 <p>第一種方式</p>
 @if (true) { 
    <text>這里是if語句內部-1</text>
 }
 <p>第二種方式</p>
 @if (true) { 
    @:這里是if語句內部-2
 }
 <p>表達式與文本混合</p>
 Hello @strHello .當前時間： @now
 *@
 <p>Email地址</p>
 [e-mail]

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

 

運行結果