自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

AI.x社區(qū)

軟考社區(qū)

企業(yè)培訓

鴻蒙開發(fā)者社區(qū)

WOT技術大會

公眾號矩陣

移動端

視頻課免費課排行榜短視頻直播課軟考學堂

全部課程軟考華為認證廠商認證 IT技術 PMP項目管理免費題庫

文章資源問答課堂專欄直播

51CTO

鴻蒙開發(fā)者社區(qū)

51CTO技術棧

51CTO官微

51CTO學堂

51CTO博客

CTO訓練營

鴻蒙開發(fā)者社區(qū)訂閱號

51CTO軟考

51CTO學堂APP

51CTO學堂企業(yè)版APP

鴻蒙開發(fā)者社區(qū)視頻號

51CTO軟考題庫

賬號設置退出

ASP.NET 視圖引擎攻略

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

開發(fā) 后端

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

引子

看下面一段MVC 2.0的代碼。

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

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

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

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

隨著MVC 3.0的發(fā)布，新的Razor視圖引擎解決了這個問題。

Razor的意思的就是剃刀，可見它灰常犀利。引言中的代碼，我們用Razor的語法來寫的話:

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

Razor使用了"@"來標記一段C#代碼，并幫我們進行了內部的閉合，是不是感覺清爽多了?

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的一些語法，大家可以不深究"@"后面的內容，講到頁面布局，你只要專注與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()時，就用首頁視圖的內容置換到這里，最后處理完成返回靜態(tài)頁面。

2.使用Partial視圖

MVC 2.0中，你需要使用<asp:Content></asp:Content>標簽來進行頁面分割，太多的話自己都忘記了哪個對應的是哪個部份。

在Razor中，可以將需要剝離出來的部份作為一個單獨的Partial視圖，比如網站的頭部(Logo，導航等等..)，底部(友情鏈接，版權聲明等等..)，或是某個功能模塊(登陸框等等..)。

比如上面的母版頁，我們可以把它的頭部和底部剝離出來，在Share文件夾下右鍵添加/視圖,選擇創(chuàng)建為分部視圖，如圖3:

　　　　圖3

依照上述步驟創(chuàng)建”_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視圖，最后返回處理完成的靜態(tài)頁面。

三，Razor語法簡介與應用

1.語法簡介

如果我們希望在HTML代碼中綁定數(shù)據，比如說我們有一個產品的對象Product，需要綁定產品的名稱Product.Name，只需要在變量前面加"@"即可，

也可以使用"@(expression)"綁定一個表達式:

<p>@Product.Name</p> 
<p>@(Product.Price*0.8)</p>

Razor中使用”@{code}“來標識一段C#代碼,代碼段可以出現(xiàn)在任何位置，并且支持與HTML混寫:

@｛  
    var product=new product();  
    product.Name="pen";  
    product.Price=1.00;    <p>@product.Name</p>    <p>@product.Price</p>｝

使用循環(huán)或條件語句時直接加"@"前綴，可以控制頁面邏輯:

@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;"。

最后是就是一些數(shù)據綁定，或者是邏輯的處理。

Razor的基本內容大概就講這些了，當然它還有很豐富的底蘊，需要在實際的運用過程中去學習，一篇短文是無法涵蓋所有信息的。

最后提一點，Razor暫時沒有設計視圖，這是比較悲摧的一點。相信之后會有的。如果對Razor的使用有任何問題，可以在此提出，能力范圍內的問題我都可以提供幫助。

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

【編輯推薦】

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

51CTO技術棧公眾號

業(yè)務
速覽

媒體

51CTO CIOAge HC3i

社區(qū)

51CTO博客鴻蒙開發(fā)者社區(qū) AI.x社區(qū)

教育

51CTO學堂精培企業(yè)培訓 CTO訓練營

<button id="kt6hm"></button>