YouTipASP.NET Web Pages Layout
--
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
ASP.NET Tutorial
ASP.NET TutorialASP.NET Introduction
WP Tutorial
WebPages IntroductionWebPages RazorWebPages LayoutWebPages FoldersWebPages GlobalWebPages FormsWebPages ObjectsWebPages FilesWebPages HelpersWebPages WebGridWebPages ChartsWebPages EmailWebPages PHPWebPages PublishWebPages Examples
WP Reference Manual
WebPages ClassesWebPages SecurityWebPages DatabaseWebPages WebMailWebPages Helpers
ASP.NET Razor
Razor IntroductionRazor SyntaxRazor C# VariablesRazor C# LoopsRazor C# LogicRazor VB VariablesRazor VB LoopsRazor VB Logic
ASP.NET MVC
MVC IntroductionMVC ApplicationMVC FoldersMVC LayoutMVC ControllersMVC ViewsMVC DatabaseMVC ModelsMVC SecurityMVC HTML HelpersMVC PublishMVC Reference Manual
WF Tutorial
WebForms IntroductionWebForms PagesWebForms ControlsWebForms EventsWebForms FormsWebForms ViewStateWebForms TextBoxWebForms ButtonWebForms Data BindingWebForms ArrayListWebForms HashtableWebForms SortedListWebForms XML FilesWebForms RepeaterWebForms DataListWebForms Database ConnectionWebForms Master PagesWebForms NavigationWebForms Examples
WF Reference Manual
WebForms HTMLWebForms ControlsWebForms Validation
Deep Dive
Web Design and Development
Software
Web Service
Development Tools
Scripting Languages
Computer Science
Scripting
Programming Languages
Web Services
Programming
ASP.NET Web Pages - Page Layout
With Web Pages, it is easy to create a website with a consistent layout.
Consistent Appearance
On the Internet, you will find many websites with a consistent look and style:
- Every page has the same header
- Every page has the same footer
- Every page has the same style and layout
With Web Pages, you can do this very efficiently. You can write reusable content blocks (like page headers and footers) in a separate file.
You can also use layout templates (layout files) to define a consistent layout for all web pages on the site.
Content Blocks
Many websites have content that is displayed on every page of the site (like page headers and footers).
With Web Pages, you can use the @RenderPage() method to import content from different files.
Content blocks (from another file) can be imported anywhere in a web page. Content blocks can contain text, markup, and code, just like any ordinary web page.
Writing common headers and footers as separate files can save you a lot of work. You don't have to write the same content on every page. When content changes, you only need to modify the header or footer file, and you can see that the corresponding content on every page in the site has been updated.
The following shows how it appears in code:
Example
<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>
Layout Page
In the previous section, you saw that displaying the same content on multiple web pages is very easy.
Another way to create a consistent look is to use a layout page. A layout page contains the structure of the web page, not the content. When a web page (content page) is linked to a layout page, it is displayed according to the structure of the layout page (template).
The layout page uses the @RenderBody() method to embed the content page. Apart from that, it is not much different from a normal web page.
Each content page must start with a layout directive.
The following shows how it appears in code:
Layout Page:
<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>© 2012 Tutorial. All rights reserved.</p>
</body>
</html>
Any Web Page:
@{Layout="Layout.cshtml";}
<h1>Welcome to Tutorial.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>
D.R.Y. - Don't Repeat Yourself
With these two ASP.NET tools, Content Blocks and Layout Pages, you can make your web applications display a consistent appearance.
These two tools can save you a lot of work. You don't have to repeat the same information on every page. Centralized markup, style, and code make your web applications easier to manage and maintain.
Preventing Files from Being Browsed
In ASP.NET, files whose names start with an underscore can be prevented from being browsed on the web.
If you don't want your content blocks or layout pages to be visible to your users, you can rename these files:
- _header.cshtm
- _footer.cshtml
- _Layout.cshtml
Hiding Sensitive Information
In ASP.NET, the most common way to hide sensitive information (database passwords, email passwords, etc.) is to save this information in a separate file named "_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";
}
<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html><html>
<body>
<p>This is header text</p>
@RenderBody()
<p>© 2012 Tutorial. All rights reserved.</p>
</body>
</html>@{Layout="Layout.cshtml";}
<h1>Welcome to Tutorial.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> @{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}