MVC3.0 中Razor 學習

作者: ryanding 來源: 博客園發布時間: 2011-01-21 00:00 閱讀: 3338 次推薦: 1 原文鏈接 [收藏]

　　隨著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這個模板文件內加入以下代碼：

<!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 寫入以下代：

@{
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 語法智能提示

該智能提示與VS內的一樣，只需Ctrol + J 即可調出。具體的請看下圖：