一步一腳印 進入 WebMatrix 世界 (五) =>刀鋒試煉之三 Razor語法練習
這幾天忙開學，修練進度慢了下來，這幾天看了MSDN幾篇關於Razor語法介紹的文章，把一些自己的筆記重點摘錄下來：
1.Razor 語法是以 "@" 這個magic符號(蠻貼切的)為語法的標記，但是如果網頁中有電子郵件地址是否會產生混淆？
我們以下面例子為例實做一下，在WebMatrix範例站台上新增一個cshtml的檔案在<body>中加入mail@mail.com ，瀏覽測試一下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
mail@mail.com
</body>
</html>執行結果畫面
IIS會自動把它認為是電子郵件地址，因為Razor 語法在@之前有空格或一行的開頭，才會視為程式碼或值在其中，所以正常的電子郵件電址是不會被誤認為程式碼。
舉例以下mail@Page.Title與mail @Page.Title只差別在mail與@之間的空格：
@{
Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>mail @Page.Title</p>
<p>mail@Page.Title</p>
</body>
</html>執行結果
2.Razor 語法的註解，是以@*程式碼區塊*@的方式，以上為例如果把mail @Page.Title 改為 mail @*Page.Title*@
執行結果
代表Page.Title的值被註解掉了，@*程式碼區塊*@，中間的程式碼區塊可以是多行。
3.@符號後可以接單行的程式碼或值，舉例
@{
Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>mail @(3>4)</p>
<p>mail @Page.Title</p>
</body>
</html>執行的結果
其中 @(3>4) 運算傳回False，而 @Page.Title傳回"測試資料" 。
4.如果程式碼有多行，在@符號之後要以{}將程式碼區塊包在其中，舉例
@{
int x=0;
Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p> @x</p>
<p> @Page.Title</p>
</body>
</html>執行結果
5.如果我們要在多行的程式碼區塊中的某單行程式碼中加入呈現程式碼內容的文字，就必須在單行程式碼前加上'@:'。
舉例Page.Title是網頁的抬頭屬性，如果我們要在網頁一行中呈現以下內容
本頁的抬頭是: 測試資料.
@{
Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p> @{
@:本頁的抬頭是: @Page.Title.
}
</p>
</body>
</html>執行結果
6.如果要在程式區塊中加入單行或多行註解直接使用VB或C#的註解方式
以C#為例，C#單行註解是//，多行註解是/* 程式區塊 */
@{
Page.Title = "測試資料";
int x=0;
x++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p> @{
// @:本頁的抬頭是: @Page.Title.
@:x這個變數的值為: @x
}
</p>
</body>
</html>執行結果，被註解的// @:本頁的抬頭是: @Page.Title. 這一行並沒有出現。
在WebMatrix的編輯器，會自動把註解的部分用不同顏色的字體呈現，蠻方便的。
7.Razor 語法有一點我認為最棒的地方，就在html指令與script指令的混合處理，比起ASP、JSP、PHP方便多了，在以前寫PHP或PERL CGI與ASP時，如果在程式碼流程中夾雜輸出html碼，必須在程式中對於html碼進行轉換為字串處理，再用script語言的輸出函數進行輸出，在Razor中不用這樣麻煩，只要在流程中{}中，Razor 自動會分辨html碼與@符號後的程式碼，以下為例：
@{
Page.Title = "測試資料";
int x=0;
x++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p> @{
// @:本頁的抬頭是: @Page.Title.
@:x這個變數的值為: @x
}
</p>
@if((x%2)==1) {
<p>現在時間是 @DateTime.Now </p>
} else {
<p>今天是: </p> @DateTime.Now
}
</body>
</html>執行結果
8.從第7點我們可知道，我們可以很方便將程式區塊中加入html碼，這個實在太方便了，舉例來說我們要動態輸出一個表格
我們只要這樣寫即可，把這一段加入即可產生上述的結果
<table border="1">
<tr><td>座號編號 </td><td>成績 </td></tr>
@{
var countNum = 0;
while (countNum < 10) {
countNum += 1;
<tr><td>編號: @countNum </td>
<td>成績: @(countNum*10) </td></tr>
}
}
</table>
歡迎引用，請注明來源出處!