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

評論 (44) -

cours de theatre paris
cours de theatre paris United States
2017/9/30 上午 09:22:57 #

Awesome blog post.Really looking forward to read more. Much obliged.

回覆

can ho osimi
can ho osimi United States
2017/10/6 下午 11:14:44 #

I cannot thank you enough for the blog article.Really thank you! Fantastic.

回覆

buy hacklinks
buy hacklinks United States
2017/10/9 下午 01:10:02 #

Thanks so much for the article post.Really thank you! Awesome.

回覆

sklep z lekami na potencje
sklep z lekami na potencje United States
2017/10/9 下午 02:47:38 #

I cannot thank you enough for the blog article.Thanks Again. Keep writing.

回覆

Osimi seaview
Osimi seaview United States
2017/10/9 下午 05:04:40 #

Really enjoyed this article post. Really Great.

回覆

solarmovie
solarmovie United States
2017/10/10 下午 06:52:50 #

Thanks again for the article post.Really thank you! Want more.

回覆

Nathan Coombe
Nathan Coombe United States
2017/10/10 下午 08:59:28 #

I am so grateful for your blog post.Much thanks again. Really Cool.

回覆

pirater un compte facebook
pirater un compte facebook United States
2017/10/10 下午 11:18:15 #

Im thankful for the article post.Really looking forward to read more. Want more.

回覆

Google cheat 2017
Google cheat 2017 United States
2017/10/12 下午 07:42:57 #

Really informative blog article.Thanks Again.

回覆

her response
her response United States
2017/10/14 下午 02:22:50 #

Really enjoyed this article.Really thank you! Much obliged.

回覆

omega xl review
omega xl review United States
2017/10/15 下午 07:07:17 #

Really enjoyed this article. Much obliged.

回覆

browse around here
browse around here United States
2017/10/17 下午 01:42:04 #

I truly appreciate this blog post.Really thank you! Want more.

回覆

sletrokor
sletrokor United States
2017/10/17 下午 07:14:58 #

I appreciate you sharing this blog post. Keep writing.

回覆

The Avila 2
The Avila 2 United States
2017/10/19 上午 04:37:33 #

Really informative article post.Really thank you!

回覆

VigRx Plus
VigRx Plus United States
2017/10/19 上午 06:18:01 #

Really appreciate you sharing this post.Thanks Again. Fantastic.

回覆

see this website
see this website United States
2017/10/19 下午 05:05:21 #

wow, awesome post.Really looking forward to read more. Great.

回覆

pure slim 1000 review
pure slim 1000 review United States
2017/10/20 上午 02:36:05 #

Major thankies for the article. Really Cool.

回覆

vung tau melody
vung tau melody United States
2017/10/21 上午 02:15:50 #

I really liked your post. Want more.

回覆

prix carte grise
prix carte grise United States
2017/10/21 上午 05:55:31 #

Very good article.Really looking forward to read more. Keep writing.

回覆

elakekassa
elakekassa United States
2017/10/21 下午 04:20:12 #

Thanks for sharing, this is a fantastic blog article.Really looking forward to read more. Great.

回覆

website designing company in Delhi India
website designing company in Delhi India United States
2017/10/24 上午 08:29:04 #

Thanks-a-mundo for the blog.Really thank you! Great.

回覆

Osimi Sea View
Osimi Sea View United States
2017/10/28 上午 08:47:16 #

Looking forward to reading more. Great post. Much obliged.

回覆

EZ Battery Reconditioning Scam
EZ Battery Reconditioning Scam United States
2017/10/30 上午 07:40:27 #

I think this is a real great blog post.Really looking forward to read more. Great.

回覆

plock
plock United States
2017/10/30 下午 03:26:05 #

I truly appreciate this post.Really thank you! Great.

回覆

phenocal
phenocal United States
2017/11/1 下午 03:17:32 #

Really informative article post.Much thanks again. Much obliged.

回覆

phentaslim
phentaslim United States
2017/11/3 上午 07:16:35 #

Thank you for your blog article.Really looking forward to read more. Keep writing.

回覆

spinal stenosis treatment alternative
spinal stenosis treatment alternative United States
2017/11/15 上午 07:35:26 #

Hey, thanks for the article post.Really looking forward to read more. Great.

回覆

avocat quebec
avocat quebec United States
2017/11/16 下午 06:10:47 #

wow, awesome blog post.Really thank you!

回覆

Thank you ever so for you blog post.Thanks Again. Will read on...

回覆

define linked list in data structure
define linked list in data structure United States
2017/11/22 上午 02:49:46 #

Fantastic article.Thanks Again.

回覆

bikinis
bikinis United States
2017/11/23 下午 09:38:35 #

Very informative blog.Much thanks again. Fantastic.

回覆

Search Engine Marketing Nz
Search Engine Marketing Nz United States
2017/11/25 下午 06:36:08 #

I value the article post.Really looking forward to read more. Great.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 05:46:06 #

Enjoyed every bit of your blog post.Really thank you! Want more.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/26 下午 11:50:48 #

A big thank you for your article.Thanks Again. Cool.

回覆

truck wreckers scammer
truck wreckers scammer United States
2017/11/29 下午 04:12:32 #

Really appreciate you sharing this blog. Want more.

回覆

Opal Skyview
Opal Skyview United States
2017/11/29 下午 10:48:16 #

Say, you got a nice article. Really Cool.

回覆

Build Business Credit
Build Business Credit United States
2017/12/1 上午 12:38:11 #

Really appreciate you sharing this post.Really looking forward to read more. Will read on...

回覆

porno
porno United States
2017/12/1 下午 04:17:45 #

Very good blog.Much thanks again. Keep writing.

回覆

small business loans
small business loans United States
2017/12/3 上午 04:36:51 #

Thank you for your post.Thanks Again. Will read on...

回覆

mika tan
mika tan United States
2017/12/5 上午 09:23:45 #

Great, thanks for sharing this post.Thanks Again.

回覆

Enjoyed every bit of your blog article.Thanks Again. Awesome.

回覆

I loved your article.Really looking forward to read more. Cool.

回覆

lawyer home
lawyer home United States
2017/12/10 下午 07:01:19 #

Enjoyed every bit of your blog.Really looking forward to read more. Awesome.

回覆

新增評論




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






NET Magazine國際中文電子雜誌

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