ASP.NET 視圖引擎攻略

作者：菊花臺泡茶 2012-05-09 13:29:42

即使是寫代碼的本人，閉合也是一件麻煩的事情，并且VS對”<% %>“的自動縮進和對齊支持不很友好，看慣了整齊的代碼，面對自己寫出的凌亂的東西會很不爽。

引子

看下面一段MVC 2.0的代碼。

<%if (Model != null)  
{%> 
 <p><%＝Model%></p> 
<%}%> 
<%else  
{%> 
 //Do something  
<%}%>

我們站在一個讀者的立場上來看，”<% %>“這種標記C#代碼的方法是十分蛋疼的。

如果寫這段代碼的人沒有良好的縮進和對齊習慣的話，一段邏輯較為復雜的代碼就會堆砌著雜亂無章的"<%“和"%>"--匹配它們就是一件頭疼的事情，會讓讀者望而生畏。

隨著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。

一，創建基于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的內容:

<!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是這樣，

@{  
    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>標簽來進行頁面分割，太多的話自己都忘記了哪個對應的是哪個部份。

比如上面的母版頁，我們可以把它的頭部和底部剝離出來，在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()方法如下:

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的使用有任何問題，可以在此提出，能力范圍內的問題我都可以提供幫助。

原文地址：http://www.cnblogs.com/John-Connor/archive/2012/05/08/2487200.html

【編輯推薦】

責任編輯：張偉來源：菊花臺泡茶的博客

ASP.NET