MVC之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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM