【轉載】介紹「Razor」— ASP.NET的一個新視圖引擎

 

最近在作一個項目，用的MVC razor 視圖，由於以前沒用這個視圖作過，因而查閱文檔資料，共享一下。

https://msdn.microsoft.com/zh-cn/ff849693 

內容主要是講razor視圖的來由，razor語法的一些基礎寫法及使用方法，並與aspx進行了對比。

 

介紹「Razor」— ASP.NET的一個新視圖引擎 【原文地址】 Introducing 「Razor」 – a new view engine for ASP.NET 【原文發表日期】 July 02, 2010 11:01 PM   個人團隊當前正在從事的工做之一就是爲ASP.NET添加一個新的視圖引擎。 一 直以來，ASP.NET MVC都支持 「視圖引擎」的概念—採用不一樣語法的模板的可插拔模塊。當前ASP.NET MVC 「默認」的視圖引擎是ASP.NET Web窗體使用的.aspx/.ascx/.master文件模板。而當今其餘一些流行的ASP.NET MVC視圖引擎還包括 Spark和 NHaml。 咱們正在打造一個新的視圖引擎，它是一個在HTML生成方面進行優化，採用專一於代碼的模版解決方案。它的開發代號是「Razor」，第一個beta版本很快就會發布出來。 設計目標 在設計和評估「Razor」時，咱們牢記如下幾個目標： · 緊湊、富有表現力和流暢：Razor 儘可能減小一個文件裏須要敲入的字符數，給你暢快淋漓的編碼體驗。與大部分模板的語法不一樣，你不會由於須要在HTML中標註服務器端代碼塊而中斷敲代碼的快 感。代碼分析器足夠聰明，可以從你的代碼裏推斷出是否爲服務器端代碼。這使得其簡潔、富有表現力的語法輸入可以乾淨，快速，有趣。 · 上手快： Razor很是容易上手，你只須要了解不多的新東西就能夠掌握它，使用你現有的編程語言和HTML知識就足夠了。 · 不是一個新的編程語言：咱們儘可能避免爲Razor建立一個新的命令式語言。相反，咱們但願讓程序員只使用現有的C#/VB（或其它）編程語言知識就能使用Razor，咱們只不過在你選擇的編程語言裏，提供一個很是棒的基於模板生成HTML的標記語法。 · 可使用任何文本編輯器編寫：Razor不要求什麼特別的工具，使用老古董的文本編輯器也能夠高效編程（「記事本」就不錯）。 · 很好的智能感應輸入提示：雖然Razor不是專爲某個工具或者代碼編輯器設計的，但它在Visual Studio裏仍是有很讚的智能提示功能。咱們將會升級Visual Studio 2010和Visual Web Developer 2010使得它具備完整的編輯器智能提示功能。 · 便於單元測試：新的視圖引擎支持對視圖執行單元測試，不須要控制器（controller）或者Web服務器，並且能夠包含在任意的單元測試項目中—不須要單獨的應用程序域（App-Domain）。 過去幾個月，咱們一直在用Razor來編寫程序，並邀請了一些志願者（包括好幾組非.NET的 Web程序員）來作易用性研究。使用過它的人對它的評價都不錯。 彈性的選擇空間 ASP.NET最讚的地方之一就是大部分組件都是可插拔的。若是你發現有一個組件很差用，隨時均可以換成另一個。 ASP.NET MVC的下一個版本將會包括一個新的「添加->視圖」對話框，它讓你能夠方便地在建立新的視圖模板文件時選擇你想要使用的語法。它還便於你選擇任一個安裝在機器上的視圖引擎—選擇你感受最天然的視圖方案： Razor將會是ASP.NET MVC內置的視圖引擎之一。全部的視圖輔助（helper）方法和編程模型特性同時支持Razor和.ASPX視圖引擎。 你 還將能夠在單個站點或程序中混合使用多個視圖引擎寫的視圖模板。好比說，你能夠編寫一些視圖，有些用.aspx文件，有些用.cshtml或 者.vbhtml文件（分別是Razor的C#和VB版本的文件後綴名），而另一些用Spark或者NHaml。你還能夠在採用一種視圖引擎的視圖模板 裏包含用另外一種引擎編寫的局部視圖模板。總之，你有靈活的選擇空間。 Razor版的「Hello World」 Razor容許你從靜態的HTML頁面（或者任意的文本內容）開始，添加服務器端代碼使其變成動態頁面。Razor的一個核心設計理念就是使編碼過程更加流暢，而且只要最少的按鍵次數就能快速地在HTML標記中添加服務器端代碼。 讓咱們來建立一個簡單的例子：「hello world」，它的最終輸出以下圖所示： 使用.ASPX「代碼碎塊 [ii]」的方式編寫 若是用現有ASP.NET的.ASPX標記語法來編寫上面的「Hello World」示例的話，咱們須要在HTML標籤中使用」<%= %>」來標記「代碼碎塊」： 仔細觀察就能夠發現上例中每個代碼碎塊都須要5個字符（」<%= %>」）來標明代碼的開始和結束位置。並且其中還有幾個字符在鍵盤上不是特別好敲到（特別是「%」鍵—它位於大部分鍵盤的中上部）。 使用Razor的語法編寫 在Razor中，你只須要用一個」@」字符就能夠標識代碼塊的開始，與」<% %>」代碼碎塊不同，Razor不須要你顯式指明代碼塊的結束位置： Razor分析器懂得代碼塊中使用的C#或VB的語法—這就是爲何上例中咱們不須要顯式關閉代碼塊的緣由。Razor能夠自動識別出上面的語句是獨立的代碼塊並悄悄地爲咱們關閉它們。 看看，即便是像「hello world」這樣微不足道的例子就爲咱們節省了12次鍵盤敲擊。並且在鍵盤上」@」字符還比」%」字符更容易按，敲起來更快也更流暢。 循環和內嵌HTML示例 讓咱們來看看另一個簡單的場景，好比說要列出一些商品（並在每樣商品旁標明價格）： 用.ASPX」代碼碎塊」編寫 若是用ASP.NET現有的.ASPX標記語法，咱們可能須要寫相似下面的代碼來動態生成一個<ul>列表，裏面包含表示每一個商品的<li>元素： 使用Razor語法 下面是生成一樣輸出的Razor版本的代碼： 請 注意上面」@」符號是如何開始一個「foreach」循環，並在循環內嵌入一行包含代碼塊的HTML語句的。由於Razor分析器知道咱們在代碼塊裏用的 C#語法，它能夠識別出<li>標籤裏的內容應該被包含在foreach代碼塊中，並循環處理它們。它甚至還知道末尾的「｝」結束 foreach循環。 Razor很聰明，還能識別出<li>標籤內的@p.Name和@p.Price是服務器端代碼—而且在每次循環時執行它們。另外請留心Razor在HTML和代碼混合的狀況下，還能推導出@p.Name和@p.Price代碼塊的結束位置。 不須要在你的模板中添加許許多多打開／關閉標記來編寫代碼的感受果真是酣暢淋漓。 If代碼塊和多行語句 下面是其餘幾個常見的場景： If語句 跟上面的foreach示例同樣，你能夠在if語句中直接嵌入內容（或其餘C#或者VB語言元素），而不須要顯式指明代碼塊的開始和結束位置。例如： 多行語句 你能夠像下面這樣，使用「@{ 代碼 }」 標註多行語句： 請注意上例中，變量能夠被多個代碼塊引用—變量「message」在包含多行語句的「@{}」塊中定義，但也能夠被@message代碼塊使用。這個跟.aspx文件裏的」<% %>」和」<%= %>」的語法相似。 多符號語句 「@()」語法容許代碼塊中有多個符號，例如，咱們能夠把上例中鏈接字符串和數字的代碼使用」@ ()」 代碼塊這樣重寫： 集成代碼和內容 Razor解析器內置了不少語言智能—髒活累活幫你作。 在HTML裏，它會不會影響」@」符號在電子郵件地址和其餘地方的用法？ 大部分狀況下，Razor解析器都有足夠的能力推導出模板裏的一個「@」字符究竟是在代碼中用到，仍是在靜態內容中用到。例如，我在下例中的郵件地址中使用了」@」字符：   當 解析文件時，Razor會分析」@」字符右邊的內容來判斷它究竟是代碼（若是是CSHTML文件的話那就是C#代碼，而若是是VBHTML文件的話那就是 VB代碼）仍是靜態文本內容。上例中的代碼會輸出如下的HTML（郵件地址被看成靜態內容輸出，而@DateTime.Now就被看成代碼執行了）：   若是碰到和代碼同樣格式的內容（或者你想把代碼看成內容看待），你能夠顯式地打@@來用另一個」@」字符進行轉義。 識別內嵌的內容 當在一個if/else，foreach或者其餘塊語句中內嵌HTML文本時，能夠考慮用一個HTML或XML標籤將嵌套內容環繞起來，這樣能夠更清楚地標明一個文本內容塊的開始。 例如，下例我使用<span>標籤包圍多行文本內容，而文本里還有一個代碼塊：   在客戶端的顯示結果以下—注意那個<span>標籤：   若是你不想在顯示文本內容時，把外面的標籤也輸出到客戶端，那能夠考慮使用<text>將嵌套內容括起來：   上面的代碼在客戶端的輸出結果以下—請注意外面的<text>標籤沒有被輸出：   HTML編碼 默認狀況下，」@」語句塊生成的內容會自動對HTML代碼進行過濾和轉換 [Yimin1] ，用來更好地防範XSS垮站腳本攻擊。 版面設計/母版頁的狀況—基礎篇 在站點中保持一致的頁 面觀感風格很是重要。ASP.NET 2.0引入了「母版頁面（master page）」的概念，就是用來幫助在使用基於.aspx的頁面或模板時實現這個功能。Razor一樣也支持這個概念，它用的是「版面設計頁面 （layout pages）」—你能夠先定義一個通用的站點模板，而後在站點其餘視圖或頁面繼承模板定義的統一觀感。 版面設計的一個簡單示例 下 面是一個簡單的版面設計頁面示例，文件將會被保存爲「SiteLayout.cshtml」。它包含了全部要放在頁面裏的靜態HTML文本內容和動態的服 務器端代碼。接着咱們添加了一個名爲「RenderBody()」的輔助函數，放在模板中須要根據所請求的URL而「填入」具體內容的地方： 接下來咱們再建立一個名爲「Home.cshtml」的視圖模板，它只包含了必要的文本內容和代碼來構成所請求頁面的具體內容，外圍的內容則由版面模板提供： 請 留意上面在Home.cshtml文件中咱們怎麼來顯式地設置「LayoutPage」屬性。它指明瞭咱們指望用SiteLayout.cshtml做爲 這個視圖的版面設計模板。咱們還能夠在ASP.NET MVC 控制器（Controller）調用Home.cshtml這個視圖模板的時候，能夠指定這個版面設計文件，或者將其配置爲站點默認的版面設計模板（這種 狀況下，咱們只須要在項目中的一個文件中指定它，而全部的視圖模板都會自動採用它）。 當咱們將Home.cshtml做爲一個視圖模板顯示時，它會合並版面設計頁和子頁面的內容，而後將下面的內容發送到客戶端： 簡潔、清晰、富有表現力的代碼 上例中值得注意地方的還有一點，就是版面定義和在視圖/頁面中使用它們的語法既清晰又簡練。上面列出的SiteLayout.cshtml和Home.cshtml代碼截圖已經包含了兩個文件全部的代碼—沒有額外的配置步驟或冗餘的標籤，沒有<%@ Page %>前綴，也不須要設置其它的標籤或者屬性。 咱們盡力使編寫出來的代碼簡潔流暢。咱們還但願任何人均可以在一個文本編輯程序中打開、編輯和調整/自定義它們。不須要代碼生成或者智能提示（Intellisense）。 版面設計頁面/母版頁的狀況—覆寫部份內容 版面設計頁面能夠有選擇性地定義幾個不一樣的「節」，容許基於這個版面設計的視圖模板經過「填入」自定義的內容來覆寫它。這就容許你在視圖中覆寫版面設計頁裏不連續的內容段落，從而使你的站點版面設計更有彈性。 例 如，咱們回到SiteLayout.cshtml文件，並在其中定義兩個節，這樣視圖模板能夠有選擇性的填充這兩個節。咱們將節的名稱命名爲「menu」 和「footer」—而後在RenderSection()輔助函數傳入optional=true這個參數來代表它們是可選填充節（咱們能夠用C#最新 的 optional參數語法來作這件事情，我在前面的 博客裏也提到了這個用法）。   由於兩個節被標記成了「可選」，不須要在Home.cshtml文件中定義它們。即便沒有它們，站點依然能夠正常工做。 讓咱們回到Home.cshtml並自定義Menu和Footer節。下面的截圖包含了Home.cshtml裏全部的內容—再沒有其它內容了。注：我已經把LayoutPage設置爲站點範圍的默認模板了—因此它沒有顯示在裏面。   我 們覆寫的」menu」和「footer」節定義在文件裏的以相應的名字命名的@section { }塊裏面。咱們刻意不要求你在節裏包含「main/body」內容，相反將它們內聯在頁面裏（除了節省鍵盤敲擊的次數之外，還便於你在版面設計頁面中添加 新的節之後，不須要再回去修改全部已有頁面的語法）。 當再次將Home.cshtml以視圖模板的形式顯示的時候，它如今會合並版面設計頁和子頁面裏的內容，並將兩個自定義節覆寫的內容整合進來，最終發送到客戶端的內容以下：   封裝和重用HTML輔助函數 咱們剛剛講過如何使用版面設計頁給站點提供統一的觀感。如今讓咱們看看如何經過建立可複用的「HTML輔助函數」來把生成HTML的功能封裝成一個函數庫，這樣能夠在整個站點複用—甚至在多個站點複用。 基於代碼的HTML輔助函數 ASP.NET MVC有一個「HTML輔助函數」的概念—封裝了生成HTML的邏輯並能夠用在代碼塊裏的函數。它們當前還都是純粹經過代碼實現的，通常經過擴展函數 （Extension Method）實現。現有的全部內置在ASP.NET MVC裏的HTML擴展函數均可以使用在「Razor」視圖引擎裏（不須要修改任何代碼）：   聲明式的HTML輔助函數 使用純代碼的類來生成HTML能夠工做—但不是很理想。 咱們來看Razor的另一個特性，使用簡單的更具描述性的方法建立可複用的HTML輔助函數。咱們計劃讓你可使用相似下面的 @helper { }聲明式語法建立可複用的輔助函數： 你將能夠把包含有這種輔助函數的.cshtml文件放到一個Views\Helpers文件夾，而後就能夠在站點上使用它們了（再沒有其它的步驟了）：   請注意上例中咱們能夠爲ProductListing()函數定義參數。這樣你就能夠爲函數傳入任意的參數了（並且還能徹底利用可選參數，nullable類型，範型等現有編程語言的特性），另外還有Visual Studio強大的調試支持。 注：@helper語法在Razor的第一個beta版裏尚未—但咱們但願能在下一個發佈裏把它包含進來。基於代碼的輔助函數在第一個Beta版本里就可使用。 傳入內聯模板做爲參數 Razor中另外一個頗有用（或者能夠說是至關了得）的功能就是容許向輔助函數傳入「內聯模板」參數。這些「內聯模板」能夠同時包含HTML和代碼，並且能夠被輔助函數即行調用。 下例中的「Grid」HTML輔助函數就是經過這種技術在客戶端呈現一個DataGrid：   上例中Grid.Render()函數調用使用的是C#語法。咱們使用了新的語法— C#命名參數把強類型的參數傳給Grid.Render函數。這同時也意味着咱們可使用所有智能提示，還有編譯時的語法檢查功能。 在 定義列的時候傳給「format」參數的就是一個「內聯模板」—它同時包含了自定義的html和代碼，它們是用來自定義數據的顯示方式的。更厲害的 是，Grid輔助函數能夠把咱們的 「內聯模板」看成一個委託來調用，想幾時調用就幾時調用，想調用多少次就調用多少次。在上面的場景裏，每呈現grid的一行，就會調用它一次—並經過傳入 「item」變量，以便咱們的模板能夠顯示恰當的內容。 這個功能容許你開發功能更強大的HTML輔助函數。從此你既可使用代碼方式（跟如今建立擴展函數的方式同樣），也可使用聲明式的@helper { }方式來編寫HTML輔助函數。 對Visual Studio的支持 前面說過，Razor的一個目標就是儘可能減小鍵盤敲擊次數，並且使用普通的文本編輯器就能夠編寫（記事本就很不錯了）。咱們經過保證語法清晰簡單幹練來實現這個目標。 Visual Studio也支持Razor， 使你在裏面編寫Razor代碼時感受更豐富。對於基於Razor的源文件，咱們提供了完整的HTML、JavaScript和C#/VB代碼智能提示功能：   請 注意，上面咱們甚至爲嵌入在foreach循環體裏面<li>元素的Product對象的「@p.」啓用了智能提示。另外還要注意的地方是， 在「解決方案資源管理器」的「\View」文件夾裏，同時存放了.aspx和.cshtml視圖模板。你能夠在單個程序中使用多個視圖引擎—便於你選擇最 適合你的引擎。 總結 咱們認爲「Razor」是一個很是好的新的視圖引擎，它提供了流暢的專一於代碼的模版方案。它的編碼 工做流快速、富有表現力並有趣。語法簡練並節省按鍵次數，同時還提高了代碼的可讀性。它會做爲內置的視圖引擎並隨下一個版本的ASP.NET MVC發佈。你也能夠把單獨的.cshtml/.vbhtml放到程序裏，並把它們看成獨立的頁面執行—這樣你就也能夠在ASP.NETWeb窗體程序中 使用它了。 前幾個月裏，試用過它的開發人員對它的評價都很是好。咱們立刻就要發佈它的第一個beta版，並期待收到您對它的反饋。 但願這能對您有所幫助。 Scott