新聞中心
引子

在桂林等地區(qū),都構建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務理念,為客戶提供網(wǎng)站設計、網(wǎng)站建設 網(wǎng)站設計制作按需求定制設計,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設,桂林網(wǎng)站建設費用合理。
看下面一段MVC 2.0的代碼。
- <%if (Model != null)
- {%>
<%=Model%>
- <%}%>
- <%else
- {%>
- //Do something
- <%}%>
我們站在一個讀者的立場上來看,”<% %>“這種標記C#代碼的方法是十分蛋疼的。
如果寫這段代碼的人沒有良好的縮進和對齊習慣的話,一段邏輯較為復雜的代碼就會堆砌著雜亂無章的"<%“和"%>"--匹配它們就是一件頭疼的事情,會讓讀者望而生畏。
即使是寫代碼的本人,閉合也是一件麻煩的事情,并且VS對”<% %>“的自動縮進和對齊支持不很友好,看慣了整齊的代碼,面對自己寫出的凌亂的東西會很不爽。
隨著MVC 3.0的發(fā)布,新的Razor視圖引擎解決了這個問題。
Razor的意思的就是 剃刀,可見它灰常犀利。引言中的代碼,我們用Razor的語法來寫的話:
- @if (Model != null)
- {
@Model
- }
- else
- {
- //Do something
- }
Razor使用了"@"來標記一段C#代碼,并幫我們進行了內(nèi)部的閉合,是不是感覺清爽多了?
Razor在減少代碼冗余、增強代碼可讀性和vs 智能感知方面,都有著很大的優(yōu)勢。下面我們來具體的介紹如何在ASP.NET MVC 3.0中使用Razor。
一,創(chuàng)建基于Razor的Web程序
首先你的開發(fā)環(huán)境必須安裝.NET Framework4.0,然后在VS中新建項目時選擇ASP.NET MVC 3 應用程序,在選項頁面中選擇視圖引擎為Razor,如圖1:
圖1
然后創(chuàng)建項目,就會得到一個基于Razor的Web項目了,如圖2。
圖2
相信熟悉MVC的看官們對此結構并不陌生。注意紅框部份,Razor的頁面是以cshtml為后綴的,下面我們來講下如何使用Razor來進行頁面布局。
二,使用Razor來進行頁面布局
UI設計師們現(xiàn)在也講究頁面設計的語義化和結構化,把一個頁面分成很多個模塊,使用語義化的類名或id來標識這些模塊。Razor推出了新的布局解決方案來迎合這一潮流。
這里涉及到Razor的一些語法,大家可以不深究"@"后面的內(nèi)容,講到頁面布局,你只要專注與HTML代碼就可以了。語法會在后面補充。
1.指定母版與加載機制
首先我們來看_ViewStart.chhtml頁面,它的內(nèi)容很簡單:
- @{
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
這句代碼指定了默認的母版的位置: 當前應用程序根目錄下<"~"的含義>的Views/Shared/_Layout.cshtml
除非特殊情況,比如視圖是Partial視圖,或顯示的在視圖中添加以下代碼指示不使用母版:
- @{
- Layout = null;
- }
其他情況下,該指定頁就是視圖的母版頁。
然后我們來看看Razor母版頁_Layout.cshtml的內(nèi)容:
@ViewBag.Title 我的 MVC 應用程序
- 歡迎 @User.Identity.Name!
- @Html.ActionLink("主頁", "Index", "Home")
- @Html.ActionLink("關于", "About", "Home")
- @RenderBody()
注意@RenderBody()這個方法相當于一個占位符,假如我們的首頁視圖Index.cshtml是這樣,
- @{
- ViewBag.Title = "主頁";
- }
@ViewBag.Message
- 若要了解有關 ASP.NET MVC 的更多信息,請訪問 http://asp.net/mvc。
一般的視圖處理,比如當服務器響應一個HomeController.Index()請求的時候,需要返回Index視圖,
首先會加載母版頁_Layout.cshtml的內(nèi)容,遇到@RenderBody()時,就用首頁視圖的內(nèi)容置換到這里,最后處理完成返回靜態(tài)頁面。
2.使用Partial視圖
MVC 2.0中,你需要使用
在Razor中,可以將需要剝離出來的部份作為一個單獨的Partial視圖,比如網(wǎng)站的頭部(Logo,導航等等..),底部(友情鏈接,版權聲明等等..),或是某個功能模塊(登陸框等等..)。
比如上面的母版頁,我們可以把它的頭部和底部剝離出來,在Share文件夾下右鍵添加/視圖,選擇創(chuàng)建為分部視圖,如圖3:
圖3
依照上述步驟創(chuàng)建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"兩個視圖
我的 MVC 應用程序
- 歡迎 @User.Identity.Name!
- @Html.ActionLink("主頁", "Index", "Home")
- @Html.ActionLink("關于", "About", "Home")
- ? 2008-2012 John Connor All rights reserved.
可以看出,提取Partial視圖很簡單,就是把需要的內(nèi)容提取出來,放在新建的Partial視圖中。然后,我們還需要干一件事情,
類似于一般視圖,Partial視圖使用自己特有的占位符來替換原內(nèi)容。我們這么干之后,原_Layout.cshtml頁就變成了這樣:
@ViewBag.Title - @Html.Partial("_HeaderPartial")
- @RenderBody()
- @Html.Partial("_FooterPartial")
這樣,頁面的布局是不是更清爽簡潔了?如同一般視圖,返回請求時會先加載母版頁然后遇到占位符時加載相應的Partial視圖,最后返回處理完成的靜態(tài)頁面。
三,Razor語法簡介與應用
1.語法簡介
如果我們希望在HTML代碼中綁定數(shù)據(jù),比如說我們有一個產(chǎn)品的對象Product,需要綁定產(chǎn)品的名稱Product.Name,只需要在變量前面加"@"即可,
也可以使用"@(expression)"綁定一個表達式:
@Product.Name
@(Product.Price*0.8)
Razor中使用”@{code}“來標識一段C#代碼,代碼段可以出現(xiàn)在任何位置,并且支持與HTML混寫:
- @{
- var product=new product();
- product.Name="pen";
- product.Price=1.00;
@product.Name
@product.Price
}
使用循環(huán)或條件語句時直接加"@"前綴,可以控制頁面邏輯:
- @foreach(var product in products)
- {
@item.Name
- }
Razor中注釋是"@**@",即可以注釋Html代碼,也可以注釋C#代碼,在代碼塊中仍可使用C#的注釋方式:
- @{
- var product=new product();
- product.Name="pen";
- //product.Price=1.00;
@product.Name
- @*
@product.Price
*@- }
2.ASP.NET MVC3.0 Web中的應用
假設我們有一個Product類位于JohnConnor.Data命名空間下,有Name和Price兩個屬性,HomeController.Index()方法返回一個List
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
() - {
- 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
- @{
- ViewBag.Title = "主頁";//母版中ViewBag.Title用于綁定Title標簽,這里進行賦值。
- }
Razor
- @foreach (var product in Model)
- {
- //遍歷所有的產(chǎn)品
- }
在一般視圖中,首先聲明視圖模型,即Action返回的ViewResult對象的類型<也可以不聲明,如果有返回對象建議聲明>。
這里的視圖模型是一個List
在母版中ViewBag.Title用于綁定Title標簽,在一般視圖中就可以進行賦值來綁定頁面的Title 。
如果你不想使用母版,就在代碼塊中添加"Layout = null;"。
最后是就是一些數(shù)據(jù)綁定,或者是邏輯的處理。
Razor的基本內(nèi)容大概就講這些了,當然它還有很豐富的底蘊,需要在實際的運用過程中去學習,一篇短文是無法涵蓋所有信息的。
最后提一點,Razor暫時沒有設計視圖,這是比較悲摧的一點。相信之后會有的。如果對Razor的使用有任何問題,可以在此提出,能力范圍內(nèi)的問題我都可以提供幫助。
原文地址:http://www.cnblogs.com/John-Connor/archive/2012/05/08/2487200.html
【編輯推薦】
網(wǎng)站名稱:ASP.NET視圖引擎攻略
本文鏈接:http://www.fisionsoft.com.cn/article/coehgcg.html


咨詢
建站咨詢
