導讀：Microsoft WebMatrix是一個免費的工具，可用於建立、自訂和在Internet上發布網站。
WebMatrix使您能夠輕鬆建立網站。您可以從一個開源應用程式（比如WordPress、Joomla、 DotNetNuke或Orchard）開始，WebMatrix會為您處理下載、安裝和配置這些應用程式的任務。或者您可以使用許多內建的模板自行編寫代碼，這些模板有助於您迅速上手。無論您做何選擇，WebMatrix都提供了您的網站運行所需的一切內容，包括Web伺服器、資料庫和架構。通過在您的開發案頭使用與您將在Web主機上使用的相同堆棧，將網站上線的過程變得既輕鬆又順利。
您可以從http://web.ms/webmatrix下載它。
現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下：
目前為止，您瞭解了如何使用WebMatrix建立一個非常簡單的網頁，此網頁如何在多種不同的瀏覽器中運行，以及如何使用CSS樣式來使基本的網頁更加美觀。
在本章中，您將更進一步，開始使用伺服器編程。您可能習慣於用戶端編程，比如構建在電話、案頭上啟動並執行應用程式或者甚至在瀏覽器內啟動並執行JavaScript應用程式。伺服器編程的重要區別在於，許多應用程式代碼不在用戶端裝置上運行。相反，終端使用者的操作會向伺服器發起網頁請求，如果該網頁是“活動”網頁，伺服器將運行代碼並使用該代碼產生將發送給瀏覽器的 HTML 標籤和值。然後瀏覽器呈現此 HTML，使用者會看到顯示的結果。
隨著您技能的不斷提升，您將發現有時候將代碼混搭在一起會很有用，一些代碼在瀏覽器上運行（通常使用JavaScript或Silverlight等富Internet應用程式(RIA)技術），剩餘代碼在伺服器上運行。
WebMatrix為網頁編程引入了Razor文法，它提供的一項功能非常強大，但非常簡單，那就是布局引擎。在本文中我們將介紹使用布局功能將所有常見的HTML（比如 <head>和頁尾內容）放在一個位置並為您的網頁自動產生這些內容，這樣當構建網頁（比如電影列表）時，該網頁的檔案將僅擁有該網頁的主要內容，您可以添加並完全控制剩餘內容。
建立使用Razor的CSHTML網頁
目前為止，您建立了使用.HTM 或 .HTML副檔名的HTML網頁。這些是靜態網頁，所以瀏覽器調用它們的地址時，伺服器會將它們和它們的內容發送給瀏覽器。伺服器不會以任何方式處理該網頁。
您可能聽說過“動態”網頁，這些網頁是伺服器基於HTML以及在伺服器上運行來確定應該如何構建網頁的代碼所構建的，構建的內容將HTML化。動態網頁能夠實現真正強大的使用情境，本系列的後續內容將使用它們。除此之外，它們將允許您將電影儲存到資料庫中，讓伺服器利用資料庫中的資料產生您網頁的內容，您無需直接在 HTML 網頁上編寫電影標題，也無需在希望更改列表時更改網頁。
在本節中，您將建立第一個動態網頁。
在WebMatrix 中，動態網頁具有 .CSHTML 或 .VBHTML副檔名。它們實際上是HTML檔案，包含使用 C# (CS) 或 Visual Basic (VB) 編寫的內聯代碼，這從副檔名可以看出。我將使用 CSHTML 檔案，這樣能夠使用 C# 語言在網頁上編寫內聯代碼。執行此操作的方法，以及支援在 HTML 內部執行此操作的文法具有暱稱“Razor”。
我們建立一個動態網頁。
使用WebMatrix，在 Files 工作區中，建立一個名為movies.cshtml的新CSHTML網頁：
WebMatrix將建立一個網頁，它看起來像一個基本的HTML網頁。將此網頁的內容替換為以下內容：
<div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div>
這段代碼是不是看起來很奇怪？代碼中沒有<HTML>標記，沒有<HEAD>或<BODY>標記，但它仍然能生效！或者至少能基本生效。運行它，您將看到以下介面：
頁首和頁尾
上面的網頁非常類似於我們之前建立的網頁，但是讓我們將網頁頁首定義為HTML中包含電影列表的<div>之前的所有內容，將頁尾定義為 HTML中包含電影列表的<div> 之後的所有內容。不要將此與您到目前為止一直使用的 default.html 網頁的 <header> 和 <footer> 標記混淆了。
建立一個名為“PageHeader.cshtml”的新網頁，將 default.html 中 moviesList <div> 上方的所有內容複寫到它之中。它應該類似於：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> <link rel="stylesheet" type="text/css" href="movies.css" /> </head> <body> <header> <h1>A list of my Favorite Movies</h1> </header>
類似地，建立一個名為“PageFooter.cshtml”的新網頁，將 default.html中moviesList <div>下方的所有內容複寫到它之中。它應該類似於：
<footer> This site was built using Microsoft WebMatrix. <a href="Download>http://web.ms/webmatrix">Download it now.</a> </footer> </html>
使用Razor動態添加頁首和頁尾
現在您建立了這兩個網頁，接下來使用“Razor”編寫第一部分伺服器代碼。WebMatrix 通過使用“@”字元，突出了HTML和“Razor”代碼之間的區別。將此字元放在指示伺服器如何操作的任何程式碼之前。
例如，以下命令：
@RenderPage("pagename")將導致伺服器從“pagename”載入HTML並將它放在當前檔案中的此位置。所以對於我們的樣本，如果將movies.cshtml更改為：
@RenderPage("PageHeader.cshtml") <div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> @RenderPage("PageFooter.cshtml")
當運行網頁時，它將類似於以下介面：
它與靜態 HTML 檔案的外觀完全一樣。您不應該感到奇怪，因為它現在具有相同的頁首和頁尾（包括要求網頁載入 CSS 的代碼）以及相同的本文。但是可以看到，現在對頁面的處理輕鬆多了，因為所有頁首和頁尾代碼都不需要處理，您建立的任何新網頁都將具有相同的頁首、頁尾和樣式表。
建立布局網頁
使用此方法，您建立了網頁，然後在頁面運行時使用Razor代碼將頁首和頁尾程式碼封裝含在網頁上。這是一種自底向上的方法。
另一種可能更有效方法是建立一個布局，將該布局用作每個網頁的模板，然後將您想要的特定內容包含在該模板中。這更像是一種自頂向下的方法。
我們看一下它的工作原理：建立一個新CSHTML網頁，您將它命名為 _siteLayout.cshtml。
將建立的網頁的內容替換為以下內容。您可能發現這些代碼很熟悉，因為它們是您之前建立的靜態 default.html 網頁中的所有內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> <link rel="stylesheet" type="text/css" href="movies.css" /> </head> <body> <header> <h1>A list of my Favorite Movies</h1> </header> <div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> <footer> This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
現在將名為“movieslist”的 <div> 替換為以下代碼：
@RenderBody()
請記住，前面我們說過“@”符號告訴WebMatrix此時在伺服器上運行代碼。RenderBody 命令只是告訴 WebMatrix 在此位置呈現網頁的內容。
下面是 _sitelayout.cshtml 網頁現在應該包含的內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> <link rel="stylesheet" type="text/css" href="movies.css" /> </head> <body> <header> <h1>A list of my Favorite Movies</h1> </header> @RenderBody() <footer> This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
所以，對於您剛才建立的網頁movies.cshtml，該網頁的內容為 <div> 和 <ol><li> 列表。因此我們的理念是，當您瀏覽到 CSHTML 網頁時，WebMatrix 將使用布局網頁確定如何繪製網頁，因此它擷取標題、CSS 和來自布局網頁的所有內容。
在嘗試此代碼之前，不要忘記從movies.cshtml 刪除@RenderPage 命令。
然後建立 _PageStart.cshtml
把其中的內容替換為:
@{ Layout = "~/_siteLayout.cshtml"; }
_PageStart.cshtml告訴啟動的 cshtml 頁與布局檔案關聯
現在啟動movies.cshtml,便可看到效果
備忘:movies.css
[css] view plain copy
body { font-family: Tahoma, Verdana, Geneva, sans-serif; width: 85%; margin: 20px auto; } header { padding: 10px; border-bottom: 1px solid #e5e5e5; } header h1 { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; } #movieslist{ margin: 20px 0; } #movieslist ul { list-style: none; margin: 0; padding: 0; } #movieslist li a { font-size: large; color: #000000; display: block; padding: 5px; } #movieslist li a:hover { border-left: 10px solid #94c9d4; padding-left: 10px; background-color: #e7f5f8; text-decoration: none; } footer { font-size: smaller; color: #ccc; text-align: center; padding: 20px 10px 10px 10px; border-top: 1px solid #e5e5e5; }
以上就是WebMatrix進階教程(4)：如何使用布局的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
