日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
ASP.NET視圖引擎攻略

引子

在桂林等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需求定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè),桂林網(wǎng)站建設(shè)費(fèi)用合理。

看下面一段MVC 2.0的代碼。

 
 
 
 
    
  
  
  
  
  1. <%if (Model != null)  
    2.   
  
  
  
  2. {%> 
    3.   
  
  
  
  3.  
    <%＝Model%>
     
    4.   
  
  
  
  4. <%}%> 
    5.   
  
  
  
  5. <%else  
    6.   
  
  
  
  6. {%> 
    7.   
  
  
  
  7.  //Do something  
    8.   
  
  
  
  8. <%}%> 
    9.

我們站在一個(gè)讀者的立場(chǎng)上來(lái)看，”<% %>“這種標(biāo)記C#代碼的方法是十分蛋疼的。

如果寫(xiě)這段代碼的人沒(méi)有良好的縮進(jìn)和對(duì)齊習(xí)慣的話，一段邏輯較為復(fù)雜的代碼就會(huì)堆砌著雜亂無(wú)章的"<%“和"%>"--匹配它們就是一件頭疼的事情，會(huì)讓讀者望而生畏。

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

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

Razor的意思的就是 剃刀，可見(jiàn)它灰常犀利。引言中的代碼，我們用Razor的語(yǔ)法來(lái)寫(xiě)的話:

 
 
 
 
    
  
  
  
  
  1. @if (Model != null)　　  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3.   
    @Model
     
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5. else  
    6.   
  
  
  
  6. {  
    7.   
  
  
  
  7.     //Do something   
    8.   
  
  
  
  8. } 
    9.

Razor使用了"@"來(lái)標(biāo)記一段C#代碼，并幫我們進(jìn)行了內(nèi)部的閉合，是不是感覺(jué)清爽多了?

Razor在減少代碼冗余、增強(qiáng)代碼可讀性和vs 智能感知方面，都有著很大的優(yōu)勢(shì)。下面我們來(lái)具體的介紹如何在ASP.NET MVC 3.0中使用Razor。

一，創(chuàng)建基于Razor的Web程序

首先你的開(kāi)發(fā)環(huán)境必須安裝.NET Framework4.0，然后在VS中新建項(xiàng)目時(shí)選擇ASP.NET MVC 3 應(yīng)用程序，在選項(xiàng)頁(yè)面中選擇視圖引擎為Razor，如圖1:

　　圖1

然后創(chuàng)建項(xiàng)目，就會(huì)得到一個(gè)基于Razor的Web項(xiàng)目了，如圖2?！　?/p>

　　　圖2

相信熟悉MVC的看官們對(duì)此結(jié)構(gòu)并不陌生。注意紅框部份，Razor的頁(yè)面是以cshtml為后綴的，下面我們來(lái)講下如何使用Razor來(lái)進(jìn)行頁(yè)面布局。

二，使用Razor來(lái)進(jìn)行頁(yè)面布局

UI設(shè)計(jì)師們現(xiàn)在也講究頁(yè)面設(shè)計(jì)的語(yǔ)義化和結(jié)構(gòu)化，把一個(gè)頁(yè)面分成很多個(gè)模塊，使用語(yǔ)義化的類(lèi)名或id來(lái)標(biāo)識(shí)這些模塊。Razor推出了新的布局解決方案來(lái)迎合這一潮流。

這里涉及到Razor的一些語(yǔ)法，大家可以不深究"@"后面的內(nèi)容，講到頁(yè)面布局，你只要專(zhuān)注與HTML代碼就可以了。語(yǔ)法會(huì)在后面補(bǔ)充。

1.指定母版與加載機(jī)制

首先我們來(lái)看_ViewStart.chhtml頁(yè)面，它的內(nèi)容很簡(jiǎn)單:

 
 
 
 
    
  
  
  
  
  1. @{  
    2.   
  
  
  
  2.     Layout = "~/Views/Shared/_Layout.cshtml";  
    3.   
  
  
  
  3. } 
    4.

這句代碼指定了默認(rèn)的母版的位置: 當(dāng)前應(yīng)用程序根目錄下<"~"的含義>的Views/Shared/_Layout.cshtml

除非特殊情況，比如視圖是Partial視圖，或顯示的在視圖中添加以下代碼指示不使用母版:

 
 
 
 
    
  
  
  
  
  1. @{  
    2.   
  
  
  
  2.     Layout = null;  
    3.   
  
  
  
  3. } 
    4.

其他情況下，該指定頁(yè)就是視圖的母版頁(yè)。

然后我們來(lái)看看Razor母版頁(yè)_Layout.cshtml的內(nèi)容:

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     @ViewBag.Title 
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.      
    13.   
  
  
  
  13.          
    14.   
  
  
  
  14.              
    15.   
  
  
  
  15.                 
    我的 MVC 應(yīng)用程序
     
    16.   
  
  
  
  16.             
 
  •              
  •                 歡迎 @User.Identity.Name!  
  •             
    •  
  •              
  •                  
  •                     
  • @Html.ActionLink("主頁(yè)", "Index", "Home")
    •  
  •                     
  • @Html.ActionLink("關(guān)于", "About", "Home")
    •  
  •                  
  •             
    •  
  •         
    •  
  •          
  •             @RenderBody() 
  •         
    •  
  •          
  •         
    •  
  •     
    •  
  •  
  •  

    • 注意@RenderBody()這個(gè)方法相當(dāng)于一個(gè)占位符，假如我們的首頁(yè)視圖Index.cshtml是這樣，

     
 
 
 
      
  
  
  
  
    1. @{  
      2.   
  
  
  
    2.     ViewBag.Title = "主頁(yè)";  
      3.   
  
  
  
    3. }  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. @ViewBag.Message
       
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     若要了解有關(guān) ASP.NET MVC 的更多信息，請(qǐng)?jiān)L問(wèn) http://asp.net/mvc。  
      8.   
  
  
  
    8.  
      9.

    一般的視圖處理，比如當(dāng)服務(wù)器響應(yīng)一個(gè)HomeController.Index()請(qǐng)求的時(shí)候,需要返回Index視圖，

    首先會(huì)加載母版頁(yè)_Layout.cshtml的內(nèi)容，遇到@RenderBody()時(shí)，就用首頁(yè)視圖的內(nèi)容置換到這里，最后處理完成返回靜態(tài)頁(yè)面。

    2.使用Partial視圖

    MVC 2.0中，你需要使用標(biāo)簽來(lái)進(jìn)行頁(yè)面分割，太多的話自己都忘記了哪個(gè)對(duì)應(yīng)的是哪個(gè)部份。

    在Razor中，可以將需要?jiǎng)冸x出來(lái)的部份作為一個(gè)單獨(dú)的Partial視圖，比如網(wǎng)站的頭部(Logo，導(dǎo)航等等..)，底部(友情鏈接，版權(quán)聲明等等..)，或是某個(gè)功能模塊(登陸框等等..)。

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

    　　　　圖3

    依照上述步驟創(chuàng)建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"兩個(gè)視圖

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.              
      3.   
  
  
  
    3.                 
      我的 MVC 應(yīng)用程序
       
      4.   
  
  
  
    4.             
     
  •              
  •                 歡迎 @User.Identity.Name!  
  •             
    •  
  •              
  •                  
  •                     
  • @Html.ActionLink("主頁(yè)", "Index", "Home")
    •  
  •                     
  • @Html.ActionLink("關(guān)于", "About", "Home")
    •  
  •                  
  •             
    •  
  •         
    •   
     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2. ? 2008-2012 John Connor All rights reserved.  
      3.
     

    可以看出，提取Partial視圖很簡(jiǎn)單，就是把需要的內(nèi)容提取出來(lái)，放在新建的Partial視圖中。然后，我們還需要干一件事情，

    類(lèi)似于一般視圖，Partial視圖使用自己特有的占位符來(lái)替換原內(nèi)容。我們這么干之后，原_Layout.cshtml頁(yè)就變成了這樣:

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     @ViewBag.Title 
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.         @Html.Partial("_HeaderPartial") 
      14.   
  
  
  
    14.          
      15.   
  
  
  
    15.             @RenderBody()   
      16.   
  
  
  
    16.          
      17.   
  
  
  
    17.          @Html.Partial("_FooterPartial") 
      18.   
  
  
  
    18.      
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.  
      21.

    這樣，頁(yè)面的布局是不是更清爽簡(jiǎn)潔了?如同一般視圖，返回請(qǐng)求時(shí)會(huì)先加載母版頁(yè)然后遇到占位符時(shí)加載相應(yīng)的Partial視圖，最后返回處理完成的靜態(tài)頁(yè)面。

    三，Razor語(yǔ)法簡(jiǎn)介與應(yīng)用

    1.語(yǔ)法簡(jiǎn)介

    如果我們希望在HTML代碼中綁定數(shù)據(jù)，比如說(shuō)我們有一個(gè)產(chǎn)品的對(duì)象Product，需要綁定產(chǎn)品的名稱(chēng)Product.Name，只需要在變量前面加"@"即可，

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

     
 
 
 
      
  
  
  
  
    1. @Product.Name
       
      2.   
  
  
  
    2. @(Product.Price*0.8)
       
      3.

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

     
 
 
 
      
  
  
  
  
    1. @｛  
      2.   
  
  
  
    2.     var product=new product();  
      3.   
  
  
  
    3.     product.Name="pen";  
      4.   
  
  
  
    4.     product.Price=1.00;    
      @product.Name
          
      @product.Price
      ｝ 
      5.

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

     
 
 
 
      
  
  
  
  
    1. @foreach(var product in products)  
      2.   
  
  
  
    2. ｛  
      3.   
  
  
  
    3.     
      @item.Name
       
      4.   
  
  
  
    4. ｝ 
      5.

    Razor中注釋是"@**@",即可以注釋Html代碼，也可以注釋C#代碼,在代碼塊中仍可使用C#的注釋方式:

     
 
 
 
      
  
  
  
  
    1. @{  
      2.   
  
  
  
    2.     var product=new product();  
      3.   
  
  
  
    3.     product.Name="pen";  
      4.   
  
  
  
    4.     //product.Price=1.00;  
      5.   
  
  
  
    5.     
      @product.Name
       
      6.   
  
  
  
    6.     @*
      @product.Price
      *@  
      7.   
  
  
  
    7.  } 
      8.

    2.ASP.NET MVC3.0 Web中的應(yīng)用

    假設(shè)我們有一個(gè)Product類(lèi)位于JohnConnor.Data命名空間下,有Name和Price兩個(gè)屬性，HomeController.Index()方法返回一個(gè)List對(duì)象給Index視圖，打印所有產(chǎn)品名稱(chēng)，并且點(diǎn)擊產(chǎn)品名稱(chēng)時(shí)，彈出產(chǎn)品價(jià)格。

    HomeController.Index()方法如下:

     
 
 
 
      
  
  
  
  
    1. using System;  
      2.   
  
  
  
    2. using System.Collections.Generic;  
      3.   
  
  
  
    3. using System.Linq;  
      4.   
  
  
  
    4. using System.Web;  
      5.   
  
  
  
    5. using System.Web.Mvc;  
      6.   
  
  
  
    6. using JohnConnor.Data;  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. namespace JohnConnor.Web.Controllers  
      9.   
  
  
  
    9. {  
      10.   
  
  
  
    10.     public class HomeController : Controller  
      11.   
  
  
  
    11.     {  
      12.   
  
  
  
    12.         public ActionResult Index()  
      13.   
  
  
  
    13.         {  
      14.   
  
  
  
    14.             var products = new List()  
      15.   
  
  
  
    15.             {  
      16.   
  
  
  
    16.                 new Product{ Name="鋼筆", Price=11.55M},  
      17.   
  
  
  
    17.                 new Product{ Name="鉛筆", Price=2.17M},  
      18.   
  
  
  
    18.                 new Product{ Name="圓珠筆", Price=5.98M},  
      19.   
  
  
  
    19.             };  
      20.   
  
  
  
    20.             return View(products);  
      21.   
  
  
  
    21.         }  
      22.   
  
  
  
    22.     }  
      23.   
  
  
  
    23. } 
      24.

    我們來(lái)改一下Index視圖演示一下Razor的簡(jiǎn)單應(yīng)用。

     
 
 
 
      
  
  
  
  
    1. @using JohnConnor.Data;  
      2.   
  
  
  
    2. @model List 
      3.   
  
  
  
    3. @{  
      4.   
  
  
  
    4.     ViewBag.Title = "主頁(yè)";//母版中ViewBag.Title用于綁定Title標(biāo)簽，這里進(jìn)行賦值。  
      5.   
  
  
  
    5. }  
      6.   
  
  
  
    6. Razor
       
      7.   
  
  
  
    7. @foreach (var product in Model)  
      8.   
  
  
  
    8. {  
      9.   
  
  
  
    9.     //遍歷所有的產(chǎn)品  
      10.   
  
  
  
    10.      
      11.   
  
  
  
    11. } 
      12.

    在一般視圖中，首先聲明視圖模型，即Action返回的ViewResult對(duì)象的類(lèi)型<也可以不聲明，如果有返回對(duì)象建議聲明>。

    這里的視圖模型是一個(gè)List集合，因?yàn)镻roduct位于using JohnConnor.Data命名空間，所以先添加了引用。

    在母版中ViewBag.Title用于綁定Title標(biāo)簽，在一般視圖中就可以進(jìn)行賦值來(lái)綁定頁(yè)面的Title 。

    如果你不想使用母版，就在代碼塊中添加"Layout = null;"。

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

    Razor的基本內(nèi)容大概就講這些了，當(dāng)然它還有很豐富的底蘊(yùn)，需要在實(shí)際的運(yùn)用過(guò)程中去學(xué)習(xí)，一篇短文是無(wú)法涵蓋所有信息的。

    最后提一點(diǎn)，Razor暫時(shí)沒(méi)有設(shè)計(jì)視圖，這是比較悲摧的一點(diǎn)。相信之后會(huì)有的。如果對(duì)Razor的使用有任何問(wèn)題，可以在此提出，能力范圍內(nèi)的問(wèn)題我都可以提供幫助。

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

    【編輯推薦】


    新聞名稱(chēng)：ASP.NET視圖引擎攻略
    轉(zhuǎn)載來(lái)于：http://www.5511xx.com/article/coehgcg.html

    其他資訊