随着MVC3.0RTM版本的釋出,最近将公司的項目從MVC2.0更新到MVC3.0。同時打算在MVC3中全面使用Razor模闆引擎。現将Razor學習拿出來和大家分享,如果存在不足的地方歡迎您指出。
其實在使用<%= %>在html中調用C#代碼時,内心總在埋怨。這個寫法非常麻煩。麻煩在哪呢?其實就是閉合。比如:
Asp.net: <script src="<%=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 文法智能提示: