Razor的語法

Razor是MVC3中才開始有的新的視圖引擎。在ASP.NET中，添加一個試圖就會讓你選擇使用Razor(cshtml)仍是C#(ASPX)格式。ASPX的視圖引擎依靠<%和%>來調用C#指令，而MVC3之後有了一套新的使用@標記的Razor語法，使用起來更靈活更簡潔。Razor在語法上的美化是顯而易見的，可是有時候會出現一些莫名其妙的錯誤，可是通常均可以獲得解決，要麼加HTML標籤，要麼是有「()」等等均可以獲得解決，這個也許是在編寫的Text Template對咱們所寫的文本解析有點問題而已。下面經過一些簡單示例讓你們快速撐握Razor語法的使用。

在Razor中使用「@」來替代「<%%>」的編碼格式，固然若是須要代碼塊，就須要用到「@{}」。在其中就能夠編寫C#代碼，配合VS的只能解析，通常有過開發經驗的人均可以很容易上手。若是你想了解更多的語法相關問題，能夠參考MVC3 Razor視圖引擎的基礎語法，下面介紹一下在MVC中很重要的幾個關鍵字，在編程過程當中會常用到。

準備工做

在演示Razor語法的使用以前，咱們須要作一些準備工做。

1.打開VS建立一個ASP.NET MVC空項目，很簡單，就不具體演示了。

2.添加一個Model。在項目的Models文件夾中添加一個名爲Product的類。代碼以下：

 

namespace MvcApplication1.Models { public class Product { public int ProductID { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string Category { set; get; } } }

3.添加一個Controller。右擊項目中的Controllers文件夾，選擇添加控制器，命名以下圖所示：

點添加後，對ProdcutController中的代碼進行以下編輯：

 

using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers { public class ProductController : Controller { public ActionResult Index() { Product myProduct = new Product { ProductID = 1, Name = "蘋果", Description = "又大又紅的蘋果", Category = "水果", Price = 5.9M }; return View(myProduct); } } }

4.添加一個View。右擊Index方法，選擇添加視圖，在彈出的窗口進行以下配置：

點添加後，系統自動幫咱們建立一個Product文件夾和一個Index.cshtml文件，Index.cshtml內容以下：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

5.修改默認路由。爲了方便，咱們應該讓應用程序啓動時直接導向咱們須要的請求處理（此處是Product/Index）。打開Global.asax文件，找到註冊路由RegisterRoutes方法下的routes.MapRoute方法，把controller的值改成「Product」，以下所示：

 

5.修改默認路由。爲了方便，咱們應該讓應用程序啓動時直接導向咱們須要的請求處理（此處是Product/Index）。打開Global.asax文件，找到註冊路由RegisterRoutes方法下的routes.MapRoute方法，把controller的值改成「Product」，以下所示：

 

routes.MapRoute(
    "Default", // 路由名稱 "{controller}/{action}/{id}", // 帶有參數的 URL new { controller = "Product", action = "Index", id = UrlParameter.Optional } // 參數默認值 );

 

 

先無論這些是什麼意思，我會在後面的文章中專門介紹路由。到這，咱們能夠按F5，程序能正常運行，準備工做就作好了。

使用Model對象

介紹Razor語法，讓咱們從Index.cshtml文件的第一行開始：

@model MvcApplication1.Models.Product

Razor語句都是以@符號開始的。每一個視圖都有本身的Model屬性（經過@Model調用）。上面這句代碼的意思是將本視圖的Model屬性的類型指向MvcApplication1.Models.Product類型，這就實現了強類型。強類型的好處之一是類型安全，若是寫錯了Model對象的某個成員名，編譯器會報錯；另外一個好處是在VS中可使用VS中的代碼智能提示自動完成類型成員調用的代碼編寫。 固然這句代碼不要程序也能夠正常運行，只是給編寫代碼形成了必定的困難。

視圖中的Model屬性用於存放控制器（Controller）傳遞過來的model實例對象（本示例中ProductController經過「return View(myProduct)」傳遞給Index視圖），下面的代碼演示瞭如何調用該model對象：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
<!-- 調用Product實例的Name屬性 --> <h2>名稱：@Model.Name</h2>

注意，第一行代碼用於聲名Model屬性類型用的是@model <Model類型名>(小寫m)，

而調用控制器傳遞過來的Model對象用的是@Model.<屬性名>(大寫M)。按F5運行效果以下：

使用表達式

上面講的使用Model對象是很經常使用的一種Razor代碼。其實上面示例中的@Model.Name就是一個簡單的表達式，表示向Web頁面呈現Model.Name的文本值。Razor語法中的表達式除了可使用Model對象，也可使用幾乎任何一個其餘可訪問權限範圍內的對象，來向Web面面輸出該對象成員的文本值。以下代碼所示：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
} 如今的時間是: @DateTime.Now.ToShortTimeString()

 

運行效果以下：

這種使用對象的簡單表達式（@DateTime.Now.ToShortTimeString()和@Model.Name），在這咱們不防稱之爲對象表達式。

除了對象表達式，還能夠是其餘任意的有返回值的表達式，如條件表達式。以下面代碼所示：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

如今的時間是: @DateTime.Now.ToShortTimeString()

<br/>@(DateTime.Now.Hour>22 ? "還早，再寫一會吧！" : "該睡覺咯！")

運行效果以下：

注意，通常使用非對象表達式時都須要用小括號括起來。

 

使用代碼塊

 

和表達式的使用方式同樣，Razor語法中也可使用由{}括起來的單個C#過程控制代碼塊（如if、switch、for等）。使用方式以下：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

@if (Model.Price > 5M) {
    string test = "買不起！";
    <p>@Model.Name <b>太貴了！</b> @test </p> }

效果以下：

由{}括起來的代碼塊內能夠寫任何C#代碼，也可使用任何HTML標籤。但需注意的是，當控制語句內只有一句代碼時不能像寫C#後臺代碼同樣省略大括號。

還有一種更經常使用的使用代碼塊的方式。你也能夠經過以@{開始，以}閉合的方式來使用代碼塊，它能夠把多個代碼塊放在一塊兒，開成一個更大的代碼塊。以下代碼所示：

 

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
@{
    if(Model.Category=="水果"){
        string test="是一種水果。";
        @Model.Name @test
    }
    if (Model.Price > 5M) {
        string test = "買不起！";
        <p>@Model.Name <b>太貴了！</b> @test </p> } }

運行結果以下：

使用@:和text標籤

咱們注意到，在代碼塊中，要麼是C#代碼，要麼是HTML標籤，不能直接寫純文字，純文字須包裹在HTML標籤內。但若是須要在代碼塊中直接輸出純文字而不帶HTML標籤，則可使用@:標籤，在代碼塊中輸出純文本文字很是有用。以下代碼所示：

 

...

@if (Model.Price > 5M) { @Model.Name@:太貴了 。 <br /> @: @@:後面能夠是一行除@字符之外的任意文本,包括<、>和空格，怎麼寫的就怎麼輸出。 <br /> @: 若是要輸出@符號，當@符號先後都有非敏感字符（如<、｛、和空格等）時，能夠直接使用@符號，不然須要使用兩個@符號。 }

 

注意@符號的使用。上面代碼運行效果以下：

使用@:標籤在代碼塊中輸出一行不帶html標籤的文本很是方便，但若是須要在代碼塊中輸出續或不連續的多行純文本，則使用text標籤較爲方便，以下代碼所示：

 

...

@if (Model.Price > 5M) {
    <text> 名稱：<b>@Model.Name</b><br /> 分類：<b>@Model.Description</b><br /> 價錢：<b>@Model.Price</b><br /> <pre> 測試行一: <a>aaaa</a> 測試行二: @@ fda@aaa </pre> </text> }

 

運行結果：

使用ViewBag

上面講了經過Model對象來從Controller傳遞數據到View。和Model對象同樣，ViewBag對象也能夠用來從Controller傳遞數據到View。下面代碼演示瞭如何在ProductController中使用ViewBag：

 

public ActionResult Index() { Product myProduct = new Product { ProductID = 1, Name = "蘋果", Description = "又大又紅的蘋果", Category = "水果", Price = 5.9M }; ViewBag.TestString = "這是一行測試文字！"; return View(myProduct); }

 

 不同的是，ViewBag是動態類型，其中TestString是本身定義的。ViewBag在View中的使用方式是和Model同樣，以下：

...

動態表達式解析的時間是：@ViewBag.TestString

運行結果就不貼圖了。

使用Layuot

前面咱們建立一個視圖的時候，咱們勾選了使用佈局和母版頁，但沒有告訴VS使用哪個。請仔細看下圖：

這個對話框告訴咱們「若是在Razor _viewstart中設置了此選項，則留空」。在項目的Views文件夾中，咱們能夠看到一個_ViewStart.cshtml文件，裏面的內容是：

@{
    Layout = "~/Views/Shared/_Layout.cshtml"; }

MVC呈現視圖的時候，默認狀況下會自動查找_ViewStart.cshtml文件，以它做爲母版來呈現用戶請求的視圖。母版的呈現是MVC內部處理的，這種如下劃線（_）開頭的視圖文件，通常是不能直接返回給用戶。

使用佈局或母版頁的好處是，咱們不須要在每一個視圖中都設置一份相同的內容。按照_ViewStart.cshtml文件內容指示的路徑，咱們找到_Layout.cshtml文件，打開它會發現咱們在Index視圖中定義的 ViewBag.Title = "Index" 就是在這裏調用的：

 

<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> </head> <body> @RenderBody() </body> </html>

 

相似於ASP.NET母版頁中的ContentPlaceHolder服務器控件，在MVC中使用@RenderBody()來呈現子Web頁面的內容，它能夠省去咱們在每一個視圖文件中寫相同的html元素、JS和樣式等的工做。

若是建立一個視圖不想使用Layout，則能夠在建立視圖的對話框取消「使用佈局和母版頁」選項，建立後會生成以下代碼：

 

@{
    Layout = null;
}

<!DOCTYPE html> <html> <head> <title>About</title> </head> <body> <div> </div> </body> </html>

 

因爲沒有使用Layout，視圖中必須包含用於呈現HTML頁面每一個基本元素，並且必須指定Layout=null。