Create a fixed header and footer for all pages

Question

Create a fixed header and footer for all pages

Navigation

#1 by (2 votes)

2

How to create a header with the logo and menu, and a footer with some information, and this header and footer / em> are the same for all pages? CTRL + C / / CTRL , because if I change some item, page. Is this possible?

c# .net asp.net-mvc

asked by anonymous 28.08.2015 / 14:32

1 answer

How do I hide the container while loading an image? Display codes on the front end without being executed by Edit Post

score 2 · Accepted Answer

You create a basic layout page that will be used on all pages. Usually it stays in this position in the project: ~/Views/Shared/_Layout.cshtml . Of course you can use other locations and names and can even have multiple layouts .

In general this page has everything that is around the main content and is fixed to all pages. Then both the header and the footer are placed in it. You can put everything in the header, including the beginning of HTML and the basic dependencies. It works as a include of text.

But it is possible to have other shapes like ~/Views/Shared/_Header.cshtml and ~/Views/Shared/_Footer.cshtml separately. It comes from your creativity and need.

It is important that on this page you have a @RenderBody() somewhere where the main content of the page will be inserted. In some cases you can use RenderSection() .

You can nest these pages. That is, these pages may have other layouts within it.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>  
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="header"> 
            Cabeçalho aqui           
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer"> 
            Rodapé aqui           
        </div>
    </body>
</html>

When you want to use this layout on some page you will need to add this code at the beginning of the specific view

@{
    ViewBag.Title = "Titulo da página específica";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Esta página</h1>
<p>Conteúdo</p> <!-- só um exemplo simples -->

You can create a _ViewStart.cshtml which is a special view that will be used in all other views .

You can configure your use in controller as well, but this will become a tutorial.

Obviously you can do much more sophisticated things, but the basics is this.

I hope you're not using classic ASP.Net yet. Then you would have to use MasterPages . The idea is the same, but obviously the way to use it is a bit different.

See more direct from the source .