ASP.NET Web Pages – 頁面佈局簡介
導讀 | 透過 Web Pages可以把重複使用的內容塊(比如頁面頭部和底部)寫在一個單獨的檔案中。還可以使用佈局模板(佈局檔案)為站點的所有網頁定義一致的佈局。 |
在因特網上,您會發現很多網站都具有一致的外觀和風格:
- 每個頁面有相同的頭部
- 每個頁面有相同的底部
- 每個頁面有相同的樣式和佈局
透過 Web Pages ,您能非常高效地做到這點。您可以把重複使用的內容塊(比如頁面頭部和底部)寫在一個單獨的檔案中。
您還可以使用佈局模板(佈局檔案)為站點的所有網頁定義一致的佈局。
許多網站都有一些內容是被顯示在站點的每個頁面中(比如頁面頭部和底部)。
透過 Web Pages,您可以使用 @RenderPage() 方法從不同的檔案匯入內容。
內容塊(來自另一個檔案)能被匯入網頁中的任何地方。內容塊可以包含文字,標記和程式碼,就像任何普通的網頁一樣。
將共同的頭部和底部寫成單獨的檔案,這樣會幫您節省大量的工作。您不必在每個頁面中書寫相同的內容,當內容有變動時,您只要修改頭部或者底部檔案,就可以看到站點中的每個頁面的相應內容都已更新。
以下顯示了它在程式碼中是如何呈現的:
例項
<html> <body>
在上一部分,您看到了,想在多個網頁中顯示相同內容是非常容易的。
另一種建立一致外觀的方法是使用佈局頁。一個佈局頁包含了網頁的結構,而不是內容。當一個網頁(內容頁)連結到佈局頁,它會根據佈局頁(模板)的結構進行顯示。
佈局頁中使用 @RenderBody() 方法嵌入內容頁,除此之外,它與一個正常的網頁沒有什麼差別。
每個內容頁都必須以佈局指令開始。
以下顯示了它在程式碼中是如何呈現的:
佈局頁:
<html> <body> <p>This is header text</p>
任何網頁:
<h1>Welcome to Runoob.com</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 laborisnisi ut aliquip ex ea commodo consequat. </p>
透過 Content Blocks(內容塊)和 Layout Pages(佈局頁)這兩個 ASP.NET 工具,您可以讓您的 Web 應用程式顯示一致的外觀。
這兩個工具能幫您節省大量的工作,您不必再每個頁面上重複相同的資訊。集中的標記、樣式和程式碼讓您的 Web 應用程式更易於管理,更易於維護。
在 ASP.NET 中,檔案的名稱以下劃線開頭,可以防止這些檔案在網上被瀏覽。
如果您不想讓您的內容塊或者佈局頁被您的使用者看到,可以重新命名這些檔案:
_header.cshtm
_footer.cshtml
_Layout.cshtml
在 ASP.NET 中,隱藏敏感資訊(資料庫密碼、電子郵件密碼等等)最通用的方法是將這些資訊儲存在一個名為"_AppStart"的單獨的檔案中。
_AppStart.cshtml
@{ WebMail.SmtpServer = "mailserver.example.com"; WebMail.EnableSsl = true; WebMail.UserName = "username@example.com"; WebMail.Password = "your-password"; WebMail.From = "your-name-here@example.com"; }
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2840227/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- React Native 頁面佈局簡介React Native
- ASP.NET Web Pages – 物件簡介ASP.NETWeb物件
- ASP.NET Web Forms – HTML 頁面簡介ASP.NETWebORMHTML
- ASP.NET Web Pages – 資料夾簡介ASP.NETWeb
- ASP.NET Web Pages – 幫助器簡介ASP.NETWeb
- ASP.NET Web Pages – Chart 幫助器簡介ASP.NETWeb
- [譯]ASP.NET Core 2.0 佈局頁面ASP.NET
- 頁面佈局
- web簡單頁面佈局fixed 頭部固定 內容滾動Web
- css頁面佈局CSS
- ASP.NET MVC – 樣式和佈局簡介ASP.NETMVC
- 常見頁面佈局
- Grid佈局簡介
- 靜態頁面佈局例項
- 登陸頁面樣式佈局
- ExtJs頁面佈局詳解JS
- Web網頁佈局的主要方式Web網頁
- Bootstrap頁面佈局13 - BS按鈕boot
- CSS入門指南-4:頁面佈局CSS
- 1.9 靜態頁面佈局例項
- 頁面佈局的相關內容
- Dcat Admin 構建頁面佈局
- Zend Framework 入門(4)—頁面佈局Framework
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- SAP Spartacus Page Layout - 頁面佈局設計
- 實戰電商頁面1:靜態佈局
- Android 頁面多狀態佈局管理Android
- 頁面佈局 layui與 layui的匯入UI
- html頁面實現聖盃佈局flexHTMLFlex
- 快應用入門--頁面佈局篇
- 頁面佈局自適應之@media screen
- 好程式設計師web前端技術分享移動端頁面佈局程式設計師Web前端
- ASP.NET Web Forms – 事件簡介ASP.NETWebORM事件
- RabbitMQ的web頁面介紹(三)MQWeb
- 怎麼恢復spyder預設頁面佈局
- fragment清除頁面資料(重新載入佈局)Fragment
- ModernUI教程:使用預定義的頁面佈局UI
- 網頁佈局------幾種佈局方式網頁