在錯誤中學習ASP.NET MVC 第 16 篇 - 認識View - Razor基本語法

 今天來認識一些Razor的基本語法，也就是很好用的**@**符號，只要在View裡面看到@就代表是Razor語法，那test@gmail.com，這也是Razor嗎？就請繼續看下去。如果一開始不知道怎麼分辨其實Visual Studio也會幫我們自動分區出來喔，例如下圖，其中被反白的地方就是Razor語法，是不是非常貼心，不用找到眼睛脫窗。

再來透過觀察/Views/Home/Index.cshtml的內容(上圖)，我們可以知道Razor語法一定是透過@符號作為起始，寫法大致上跟C#差不多，所以很快就可以上手，例如View獲得Controller使用ViewBag將傳過來的資料之後，View直接去存取ViewBag這個變數就可以了，幾乎完全不用思考，非常直覺。(Controller傳資料給View可以參考這篇)

另外在編輯View時不需要將專案偵錯停止，直接重新整理網頁就可以看到修改後的結果囉！

@*我是註解*@

撰寫註解，單行與多行都是相同方式

@@

輸出@符號

<p>@@</p> 

如果只有寫<p>@</p>會錯誤喔！

那如果要輸出email要怎麼辦，其實Razor蠻聰明的，可以直接顯示

<p>test@gmail.com</p> 

@變數名稱

讀取變數值，可呼叫物件或方法

@DateTime.Now

@( )

陳述式

@(5*3)

@{ }

程式碼區塊。可以在裡面寫C#語法，例如if、else或foreach，可以搭配codesinpet使用，例如打foreach+tab按兩次就會自動產生程式碼

@for (int i = 0; i < length; i++)
​{
}

@:

將這一行都當成文字輸出，因為再@{}內是程式碼區域，除非搭配html做輸出，否則每一行都會當成程式碼解析，如果不想搭配html輸出的話，可以使用@:

@for (int i = 0; i < 10; i++)
{
    if(i%2==0){
        @:偶數
    }
}

<text>

文字區塊

@for (int i = 0; i < 10; i++)
{
    if(i%2==0){
       <text>
        偶數
       </text>
    }
}

如果沒有加上文字區塊，會掛掉，Razor會把偶數當成程式碼解析。

Razor與html混合使用

範例一

@{
    int a=1;
    int b = 2;
   <p>total = @(a+b)</p>
}

這邊可能有會有人問為什麼@(a+b)不能直接寫成a+b就好，是因為如果與html混合使用，在html的區域裡面就會被當成是非程式區域，Razor是不會去執行的喔，所以就必須另外使用@語法

再來比較php如果要做到一樣的畫面，程式碼如下，是不是就覺得Razor語法真的簡潔XD

<?php
   $a=1;
   $b=2;
?>
<p>total=<?php echo $a+$b; ?><p>

範例二

@{
    string[] fruits = { "apple", "orange", "banana" };    
    <ul>
      @foreach (var item in fruits)
      {
        <li>@item</li>    
      }
    </ul>

    if (fruits.Length>2)
    {
        @:too much
    }
}

有發現foreach 前面也有使用@嗎，是因Razor解析程式碼時遇到<ul>時會把<ul>...</ul>當成文字，所以如果要在文字裡面使用C#語法也是要在使用@才可以，繼續觀察if (fruits.Length>2)最前面就不用使用@了，因為它是被包在@{}裡面，而foreach (var item in fruits)是包在<ul></li>裡面

範例三

@{
    var name = "mvc";  
}  
<p>@name 您好</p>

如果寫<p>@name您好</p> 會網頁錯誤，因為Razor會以為"name您好"是一個變數，所以需要使用空白隔開，但是如果不想要多一個空白，就要這樣寫

<p>@(name)您好</p>

Razor真的蠻容易上手的，不過有個前提是必須能區分清楚什麼時候是程式碼區塊，什麼時候是文字區塊，這樣才能清楚使用@符號的時機，就算誤用也沒關係，編譯時期大部分就會有紅紅的錯誤提示了。

下一篇再來講Razor中的Helper。