Asp.Net Mvc視圖引擎Razor介紹 - X-Jonney @ IT工程師數位筆記本

文章出處

1.Razor介紹

1）ASP.NET MVC3 帶來了一種新的名為Razor 的視圖引擎，提供了下列優點：

Razor 的語法簡單且清晰，只需要最小化的輸入
Razor 容易學習，語法類似于 C# 和 VB
Visual Studio 對于 Razor 提供了智能提示和語法著色
Razor 視圖不需要允許程序或者啟動 Web 服務器就可以進行測試

2）Razor 現在提供了一些新的特征：

@model 用來指定傳到視圖的 Model 類型
@* * 注釋語法
對于整個站點可以一次性設定默認項目，例如布局。
Html.Raw 方法提供了沒有進行 HTML 編碼的輸出
支持在多個視圖之間共享代碼 ( _viewstart.cshtml 或者 _viewstart.vbhtml )

3）Razor 還包含新的 HTML Helper，例如：

Chart. 生成圖表
WebGrid, 生成數據表格，支持完整的分頁和排序
Crypto，使用 Hash 算法來創建 Hash 和加鹽的口令
WebImage, 生成圖片
WebMail, 發送電子郵件

2.Razor的文件類型

　　Razor支持兩種文件類型，分別是.cshtml 和.vbhtml，其中.cshtml 的服務器代碼使用了c#的語法，.vbhtml 的服務器代碼使用了vb.net的語法。

　　由此也可以看出，Razor其實是一種服務器代碼和HTML代碼混寫的代碼模板，類似于沒有后置代碼的.aspx文件。

3.Razor語法之@符號

@字符是Razor中的一個重要符號，它被定義為Razor服務器代碼塊的開始符號。如果我們希望在網頁中輸出一個變量，或者當前日期，我們可以使用如下代碼：

@{string productName = "臺燈";}

<span>@productName</span>

<span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

當你在完成這段代碼的時候，你會發現VS 2012為我們提供了代碼著色和智能感知：

運行這段代碼，讓我們看看瀏覽器的顯示內容：

有這個示例可以看出，@符號標記了一個HTML代碼的輸出，在其后的變量、方法返回值和表達式運算結果會進行輸出。

4.Razor語法之代碼塊定義

你可以使用@{code}來定義一段代碼塊。

@{    int num1 =10;

  int num2 =5;

 int sum = num1 + num2;

@sum;}

在代碼塊中，我們編寫代碼的方式和通常服務器端代碼的方式是一樣的。另外，如果需要輸出，例如上面的在頁面中輸出結果，我們可以使用@sum完成輸出

另外，@(code)可以輸出一個表達式的運算結果，上面的代碼我們也可以寫成這樣：

@{

int num1 =10;

int num2 =5;

int sum = num1 + num2;

@(num1 +num2);

5.Razor語法之代碼混寫

Razor支持代碼混寫。在代碼塊中插入HTML、在HTML中插入Razor語句都是可以的。

@{

int num1 =10;

int num2 =5;

int sum = num1 + num2;

string color ="Red";

<font color="@color">@sum</font>

值得稱贊的是，即使我們這樣混寫，也不影響VS2012的智能感知功能。

輸出@符號：@@
輸出Email地址：Razor模板會自動識別出Email地址，所以不需要我們進行任何的轉換。而在代碼塊中，只需要使用 @:Tom@gmail.com 即可。@:表示后面的內容為文本。
輸出HTML代碼（包含標簽）：直接輸出，string html = "文本"; @html
輸出HTML內容（不包含標簽）：有兩種方法，第一種：IHtmlString html=new HtmlString("文本"); @html; 第二種：string html = "文本"; @Html.Raw(html);

6.Razor語法之注釋

　　這里所說的注釋是指服務器端的注釋，在Razor代碼塊中，可以使用C#的注釋方式來進行注釋，分別是//:（單行注釋）和/**/（多行注釋）。

　　另外，Razor還提供了一種新的服務器段代碼注釋，可以即注釋C#代碼，同時可以注釋HTML代碼，@**@，這種注釋方式不受代碼塊的限制，在Razor代碼中的任何位置都額可以。

@* 這是一個注釋 這個是注釋 *@

7.Razor布局

ASP.NET MVC3中新增的 Razor 視圖引擎有很多的優勢，本篇將簡單的介紹下 MVC3 中 Razor 視圖引擎中頁面布局。

使用 Razor 視圖引擎，我們會發現不同于 .ASPX 視圖，它沒有使用母板頁。下邊我們看看 Razor 布局技術，首先看看我們項目中的公共視圖，如下：

可見，我們分別定義了頁面的頁頭、頁腳等，Razor 中布局是非常簡單的，類似我們以前使用的include加載方法。首先，我們看看"_layout.cshtml"中的代碼，它類似于"ASPX"視圖引擎中的母版頁，如下：

第4行中，使用了ViewBag.Title，這樣我們可以在各視圖頁指定各頁面標題的名稱，同理第8行指定body 的 id。如在Home頁中：

第10行、21行使用了HtmlHelper.Partial()方法，分別將頁頭和頁腳的局部視圖加載進來，也沒有太多可說的。16行中 RenderBody()將各視圖頁的主體部分全部加載了進來，這樣我們在"_layout.cshtml"頁中完成了我們頁面的布局，達到了復用的目的。最后在"_ViewStart.cshtml"中指定 Layout為我們定義的"_layout.cshtml"頁，當然，我們還可以在"_ViewStart.cshtml"中根據需要加載不同的布局。

以上這些是 Razor 中基本的布局方法，很明顯，如果復用的部分并不是靜態的內容，想想我們在WebForm中使用的自定義控件。那么我們怎樣在 Razor 視圖中實現自定義控件一樣的效果呢？在第18行中我們就實現了這個目的，下邊就讓我們看看，首先，我們在項目中添加了 App_Code 文件夾，并添加了名為“Latest.cshtml”的文件，如下：