随着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這個模闆檔案内加入以下代碼:
<code>01</code>
<code><!DOCTYPE html></code>
<code>02</code>
<code><</code><code>html</code><code>></code>
<code>03</code>
<code><</code><code>head</code><code>></code>
<code>04</code>
<code> </code><code><</code><code>title</code><code>>@ViewBag.Title</</code><code>title</code><code>></code>
<code>05</code>
<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"@Url.Content("</code><code>~/Content/Site.css")"</code><code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>
<code>06</code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"@Url.Content("</code><code>~/Scripts/jquery-1.4.4.min.js")"</code><code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>
<code>07</code>
<code> </code><code>@RenderSection("Head", required: true)</code>
<code>08</code>
<code></</code><code>head</code><code>></code>
<code>09</code>
<code><</code><code>body</code><code>></code>
<code>10</code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"page"</code><code>></code>
以上代碼第7行,預留出一個Head的section。 熟悉模闆頁的人,應該明白該處是預留是給未來具體的View頁面自定義特定js/css使用的。這個View我們就用預設的Home底下的Index來舉例。打開index.cshtml 寫入以下代碼
<code>@{</code>
<code> </code><code>ViewBag.Title = "Home Page";</code>
<code>}</code>
<code><</code><code>h2</code><code>>@ViewBag.Message</</code><code>h2</code><code>></code>
<code>@section Head{</code>
<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code> </code><code>$(function () {</code>
<code> </code><code>alert("hello jquery");</code>
<code> </code><code>});</code>
<code> </code><code></</code><code>script</code><code>></code>
<code>11</code>
該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 文法智能提示:
該智能提示與VS内的一樣,隻需Ctrol + J 即可調出。具體的請看下圖:
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。如有疑問,可以通過 [email protected] 聯系作者本人。