在錯誤中學習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。


留言

這個網誌中的熱門文章

CPE 一顆星選集題目說明與解答 - Java 筆記與心得分享

Visual Studio 自動排版格式化程式碼

1. Vito's family (CPE10406, UVA10041) - CPE一顆星解答與說明