[ASP.NET MVC 小牛之路]03 - Razor文法

[ASP.NET
MVC 小牛之路]03 - Razor文法

Razor是MVC3中才有的新的視圖引擎。我們知道，在ASP.NET中，ASPX的視圖引擎依靠<%和%>來調用C#指令。而MVC3以後有了一套新的使用@標記的Razor文法，使用起來更靈活更簡潔。下面通過一些簡單樣本讓大家快速撐握Razor文法的使用。

本文目錄

準備工作

在示範Razor文法的使用之前，我們需要做一些準備工作。

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

2.添加一個Model。在項目的Models檔案夾中添加一個名為Product的類。在這我們把前一篇C#知識點提要用到的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”，如下所示：

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。

以上就是[ASP.NET MVC 小牛之路]03 - Razor文法的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

