--引子
看下面一段MVC 2.0的代碼。
<%if (Model != null) {%> <p><%＝Model%></p> <%}%> <%else {%> //Do something <%}%>
我們站在一個讀者的立場上來看，”<% %>“這種標記C#代碼的方法是十分蛋疼的。
如果寫這段代碼的人沒有良好的縮進和對齊習慣的話，一段邏輯較為復雜的代碼就會堆砌着雜亂無章的"<%“和"%>"--匹配它們就是一件頭疼的事情，會讓讀者望而生畏。
即使是寫代碼的本人，閉合也是一件麻煩的事情，並且VS對”<% %>“的自動縮進和對齊支持不很友好，看慣了整齊的代碼，面對自己寫出的凌亂的東西會很不爽。
隨着MVC 3.0的發布，新的Razor視圖引擎解決了這個問題。
Razor的意思的就是 剃刀，可見它灰常犀利。引言中的代碼，我們用Razor的語法來寫的話:
@if (Model != null) { <p>@Model</p> } else { //Do something }
Razor使用了"@"來標記一段C#代碼，並幫我們進行了內部的閉合，是不是感覺清爽多了?
Razor在減少代碼冗余、增強代碼可讀性和vs 智能感知方面，都有着很大的優勢。下面我們來具體的介紹如何在ASP.NET MVC 3.0中使用Razor。
---------------------------------------------引言End----------------------------------------------
一，創建基於Razor的Web程序
首先你的開發環境必須安裝.NET Framework4.0，然后在VS中新建項目時選擇ASP.NET MVC 3 應用程序，在選項頁面中選擇視圖引擎為Razor，如圖1:
圖1
然后創建項目，就會得到一個基於Razor的Web項目了，如圖2。
圖2
相信熟悉MVC的看官們對此結構並不陌生。注意紅框部份，Razor的頁面是以cshtml為后綴的，下面我們來講下如何使用Razor來進行頁面布局。
二，使用Razor來進行頁面布局
UI設計師們現在也講究頁面設計的語義化和結構化，把一個頁面分成很多個模塊，使用語義化的類名或id來標識這些模塊。Razor推出了新的布局解決方案來迎合這一潮流。
這里涉及到Razor的一些語法，大家可以不深究"@"后面的內容，講到頁面布局，你只要專注與HTML代碼就可以了。語法會在后面補充。
1.指定母版與加載機制
首先我們來看_ViewStart.chhtml頁面，它的內容很簡單:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
這句代碼指定了默認的母版的位置: 當前應用程序根目錄下<"~"的含義>的Views/Shared/_Layout.cshtml
除非特殊情況，比如視圖是Partial視圖，或顯示的在視圖中添加以下代碼指示不使用母版:
@{ Layout = null; }
其他情況下，該指定頁就是視圖的母版頁。
然后我們來看看Razor母版頁_Layout.cshtml的內容:
View Code
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> </head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <body> <div class="page"> <div id="header"> <div id="title"> <h1>我的 MVC 應用程序</h1> </div> <div id="logindisplay"> 歡迎 <strong>@User.Identity.Name</strong>! </div> <div id="menucontainer"> <ul id="menu"> <li>@Html.ActionLink("主頁", "Index", "Home")</li> <li>@Html.ActionLink("關於", "About", "Home")</li> </ul> </div> </div> <div id="main"> @RenderBody()<!--一般視圖內容的占位符--> </div> <div id="footer"> </div> </div> </body> </html>
注意@RenderBody()這個方法相當於一個占位符，假如我們的首頁視圖Index.cshtml是這樣，
View Code
@{ ViewBag.Title = "主頁"; } <h2>@ViewBag.Message</h2> <p> 若要了解有關 ASP.NET MVC 的更多信息，請訪問 <a href="http://asp.net/mvc" title="ASP.NET MVC 網站">http://asp.net/mvc</a>。 </p>
一般的視圖處理，比如當服務器響應一個HomeController.Index()請求的時候,需要返回Index視圖，
- 首先會加載母版頁_Layout.cshtml的內容，
- 遇到@RenderBody()時，就用首頁視圖的內容置換到這里，最后處理完成返回靜態頁面。
2.使用Partial視圖
MVC 2.0中，你需要使用<asp:Content></asp:Content>標簽來進行頁面分割，太多的話自己都忘記了哪個對應的是哪個部份。
在Razor中，可以將需要剝離出來的部份作為一個單獨的Partial視圖，比如網站的頭部(Logo，導航等等..)，底部(友情鏈接，版權聲明等等..)，或是某個功能模塊(登陸框等等..)。
比如上面的母版頁，我們可以把它的頭部和底部剝離出來，在Share文件夾下右鍵添加/視圖,選擇創建為分部視圖，如圖3:
圖3
依照上述步驟創建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"兩個視圖:
<!--_HeaderPartial.cshtml-->
<div id="header"> <div id="title"> <h1>我的 MVC 應用程序</h1> </div> <div id="logindisplay"> 歡迎 <strong>@User.Identity.Name</strong>! </div> <div id="menucontainer"> <ul id="menu"> <li>@Html.ActionLink("主頁", "Index", "Home")</li> <li>@Html.ActionLink("關於", "About", "Home")</li> </ul> </div> </div>
<!--_FooterPartial.cshtml-->
<div id="footer"> © 2008-2012 John Connor All rights reserved. </div>
可以看出，提取Partial視圖很簡單，就是把需要的內容提取出來，放在新建的Partial視圖中。然后，我們還需要干一件事情，
類似於一般視圖，Partial視圖使用自己特有的占位符來替換原內容。我們這么干之后，原_Layout.cshtml頁就變成了這樣:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> </head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <body> <div class="page"> @Html.Partial("_HeaderPartial")<!--_HeaderPartial視圖占位符--> <div id="main"> @RenderBody() </div> @Html.Partial("_FooterPartial")<!--_FooterPartial視圖占位符--> </div> </body> </html>
這樣，頁面的布局是不是更清爽簡潔了?如同一般視圖，返回請求時會先加載母版頁然后遇到占位符時加載相應的Partial視圖，最后返回處理完成的靜態頁面。
三，Razor語法簡介與應用
1.語法簡介
如果我們希望在HTML代碼中綁定數據，比如說我們有一個產品的對象Product，需要綁定產品的名稱Product.Name，只需要在變量前面加"@"即可，
也可以使用"@(expression)"綁定一個表達式:
<p>@Product.Name</p>
<p>@(Product.Price*0.8)</p>
Razor中使用”@{code}“來標識一段C#代碼,代碼段可以出現在任何位置，並且支持與HTML混寫:
@｛ var product=new product(); product.Name="pen"; product.Price=1.00;
<p>@product.Name</p>
<p>@product.Price</p>
｝
使用循環或條件語句時直接加"@"前綴，可以控制頁面邏輯:
@foreach(var product in products) ｛ <p>@item.Name</p> ｝
Razor中注釋是"@**@",即可以注釋Html代碼，也可以注釋C#代碼,在代碼塊中仍可使用C#的注釋方式:
@{ var product=new product(); product.Name="pen"; //product.Price=1.00; <p>@product.Name</p> @*<p>@product.Price</p>*@ }
2.ASP.NET MVC3.0 Web中的應用
假設我們有一個Product類位於JohnConnor.Data命名空間下,有Name和Price兩個屬性，HomeController.Index()方法返回一個List<Product>對象給Index視圖，
打印所有產品名稱，並且點擊產品名稱時，彈出產品價格。
HomeController.Index()方法如下:
View Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using JohnConnor.Data; namespace JohnConnor.Web.Controllers { public class HomeController : Controller { public ActionResult Index() { var products = new List<Product>() { new Product{ Name="鋼筆", Price=11.55M}, new Product{ Name="鉛筆", Price=2.17M}, new Product{ Name="圓珠筆", Price=5.98M}, }; return View(products); } } }
我們來改一下Index視圖演示一下Razor的簡單應用。
@using JohnConnor.Data; @model List<Product> @{ ViewBag.Title = "主頁";//母版中ViewBag.Title用於綁定Title標簽，這里進行賦值。 } <h2>Razor</h2> @foreach (var product in Model) { //遍歷所有的產品 <input type="button" name="@product.Name" value="@product.Name" onclick="alert(@product.Price)" /> }
在一般視圖中，首先聲明視圖模型，即Action返回的ViewResult對象的類型<也可以不聲明，如果有返回對象建議聲明>。
這里的視圖模型是一個List<Product>集合，因為Product位於using JohnConnor.Data命名空間，所以先添加了引用。
在母版中ViewBag.Title用於綁定Title標簽，在一般視圖中就可以進行賦值來綁定頁面的Title 。
如果你不想使用母版，就在代碼塊中添加"Layout = null;"。
最后是就是一些數據綁定，或者是邏輯的處理。
Razor的基本內容大概就講這些了，當然它還有很豐富的底蘊，需要在實際的運用過程中去學習，一篇短文是無法涵蓋所有信息的。
最后提一點，Razor暫時沒有設計視圖，這是比較悲摧的一點。相信之后會有的。如果對Razor的使用有任何問題，可以在此提出，能力范圍內的問題我都可以提供幫助。
希望大家多多支持。