天天看點

MVC3.0 中Razor 學習

随着MVC3.0RTM版本的釋出,最近将公司的項目從MVC2.0更新到MVC3.0。同時打算在MVC3中全面使用Razor模闆引擎。現将Razor學習拿出來和大家分享,如果存在不足的地方歡迎您指出。

     其實在使用<%= %>在html中調用C#代碼時,内心總在埋怨。這個寫法非常麻煩。麻煩在哪呢?其實就是閉合。比如:

Asp.net: <script src="&lt;%=Url.Content("~/Scripts/jquery-1.4.4.min.js")%>"

Razor:   <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"

非常明顯,Razor在内部幫我們做了閉合“%>”。其實就是這個小小的閉合讓我們可以在html内更加“流暢”的調用服務端代碼。故Razor給開發帶來了一定的便捷!下面介紹Razor的基本用法。

  一、模闆頁

       Razor出現後我們就可以選擇不再使用asp.net master 模闆頁。取而代之的是cshtml razor的模闆檔案。用法個人認為還是和master模闆頁類似。但在mater模闆頁的原有功能上有了進一步擴充,更友善開發。比如隻要在View檔案夾内加入_ViewStart.cshtml檔案,我們就無需在每一個具體的View頁面引入模闆頁。減少View頁面内的重複代碼。具體的可以建立一個MVC3 Application 選擇razor模闆,VS會自動建立上述機制。這裡值得提出的是@RenderSection方法。可以讓我們在模闆頁預設一個區域,未來給繼承該模闆頁的View使用。具體請看以下操作:

   在MVC3.0 shared檔案夾下_Layout.cshtml這個模闆檔案内加入以下代碼:

?

1

2

3

4

5

6

7

8

9

10

<!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.4.4.min.js")" type="text/javascript"></script>

@RenderSection("Head", required: true)

</head>

<body>

<div class="page">

以上代碼第7行,預留出一個Head的section。 熟悉模闆頁的人,應該明白該處是預留是給未來具體的View頁面自定義特定js/css使用的。這個View我們就用預設的Home底下的Index來舉例。打開index.cshtml 寫入以下代碼

11

@{

ViewBag.Title = "Home Page";

}

<h2>@ViewBag.Message</h2>

@section Head{

<script type="text/javascript">

$(function () {

alert("hello jquery");

});

</script>

}

該View已經內建了模闆頁,這裡隻是填充模闆頁内的Head section這時就可以加入我們的針對每個view頁面的js或者CSS了。至此達到共性外的個性。

二、Razor文法:

    文章開頭就已經提到了,個人認為Razor文法的便捷在于razor自動幫助我們閉合C#或VB.NET在html的文法。請看以下代碼:

已經給出注釋了,仔細閱讀并不難了解。您應該也能體會到如果将razor換成asp.net的<%= %>或者<%: %>寫法,其實是很“痛苦”的。至于razor的其他用法官方網站已經寫的很全面了,比如razor的已經為我們 HTML Encod防止XSS攻擊、html中字元串中出現×××@×××.com這樣的文本,Razor是可以自動識别成Email格式而不是Razor的關鍵字。

三、 Razor 文法智能提示:

繼續閱讀