Razor語法入門

by vivid 6. 六月 2012 01:01

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N120612501
出刊日期:2012/6/6

Razor不是一個新的程式語言,而是一個執行在伺服器端的標記式語言,以ASP.NET Framework(為.NET Framework的一部分)為基礎,專門為設計Web應用程式而發明的 。換言之,Razor是一個簡單的程式語法,可以在網頁中,撰寫於伺服器(Server)端執行的程式碼。

Razor是在2011年釋出,可以搭配Visual Studio 2010開發工具來撰寫ASP.NET MVC 3版及以上的網頁。

Razor的好處是能讓你利用更簡潔的語法來撰寫ASP.NET網頁,以一個簡單的「@」符號,讓伺服端的程式碼和用戶端的HTML標籤能夠混合一起使用。Razor的語法是以ASP.NET架構與C#為基礎而設計的,當然Visual Basic程式語言也有支援。你可以在ASP.NET 網頁中使用Razor語法,這類型的網頁附檔名為cshtml (C#,若是Visual Basic的話,附檔名為vbhtml)。

Razor類型的網頁包含兩種內容:用戶端內容(Content)與伺服端程式碼。用戶端內容包含HTML標籤、靜態文字、CSS樣式或JavaScript程式碼。

本文撰寫時使用的工具是Visual Studio 11 Beta,以ASP.NET 4.5為基礎,因此本文探討的內容在.NET Framework 4.5 與Visual Studio 11正式版上市時可能不適用。

建立支援Razor語法的網站

在Visual Studio 11 Beta 版中,當你要建立ASP.NET MVC 4 Web應用程式時,可以選擇使用Razor引擎來產生檢視(View),例如下圖所示,在Visual Studio 11 Beta先選取ASP.NET MVC 4 Web Application範本。

clip_image002

圖 1:建立ASP.NET MVC 4 Web Application。

接下來會出現「New ASP.NET MVC4 Project」對話盒,請參考下圖所示:

clip_image004

圖 2:「New ASP.NET MVC4 Project」對話盒。

若是選擇使用Web Site方式,可以直接選取支援Razor語法的範本來建立網站,目前筆者的開發工具Visual Studio 11 Beta,可以選擇使用1.0或2.0版的Razor引擎網站範本,請參考下圖所示:

clip_image006

圖 3:建立支援Razor語法的ASP.NET Web Site。

然後就可以在網站之中,新增cshtml檔案來撰寫網頁,例如下圖所示:

clip_image008

圖 4:建立支援Razor語法的網頁。

本文探討的是Razor的基本語法,因此不管你建立的是Razor 1.0或2.0類型的網站都適用。

 

伺服端程式碼區塊

Razor語法中的「@」符號用來新增程式碼到網頁(Page)。在cshtml網頁中,你可以使用以下符號來標示Razor伺服器程式碼區塊:

@{

}

 

變數宣告

在伺服端程式碼區塊之中可以宣告變數。變數宣告通常使用var關鍵字,不需要指定變數的型別,宣告變數之後必需初始化才可以使用。

宣告一個name變數,字串型別,並初始化內容為「Mary」:

 

var name = "Mary";

宣告一個數值:

 

var age = 20;

宣告日期,並利用DateTime類別的Parse方法將字串轉型成日期之後初始化birthday變數:

var birthday = DateTime.Parse("1992/1/1");

當然,您也可以明確地設定變數的型別,例如可以將上述的宣告範例改寫為以下程式所示:

string myName = "Candy";
  int myAge = 30;
  DateTime mybirthday = DateTime.Parse( "1992/1/2" );

 

型別轉換

若要將字串型別變數轉型成其它型別,可以使用As開頭的方法,例如上個例子中,要將字串轉型成DateTime,你可以改用AsDateTime方法:

 

var birthday = "1992/1/1".AsDateTime();

為防止轉型發生例外錯誤,我們看另一個例子,先使用System.Web.WebPages命名空間下StringExtensions類別的IsDateTime方法判斷字串的內容是否為合法的日期,然後再轉換成DateTime型別:

var birthdaystring = "1992/1/1";
  var birthday = default( DateTime );

  if ( birthdaystring.IsDateTime() )
  {
      birthday = birthdaystring.AsDateTime();
  }


其它常用的轉型方法:

  • AsInt:將字串轉型成數值。
  • AsBool:將字串轉型成布林值。
  • AsFloat:將字串轉型成符點數。
  • AsDecimal:將字串轉型成含小數數字的數值型別。

 

單行程式區塊

Razor的語法包含了以@符號開始的Inline Expression語法。透過Razor語法來撰寫的網頁,每一行程式使用「;」區隔,參考以範例:

@{
    var name = "Mary";
}

<div>
    你的名字: @name
</div>

範例中利用var宣告一個變數,名稱為「name」,並且設定變數的值為「Mary」。字串型別的變數值需要使用雙引號包起來,範例中在<div>標籤內則使用Inline Expression的表達方式,透過@符號直接取出name變數的值(例如範例中的「@name」)。

在Visual Studio 11 Beta撰寫網頁的過程中,開發工具還有IntelliSense支援,請參考下圖所示:

clip_image010

圖 5:IntelliSense支援。

這個範例執行的結果如下圖所示:

clip_image012

圖 6:範例執行的結果。

 

多行程式區塊

若程式區塊中包含多行程式碼,在多行的程式碼區塊中,每一行程式以「;」符號做為區隔;但使用Inline Expression時則不需要使用分號,例如以下範例程式:

@{
    var name = "Mary";
    var birthDay = DateTime.Now.ToShortDateString();
}

<div>
    你的名字: @name
    你的生日: @birthDay
</div>

範例執行結果如下圖所示:

clip_image014

圖 7:範例執行的結果。

 

@( ) 區塊

若程式碼區塊中有多個符號,可以使用「@( )」區塊,例如以下範例,@( )之中包含程式碼,將字串串接顯示:

@{
    var name = "Mary";
    var age = 20;

}
你的名字[你的年齡]: @( @name+"["+@age.ToString() +"]")


 

混用標籤與程式碼

在伺服器程式碼區塊之中,也可以混用HTML標籤、靜態文字,或程式碼。以下範例在伺服器程式碼區塊之中使用了<div>、<b>等HTML標籤;「Hello ,」靜態文字,以及「@name」程式碼:

@{
    var name = "Mary";   
   <div> Hello , <b> @name </b> </div>
}

範例執行結果如下圖所示:

clip_image016

圖 8:範例執行的結果。

若要顯示純文字,可以使用「@:」號,只要在純文字的前方加上「@:」即可,例如上例可以修改為 :

@{
    var name = "Mary";   
    @: Hello , <b> @name </b>
}

另一種表示靜態文字的做法是使用<text>標籤來識別:

@{
   
    var name = "Mary";   
    <text> Hello , <b> @name </b> </text> 
}

「@:」號比較適合在單行程式碼中標識純文字;而<text>區塊則適合在多行程式中使用,而<text>標籤中若包含了特殊符號,ASP.NET並不會將其中的內容編碼處理。

 

大小寫視為不同

在宣告變數時,大小寫視為不同。例如以下程式範例,宣告兩個name與Name的變數,它們是獨立不同的變數:

@{
    var name = "mary";
    var Name = "candy";
}
<div>
    名字一: @name   
    <br />
    名字二: @Name   
</div>

範例執行結果如下圖所示:

clip_image018

圖 9:範例執行的結果。

 

Html編碼

當你使用@符號來顯示內容,ASP.NET會自動將它進行編碼,例如將「<」與「>」符號編碼成「 &lt;」 與「&gt;」,以免解析錯誤。 例如以下程式中name變數的值包含「<Mary>」:

clip_image020

範例執行結果如下圖所示:

clip_image022

圖 10:範例執行的結果。

若利用瀏覽器的功能,檢視此網頁的原始程式碼,您可以看到「<」符號被編譯成「&lt;」;「>」符號被編譯成「&gt;」,這樣才不會跟HTML的標籤弄混而導致解析錯誤,請參考下圖所示:

clip_image024

圖 11:範例執行的結果。

若不要進行編碼,可以利用Html的Raw方法,例如延續前面的例子,將網頁改為:

@{
    var name = @"<Mary>";
}
<div>
    你的名字: @name   

    @Html.Raw( @name )
</div>

執行的結果的原始程式碼如下圖所示,下方的「<Mary>」就不編碼處理:

clip_image026

圖 12:範例執行的結果。

 

字串格式化

若字串變數中包含了特殊符號,像是「\」符號,你需要在字串前加上一個@號,例如:

@{
    var name = @"\Mary";   
}
<div>
    你的名字: @name   
</div>

範例執行結果如下圖所示:

clip_image028

圖 13:範例執行的結果。

若字串中包含了「"」號,需要重複寫兩次「""」,例如:

@{
    var name = @"""Mary""";   
}
<div>
    你的名字: @name   
</div>

範例執行結果如下圖所示:

clip_image030

圖 14:範例執行的結果。

 

註解

註解分為兩種,一種是在伺服端程式碼區塊中的註解;一種是在HTML標籤中的註解。

程式碼單行註解,使用「@*」與「*@」符號,參考以下例子:


@{
   @* var name = "Mary"; *@
}

可以改用C#語法來表示單行註解,參考以下例子,使用「//」號表示註解:

@{
          //var name = "Mary";
   }

程式碼多行註解,語法和單行相同,使用「@*」與「*@」符號:

@{
  @*
    var name = "Mary";
    var birthDay = DateTime.Now.ToShortDateString();
    *@
}

或使用C#語法來表示註解,使用「/*」與「*/」號表示註解:

@{
  /*
    var name = "Mary";
    var birthDay = DateTime.Now.ToShortDateString();
    */
}

若是在HTML標籤之中,不管單行或多行都是使用「@*」與「*@」來表示註解,例如單行註解:

@* This is comments *@

多行註解:

@*
This
is
Comments
*@  

在HTML標籤之中,可以使用HTML註解語法,利用「<!--」與「-->」符號:

<div>
    Comments
    <!-- This is comments -->
    <!--
     This is comments
     This is comments
    -->
</div>

範例執行結果如下圖所示:

clip_image032

圖 15:範例執行的結果。

不過若檢視瀏覽器收到的原始碼,你仍會看到這些註解,若是使用「@*」與「*@」符號設定的註解,在原始碼中是看不見的,請參考下圖所示:

clip_image034

圖 16:範例執行的結果。

 

if條件判斷式

若要進行條件判斷,可以使用if,例如以下範例,當目前系統時間為12點以前,印出「早安」訊息,否則印出「今天好」:

@{
    var msg = "";
   
    if ( DateTime.Now.Hour >= 12 )
    {
        msg = "早安";
    }else
    {
        msg = "今天好";
    }
}
<div>
    @msg
</div>

範例執行結果如下圖所示:

clip_image036

圖 17:範例執行的結果。

 

switch

switch可以根據一個變數做判斷,依照符合的條件,執行不同的程式碼。參考以下範例,利用DateTime.Today.DayOfWeek取得今天為一周的第幾天,然後印出名稱:

@{
    var daystring = "";
    var thedate = DateTime.Today.DayOfWeek.ToString();
    switch ( thedate )
    {
        case "Monday" :
            daystring = "星期一";
            break;
        case "Tuesday" :
            daystring = "星期二";
            break;
        case "Wednesday" :
            daystring = "星期三";
            break;
        case "Thursday" :
            daystring = "星期四";
            break;
        case "Friday" :
            daystring = "星期五";
            break;           
        default :
            daystring = "假日";
            break;
    }
}
<div>
    今天是 : @daystring
</div>

範例執行結果如下圖所示:

clip_image038

圖 18:範例執行的結果。

 

for迴圈

若程式需要重複執行,且重複執行的次數為已知,可以使用for迴圈,以下範例印出1到10,最後再印出總合。

@{
  
    var total=0;
  
     for (int i = 0; i <= 10 ; i++)
    {
            @: i=  @i.ToString(); <br />
        total += i;
    }
  
}
<div>
   1加到10總合 : @total
</div>

範例執行結果如下圖所示:

clip_image040

圖 19:範例執行的結果。

 

While

若迴圈執行的次數是跟據條件來決定的,可以使用while迴圈,以下例子印出1加到10的總合:

@{
  
    var total=0;
    var i=0;
     while ( I <= 10 )
    {
        total += i;
        i++;
    }
}
<div>
   1加到10總合 : @total
</div>

 

foreach

若要依序取得陣列或集合中的內容,可以使用foreach迴圈。以下範例宣告一個List<string>集合,然後利用foreach將集合的內容印出:

@{
    List<string> lst = new List<string>() { "A" , "B" , "C" };
    foreach ( var item in lst )
    {
        <p> 項目: @item </p>   
    }
}

範例執行結果如下圖所示:

clip_image042

圖 20:範例執行的結果。

再看另一個範例, foreach前置@號,混用HTML標籤與程式碼,將集合中的內容,以清單方塊的方式來呈現。

@{
    List<string> lst = new List<string> () { "A" , "B" , "C" };
}

<div>
    <ul>
   @foreach ( var item in lst )
    {
        <li> 項目: @item </li>   
    }
    </ul>

</div>


執行後產生的原始檔如下圖所示:

clip_image044

圖 21:範例執行的結果。

 

Templated Razor Delegates

Templated Razor Delegates是一個泛型的delegate (Func<T ,HelperResult>),這個delegate使用到一個特殊的@item參數,以下範例宣告一個Templated Razor Delegates:

@{
    Func<dynamic , object> d1 =  @<text>@item</text>;

    }

<div>
   <div> Razor Delegate: @d1( DateTime.Now ) </div>
</div>

範例中的「@<text>@item</text>」會自動轉換成Func<T ,HelperResult> delegate。參考以下執行結果,叫用delegate,傳入目前時間,@item可以取出傳入的時間,請參考下圖所示:

clip_image046

圖 22:範例執行的結果。

檢視瀏覽器收到的原始程式碼,可以看到以下結果:

clip_image048

圖 23:範例執行的結果。

使用Templated Razor Delegates的好處是,你可以將<text>標籤可以換成其它的標籤,例如換成<b>標籤:

@{
    Func<dynamic , object> d1 =  @<b>@item</b>;
    }
<div>
   <div> Razor Delegate: @d1( DateTime.Now ) </div>
</div>

執行的結果,日期資訊便以粗體字呈現,請參考下圖所示:

clip_image050

圖 24:範例執行的結果。

檢視瀏覽器收到的原始程式碼,可以看到以下結果:

clip_image052

圖 25:範例執行的結果。

 

Http動詞

一般網頁程式大多使用HTTP GET或POST動詞來執行,瀏覽器通常設計為,第一次輸入URL時,以HTTP GET來執行;後續利用Form進行Submit動作時,以HTTP POST動詞執行,範例中利用IsPost屬性判斷是否利用HTTP POST來執行,分別顯示不同的訊息:

@{
    var msg = "";
    if (IsPost)
    {
        msg = "使用HTTP POST";
    }else
    {
        msg = "使用HTTP GET";
    }
}
<div>
    <form method = "post" >
        <input id = "Submit1" type = "submit" value = "submit" />
        <br />
        @msg
    </form>    
</div>

當第一次執行這個網頁,會印出「使用HTTP GET」,請參考下圖所示:

clip_image054

圖 26:範例執行的結果。

按下submit按鈕,則印出「使用HTTP POST」,請參考下圖所示:

clip_image056

圖 27:範例執行的結果。

 

Request物件

如果想要讀取得用戶端HTTP請求相關的資訊,可以使用Request物件。例如以下程式碼片段,利用Request物件的ApplicationPath取得應用程式所在路徑。RequestType則指明使用的HTTP動詞為何;而Headers可以取得HTTP標頭資訊:

Request Application Path : @Request.ApplicationPath <br />
Request Type : @Request.RequestType <br />
Request Header :   @Request.Headers

參考執行結果如下圖所示:

clip_image058

圖 28:範例執行的結果。

 

取得Form資訊

若要取得HTML Form表單中的資訊,同樣也可以利用Request物件。參考以下範例,HTML Form中包含一個名為「Text1」的文字方塊,我們利用Request物件取得它的內容,然後串接「Hello,」字串後,顯示在畫面上:

@{
    var msg = "";
   
    if ( IsPost )
    {
        var txt = Request ["Text1"];       
        msg = "Hello," + txt;       
    }
}
<!DOCTYPE html>
<html>
<body>
    <form method = "post">
    <div>
        <input id = "Text1"  name = "Text1" type = "text" />
        <br />
        <input id = "Submit1" type = "submit" value = "submit" />
        <br />
    </div>
    </form>
    歡迎訊息: @msg
</body>
</html>

網頁一執行,執行結果如下圖所示:

clip_image060

圖 29:範例執行的結果。

在文字方塊輸入「Mary」按下submit按鈕之後,執行結果如下圖所示:

clip_image062

圖 30:範例執行的結果。

 

在網頁間傳遞資料

和一般的ASP.NET Web Form一樣,要在網頁之間傳遞資料時,可以利用查詢字串的方式。以下範例從fromPage.cshtml傳遞Text1文字方塊的資料到toPage.cshtml。fromPage.cshtml利用Request物件取得Text1文字方塊的內容,組成查詢字串,設定一個key值「msg」。fromPage.cshtml程式碼:

@{
    if ( IsPost )
    {

        Response.Redirect("toPage.cshtml?msg=" + Request.Form["Text1"]);
      
    }
  
}
<div>
    <form method = "post" >
    <input id = "Text1" name = "Text1" type = "text" />
        <input id = "Submit1" type = "submit" value = "submit" />
    </form>    
</div>

toPage.cshtml程式如下,直接利用Request.QueryString讀取msg的值:

 

<div>
接收到資料:    @Request.QueryString["msg"]
</div>


總結

Razor是一個應用在ASP.NET網站開發的程式語法,以便利用C#或Visual Basic 來設計ASP.NET網頁。Razor利用一個簡單的「@」符號來標示程式碼。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>