熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

ASP.NET MVC Razor視圖引擎攻略

2013-11-13 10:17:54  來源: .NET編程 

  引子
   
    看下面一段MVC 的代碼
   
    <%if (Model != null)
   
    {%>
   
    <p><%=Model%></p>
   
    <%}%>
   
    <%else
   
    {%>
   
    //Do something
   
    <%}%>
   
    我們站在一個讀者的立場上來看<% %>這種標記C#代碼的方法是十分蛋疼的
   
    如果寫這段代碼的人沒有良好的縮進和對齊習慣的話一段邏輯較為復雜的代碼就會堆砌著雜亂無章的<%%>匹配它們就是一件頭疼的事情會讓讀者望而生畏
   
    即使是寫代碼的本人閉合也是一件麻煩的事情並且VS對<% %>的自動縮進和對齊支持不很友好看慣了整齊的代碼面對自己寫出的凌亂的東西會很不爽
   
    隨著MVC 的發布新的Razor視圖引擎解決了這個問題
   
    Razor的意思的就是 剃刀可見它灰常犀利引言中的代碼我們用Razor的語法來寫的話
   
    @if (Model != null)
   
    {
   
    <p>@Model</p>
   
    }
   
    else
   
    {
   
    //Do something
   
    }
   
    Razor使用了@來標記一段C#代碼並幫我們進行了內部的閉合是不是感覺清爽多了?
   
    Razor在減少代碼冗余增強代碼可讀性和vs 智能感知方面都有著很大的優勢下面我們來具體的介紹如何在ASPNET MVC 中使用Razor
   
    引言End
   
    一創建基於Razor的Web程序
   
    首先你的開發環境必須安裝NET Framework然後在VS中新建項目時選擇ASPNET MVC 應用程序在選項頁面中選擇視圖引擎為Razor如圖:

  

  然後創建項目就會得到一個基於Razor的Web項目了如圖

     

  圖

  相信熟悉MVC的看官們對此結構並不陌生注意紅框部份Razor的頁面是以cshtml為後綴的下面我們來講下如何使用Razor來進行頁面布局
   
   


   
    二使用Razor來進行頁面布局
   
    UI設計師們現在也講究頁面設計的語義化和結構化把一個頁面分成很多個模塊使用語義化的類名或id來標識這些模塊Razor推出了新的布局解決方案來迎合這一潮流
   
    這裡涉及到Razor的一些語法大家可以不深究@後面的內容講到頁面布局你只要專注與HTML代碼就可以了語法會在後面補充
   
    指定母版與加載機制
   
    首先我們來看_ViewStartchhtml頁面它的內容很簡單
   
    @{
   
    Layout = ~/Views/Shared/_Layoutcshtml;
   
    }
   
    這句代碼指定了默認的母版的位置 當前應用程序根目錄下<~的含義>的Views/Shared/_Layoutcshtml
   
    除非特殊情況比如視圖是Partial視圖或顯示的在視圖中添加以下代碼指示不使用母版
   
    @{
   
    Layout = null;
   
    }
   
    其他情況下該指定頁就是視圖的母版頁
   
    然後我們來看看Razor母版頁_Layoutcshtml的內容
   
    View Code
   
    <!DOCTYPE html>
   
    <html>
   
    <head>
   
    <meta httpequiv=ContentType content=text/html; charset=utf/>
   
    <title>@ViewBagTitle</title>
   
    <link @UrlContent(~/Content/Sitecss rel=stylesheet type=text/css />
   
    <script src=@UrlContent(~/Scripts/jqueryminjs type=text/javascript></script>
   
    </head>
   
    <meta httpequiv=ContentType content=text/html; charset=utf/>
   
    <body>
   
    <div class=page>
   
    <div id=header>
   
    <div id=title>
   
    <h>我的 MVC 應用程序</h>
   
    </div>
   
    <div id=logindisplay>
   
    歡迎 <strong>@UserIdentityName</strong>!
   
    </div>
   
    <div id=menucontainer>
   
    <ul id=menu>
   
    <li>@HtmlActionLink(主頁 Index Home)</li>
   
    <li>@HtmlActionLink(關於 About Home)</li>
   
    </ul>
   
    </div>
   
    </div>
   
    <div id=main>
   
    @RenderBody()<!一般視圖內容的占位符>
   
    </div>
   
    <div id=footer>
   
    </div>
   
    </div>
   
    </body>
   
    </html>
   
    注意@RenderBody()這個方法相當於一個占位符假如我們的首頁視圖Indexcshtml是這樣
   
    View Code
   
    @{
   
    ViewBagTitle = 主頁;
   
    }
   
    <h>@ViewBagMessage</h>
   
    <p>
   
    若要了解有關 ASPNET MVC 的更多信息請訪問 <a ASPNET MVC 網站>;/a>
   
    </p>
   
    一般的視圖處理比如當服務器響應一個HomeControllerIndex()請求的時候需要返回Index視圖
   
    ? 首先會加載母版頁_Layoutcshtml的內容
   
    ? 遇到@RenderBody()時就用首頁視圖的內容置換到這裡最後處理完成返回靜態頁面
   
    使用Partial視圖
   
    MVC 你需要使用<asp:Content></asp:Content>標簽來進行頁面分割太多的話自己都忘記了哪個對應的是哪個部份
   
    在Razor中可以將需要剝離出來的部份作為一個單獨的Partial視圖比如網站的頭部(Logo導航等等)底部(友情鏈接
From:http://tw.wingwit.com/Article/program/net/201311/13192.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.