ASP.NET WP - 佈局

在本章中，我們將介紹如何建立一個具有統一佈局的網站。在日常生活中，您可能見過許多具有統一外觀和風格的網站，例如：

每個頁面都有相同的頁首
每個頁面都有相同的頁尾
每個頁面都具有相同的樣式和佈局

為了提高效率併為您的網站建立網頁，您可以為您的網站建立可重用的內容塊（如頁首和頁尾），併為所有頁面建立一致的佈局。

建立可重用的內容塊

ASP.NET 允許您建立一個包含內容塊的單獨檔案，該內容塊可以包含文字、標記和程式碼，就像一個普通的網頁一樣。

然後，您可以在網站上的其他頁面中插入內容塊，以顯示您想要的資訊。
這樣，您就不必將相同的內容複製貼上到每個頁面中。
建立這樣的通用內容還可以更輕鬆地更新您的網站。
如果需要更改內容，只需更新單個檔案，然後更改就會反映在所有插入內容的位置。

讓我們來看一個簡單的示例，在該示例中，我們將建立一個引用兩個內容塊的頁面——頁首和頁尾，它們位於單獨的檔案中。您可以在網站的任何頁面中使用這些相同的內容塊。

透過右鍵單擊專案並選擇新建檔案，在根目錄中建立一個新的index.cshtml檔案。

選擇 CSHTML 檔案型別，在“名稱”欄位中輸入index.cshtml，然後單擊“確定”，並用以下內容替換 index.cshtml 檔案中的程式碼

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
   </body>

</html>

現在讓我們執行應用程式並指定以下 URLhttps://:46023/index，然後您將看到以下輸出。

現在，我們需要在網站中新增頁首和頁尾，因此在根資料夾中，透過右鍵單擊專案並選擇“新建資料夾”，然後將其命名為“Shared”。將共享在 Web 頁面之間共享的檔案儲存在名為 Shared 的資料夾中是一種常見做法。您也可以參考以下螢幕截圖。

右鍵單擊 Shared 資料夾並選擇新建檔案。

選擇 CSHTML 檔案型別，在“名稱”欄位中輸入_Header.cshtm，然後單擊“確定”。

前導下劃線 (_) 字元很重要。如果頁面名稱以下劃線開頭，ASP.NET 將不會直接將該頁面傳送到瀏覽器。此約定允許您定義網站所需頁面，但同時使用者不能直接請求它們。

替換_Header.cshtm中的程式碼，如以下程式所示。

<div class = "header">
   This is header text from _Header.cshtml file
</div>

同樣，在 Shared 資料夾中新增另一個檔案 _footer.cshtml，並替換程式碼，如以下程式所示。

<div class = "footer">
   © 2016 XYZ Pvt. Ltd. All rights reserved.
</div>

如您所見，我們已添加了頁首和頁尾，現在我們需要透過呼叫RenderPage方法從 Index.cshtml 頁面顯示這些內容，如以下程式所示。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

您可以透過呼叫 RenderPage 方法並將要插入內容的檔名作為引數傳遞，將內容塊插入網頁中。在上面的程式碼中，您可以看到我們已將_Header.cshtml和_Footer.cshtml檔案的內容插入到Index.cshtml檔案中。

現在讓我們再次執行應用程式並指定以下 URL - https://:46023/index，然後您將看到以下輸出。

同樣，您只需透過呼叫 RenderPage 方法並傳遞檔名，即可在網站的所有頁面上新增頁首和頁尾。

使用佈局頁面建立一致的外觀

建立網站一致外觀的更結構化方法是使用佈局頁面。佈局頁面定義網頁的結構，但不包含任何實際內容。

佈局頁面就像任何 HTML 頁面一樣，只是它包含對 RenderBody 方法的呼叫。
RenderBody 方法在佈局頁面中的位置決定了內容頁面中的資訊將在哪裡包含。
建立佈局頁面後，您可以建立包含內容的網頁，然後輕鬆地將它們連結到佈局頁面。
顯示這些頁面時，將根據佈局頁面對其進行格式化。
佈局頁面充當其他頁面中定義內容的模板。

讓我們透過右鍵單擊並選擇“新建檔案”將佈局頁面新增到網站的根目錄中。

單擊“確定”繼續，並替換以下程式碼。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title> Structured Content </title>
      <link href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css" />
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <div id = "main">@RenderBody()</div>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

您可以在佈局頁面中使用 RenderPage 方法插入內容塊，就像我們在上面為頁首和頁尾所做的那樣。佈局頁面只能包含對 RenderBody 方法的一次呼叫。

在上面的程式碼中，您可以看到我們已添加了對Site.css檔案的引用，但我們尚未建立此檔案，因此我們需要在根資料夾中新增一個新資料夾，並將其命名為 Styles。

在 Styles 資料夾中，建立一個名為 Site.css 的檔案

在 Site.css 檔案中新增以下樣式定義：

h1 {
   border-bottom: 3px solid #2f84d6;
   font: 3em/2em Georgia, serif;
   color: #911a42;
}
ul {
   list-style-type: none;
}
body {
   margin: auto;
   padding: 1em;
   background-color: #d9dbdb;
   font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
   color: #100478;
}
#list {
   margin: 1em 0 7em -3em;
   padding: 1em 0 0 0;
   background-color: #ffffff;
   color: #996600;
   width: 25%;
   float: left;
}
#header, #footer {
   margin: 0;
   padding: 0;
   color: #996600;
}

現在讓我們在您的專案中新增另一個 cshtml 檔案，命名為MyLayoutPage.cshtml，並新增以下程式碼。

@{
   Layout = "~/_Layout.cshtml";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>

要從任何頁面使用新佈局，您只需在任何頁面的頂部新增以下行，如以下程式所示。

@{
   Layout = "~/_Layout.cshtml";
}

現在讓我們再次執行應用程式並指定以下 URLhttps://:46023/MyLayoutPage，然後您將看到以下輸出。

列印頁面