ASP.NET MVC 3 (一) 新的視圖引擎Razor

27 January 2011 — Written by Sky Chang

ASP.NET MVC 3 強化了許多的功能，其中一個就是新的視圖引擎Razor。

Razor有許多的特色，例如:

其中Unit Test的部分，未來再來解說吧，

現在，來看看Razor是怎樣子的吧。

首先，寫程式最基本最基本要會的就是註解。

Razor的註解也很簡單，只要使用@* *@包起來就可以。

@* 這是簡單的Hello Razor*@
<p>Hello Razor</p>

接下來，還記得ASP.NET MVC 2之前的ASPX視圖引擎是怎樣寫的嗎?

我們先看一下ASP.NET MVC時使用的。

<p>Hello <%=name%><p>

到了ASP.NET MVC 2時我們可以改寫成這樣。

<p>Hello <%:name%><p>

使用<%:%>來將輸出的文字編碼，以防遭受到攻擊。

而Razor就很簡單了，如下

<p>Hello @name<p>

沒錯，就是那麼的簡單，只要在@後面接變數，就會自動輸出變數內容。

另外，當初在寫ASPX視圖時，遇到最大的問題，就是一堆的<%%>

不但礙眼，又難看，現在Razor可以使用{}來替代。

<ol>
@foreach(var c in customers){
  <li>@c.name</li>
}
</ol>

變的超級簡潔！！甚至還可以這樣用

<p>
@{
string name = "Razor";
string message = "Hello " + name;
if(name == "Razor")
{
  @message
}else
{
  @:Error
}
}</p>

這時可能會看到一個比較特別的@:符號，

他的用途有點像跳脫字元，如上面的程式碼，在p標籤裡面包了if判斷式，

如果沒有加上@:，在IDE就會出現錯誤，因為IDE會判斷這是一個變數，

當執行時，當然也會出錯，因為編譯器也會認定他是一個變數。

所以我們要加上一個@:，告訴編譯器，其實Error只是單純的一個文字而已。

那如果有很多行的文字呢?例如:

@{
  @:Test1
  @:Test2
  @:Test3
}

也很簡單，只要加上Razor特定的Text標籤，就不用打一堆@:

@{
  <text>
  Test1
  Test2
  Test3
  </text>
}

當然，也可很複雜的混搭，但這樣就失去了Razor簡單明瞭的意義了。

<p>
@{
  <text>
  @{
    string test2 = "2";
    <text>
    test1
    @test2
    </text>
  }
  </text>
}
</p>

另外是單行，也可以寫成這樣。

<p>@("Hello" + name)</p>

當然，既然能處理變數了，基本的物件與方法也可以直接叫用。

<p>Now : @DateTime.Now</p>

就如前面所說的，Razor視圖引擎和aspx比較起來，非常的乾淨，

也很容易去閱讀，但不代表說，所有的邏輯就可以直接放在這裡處理，

這裡要處理的應該是視圖邏輯，這要注意喔!

參考資料