2011年1月27日

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

ASP.NET MVC 3 強化了許多的功能,其中一個就是新的視圖引擎Razor。
Razor有許多的特色,例如:
  1. Razor的語法非常乾淨,不會像以前aspx一堆框框與符號。
  2. Razor的語法很簡單易學,其實也就是C#和VB。
  3. VS2010對Razor完全的支援IntelliSense和程式碼顏色。
  4. Razor還可以支援Unit Test,而不需要啟動web Server。


其中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比較起來,非常的乾淨,
也很容易去閱讀,但不代表說,所有的邏輯就可以直接放在這裡處理,
這裡要處理的應該是視圖邏輯,這要注意喔!

參考資料
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx

沒有留言:

張貼留言