天天看點

MVC3.0 中Razor 學習

    随着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>&lt;!DOCTYPE html&gt;</code>

<code>02</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>03</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>04</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;@ViewBag.Title&lt;/</code><code>title</code><code>&gt;</code>

<code>05</code>

<code>    </code><code>&lt;</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>/&gt;</code>

<code>06</code>

<code>    </code><code>&lt;</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>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>07</code>

<code>    </code><code>@RenderSection("Head", required: true)</code>

<code>08</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>09</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>10</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"page"</code><code>&gt;</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>&lt;</code><code>h2</code><code>&gt;@ViewBag.Message&lt;/</code><code>h2</code><code>&gt;</code>

<code>@section Head{</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>$(function () {</code>

<code>            </code><code>alert("hello jquery");</code>

<code>        </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>11</code>

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

    二、Razor文法:

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

MVC3.0 中Razor 學習

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

    三、 Razor 文法智能提示:

     該智能提示與VS内的一樣,隻需Ctrol + J 即可調出。具體的請看下圖:

MVC3.0 中Razor 學習

        本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。如有疑問,可以通過 [email protected] 聯系作者本人。

繼續閱讀