如何在ASP.NET Web站點中統一頁面佈局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

時間  2019-11-09
標籤 如何 asp.net asp web 站點 中統 頁面 佈局 creating consistent layout pages razor sites 欄目 ASP 简体版
原文   原文鏈接

如何在ASP.NET Web站點中統一頁面佈局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

1、佈局頁面介紹[About Layout Pages]

　　不少網站有些內容須要顯示在各個頁面中，好比Header,Footer或者告訴用戶已經登陸的部分。ASP.NET容許你建立一個單獨的文件來包含文本、標籤和代碼的內容塊，從而搭建一個風格整齊的網站。接下來你就能夠將這個內容塊插入到任何你想要讓它展現的頁面中。採用這種方法您不須要將這部份內容在各個頁面中複製粘貼。因爲建立了公共內容，也使您的更新維護更加簡單。若是你須要修改這些內容，只需更新一個文件便可，這個修改操做但會反映到全部你應用了此內容的頁面。css

　　下面展現了內容塊是如何工做的。當一個web服務器請求一個頁面時，ASP.NET便會將內容塊插入到RenderPage方法被調用的地方。最終合併的頁面就會被髮送到瀏覽器。html

 

　　接下來這個過程當中，您將會建立一個包含兩個內容塊（一個Header和一個Footer）的頁面，這些內容塊是單獨存在在不一樣文件中的。您也能夠在網站中的任何頁面中使用這些內容塊。操做完成以後，您將會獲得一個相似效果：web

  1. 在網站的根目錄下，建立一個名爲Index.cshtml的文件。
  2. 用如下內容替換文件默認生成的全部內容： 
     1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Main Page</title>
 5   </head>
 6   <body>
 7     <h1>Index Page Content</h1>
 8     <p>This is the content of the main page.</p>
 9   </body>
10 </html>

　　

　　3.  在根目錄下，建立一個Shared文件夾。瀏覽器

注：在Web頁面中一般將存在公共頁面文件的文件夾命名爲Shared。服務器

　　4.  在Shared文件夾下，建立一個_Header.cshtml視圖文件。框架

 　  5.  用如下內容替換之：asp.net

<div class="header">This is header text.</div>

         注意文件_Header.cshtml是如下劃線(_)爲前綴的。若是一個頁面的名字如下線線開頭，ASP.NET則不會將其發送到瀏覽器。從而阻止人們向這些頁面直接發起的請求。由於您並不真的但願用戶請求這些頁面—他們的存在只是做爲插入到其餘頁面的，因此用下劃線前綴爲這些內容塊頁面命名是一個很好的主意。ide

　　6.  在Shared文件夾中，建立_footer.cshtml視圖文件，並替換爲如下內容：佈局

<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved. 
</div>

　　7.　在Index.cshtml頁面中，調用兩次RenderPage()方法，以下所示：post

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>

　　以上展現瞭如何在一個web頁面中添加內容塊。調用RenderPage()方法並傳入您但願插入內容的文件名。在這個示例中，您正在將_Header.cshtml和_Footer.cshtml文件中的內容插入到Index.cshtml文件中。

　　8.　在瀏覽器中運行Index.cshtml頁面。

　　9.　在瀏覽器中，查看頁面源代碼。（例如,IE中，右建->點擊查看源[View Source]）。

　　您會看到合併了Index頁面標籤和內容塊（_Header.cshtml和_Footer.cshtml）以後，發送到瀏覽器的整個頁面。下面的示例展現了Index.cshtml渲染以後的源代碼。您添加到Index.cshtml中的RenderPage()方法調用被替換成了header和footer文件中實際內容。

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>
View Code

 

2、使用佈局頁面統一風格[Creating a Consistent Look Using Layout Pages]

　　到目前爲止，您已經看到了很容易就實現了多個頁面中包含相同內容。建立統一風格站點更具結構化的方法是使用佈局頁面。一個佈局頁定義了Web頁面的結構，可是並不包含任何實際內容。當您建立了一個佈局頁以後，您能夠編寫包含內容或聯合佈局頁的Web頁面（？）。這些頁面也會按佈局頁統一格式化顯示。（在這個意義上，佈局頁實際是利用定義在其餘頁面中的內容提供一種模板。）

　　這種佈局頁除了包含對RenderBody()方法的調用，就像大多數HTML頁面。佈局頁面中RenderBody()方法的位置肯定了未來包含內容頁面中信息的位置。

　　下圖展現了運行的時候內容頁面和佈局頁面是如何合併，並生成最終頁面的。瀏覽器請求內容頁時，內容頁有代碼聲明瞭其應用的佈局頁面，並應用該佈局頁面的結構。在佈局頁面中，內容頁的信息都會插入到RenderBody方法調用的位置。經過調用RenderPage()方法，內容塊也能夠插入到佈局頁面中，就像上一節中的示例同樣。

　　接下來演示如何建立一個佈局頁並將內容頁整合進去。

  1. 在Shared文件夾下建立一個_Layout1.cshtml的文件。
  2. 用如下代碼替換其中全部內容： 
    <!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    在佈局頁面中使用RenderPage()方法插入內容塊。一個佈局頁面只能包含調用一次RenderBody()方法。

  3. 在Shared文件夾下，建立一個_Header2.cshtml的文件並用如下內容替換之： 
    <div id="header">Creating a Consistent Look</div>
  4. 在根目錄下，建立一個Styles文件夾。
  5. 在Styles文件夾下，建立Site.css文件並添加如下樣式定義： 
    h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#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;
}
    View Code
  6. 在根目錄下，建立Content1.cshtml文件並用如下內容替換： 
    @{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    這就是一個應用了佈局頁面的頁面。頁面頂部的代碼塊指示了將應用哪個佈局頁面來格式化這些內容。

  7. 在瀏覽器中運行Content1.cshtml,這個渲染的頁面使用了定義在_Layout1.cshtml的格式、樣式表和定義在Content1.cshtml中的文本（內容）。

    您還能夠重覆第6步建立共享了相同佈局頁面的內容頁面。

3、設計包含多個內容部分的佈局頁面[Designing Layout Pages That Have Multiple Content Sections]

　　一個內容頁面能夠包含多個部分，這對於但願使用有可替換內容的多塊區域佈局是很是有用的。在這樣的內容頁面中，爲每一部分單獨命名，名稱不能重複。在這個佈局頁面中，添加RenderBody()方法指定未命名（默認部分就是未命名）的部分出現。接下來添加RenderSection()方法來單獨渲染已命名的部分。

　　接下來展現ASP.NET如何處理分割成多部分的內容。內容頁面中全部已命名的部分包含在一個部分塊中。（以下面示例中被命名爲Header和List。）框架會在佈局頁面中調用RenderSection()方法的地方插入內容部分。正如前面所見，未命名（默認）部分會插入到調用RenderBody()方法的位置。

　　接下來示範如何建立一個包含多內容部分的內容頁面，以及如何使用支持多內容部分的佈局頁面渲染它。

  1. 在Shared文件夾中，建立_Layout2.cshtml文件
  2. 用如下內容替換生成的全部內容： 
    <!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    使用RenderSection()方法可同時渲染header和list部分。

  3. 在根目錄下建立Content.cshtml文件並用如下內容替換： 
    @{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

        這個內容頁面包含了頁面頂部的代碼塊。全部命名部分都被包含在一個部分塊中。頁面其他的包含默認（未命名）的內容部分。

  4. 在瀏覽器中運行Content2.cshtml。

4、使用內容部分可選參數[Making Content Sections Optional]

　　一般，您在一個內容頁面中建立的部分必須徹底匹配在佈局頁面中定義的部分。只要下列任一條件發生，您都將獲得一個錯誤：

l  內容頁面中包含一個在佈局頁面中無相應部分的部分。

l  佈局頁面中包含一個部分，可是沒有內容。

l  佈局頁面中包含嘗試將同一部分渲染超過一次的方法調用。

　　然而，您能夠在佈局頁面中爲命名部分申明爲可選來重寫這些行爲。歷來使您定義多個共享同一佈局頁面的內容頁，且它爲一個具體部分能夠也可不用提供內容。

  1. 打開Content2.cshtml文件並刪除如下部分：
@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

　　2.  保存頁面並在瀏覽器中運行。由於內容頁面沒有爲已命名的header部分提供內容部分。


　　3.  在Shared文件夾中，打開_Layout2.cshtml頁面並替換掉如下內容：

@RenderSection("header")

　　使用如下代碼：

@RenderSection("header", required: false)

　　使用爲替代，也可使用如下代碼塊替換，產生相同的結果：

@if (IsSectionDefined("header")) {
    @RenderSection("header")
}

　　4.  在瀏覽器中再次運行Content2.cshtml.此次即便頁面沒有header，依然會正確顯示。

5、佈局頁面傳值[Passing Data to Layout Pages]

　　您可能會在內容頁面中定義一系列數據，須要傳遞到佈局頁面中。若是是這樣，您就須要從內容頁面傳遞這些數據到佈局頁面中。例如，您可能但願顯示用戶的登陸狀態，又或者但願基於用戶輸入顯示或隱藏內容塊。

　　爲了能傳遞數據，您能夠將值放進內容頁面的PageData屬性。PageData屬性是一個你但願在頁面之間保存數據的鍵/值對集合。在佈局頁面中，您能夠讀出PageData屬性的值。

　　這裏是另外一個示例圖。它展現了ASP.NET如何從內容頁面到佈局頁面，使用PageData屬性傳遞值。當ASP.NET開始構建Web頁面時，他會建立這個PageData集合。內容頁面中，您可能經過代碼向PageData集合添加數據。在添加的內容頁面和其餘部分均可以訪問PageData集合中的值。

　　接下來的程序展現瞭如何在內容頁面和佈局頁面之間傳值。當頁面運行的時候，會顯示一個讓用戶隱藏或顯示一個在佈局頁面中定義的列表。當用戶點擊按鈕，會給PageData屬性設置一個true/false(Boolean)值。佈局頁面讀取到值後，判斷若是爲false就隱藏列表。這個值也會在內容頁面中使用，由於它能肯定顯示Hide List按鈕仍是Show List按鈕。

  1. 在根目錄下，建立文件Content3.cshtml,並替換爲如下內容：
    @{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}
    View Code

    PageData屬性中數據儲存爲了兩部分—Web頁面的標題和肯定是否顯示列表的值(true/false)。

    注意ASP.NET容許您經過條件代碼塊向頁面添加HTML標籤。例如，頁面body中if/else塊肯定哪個表單展現，if/else又是取決於PageData[「ShowList」]是否設置爲true。

  2. 在Shared文件夾下，建立文件_Layout3.cshtml並用如下代碼替換：
<!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>
View Code

　　3.  在Shared文件夾下，建立_List.cshtml文件，並用如下內容替換：

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>
View Code

　　4.  在瀏覽器中運行Content3.cshtml。列表在頁面左邊，Hide List按鈕在底部展現。

　　5.  點擊Hide List，列表會消失同時按鈕會變成Show List。

　　6.  點擊Show List按鈕，列表再次出現。

 

原文連接：http://www.asp.net/web-pages/overview/ui,-layouts,-and-themes/3-creating-a-consistent-look

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程