MVC different header for each view

asp.net, asp.net-mvc

Solution

You could use Razor sections. In your Layout define a section:

@RenderSection("Banner", required: false)

and in your view override this section:

@section Banner {
    ... contents of the banner specific to that view
}

You could also define a default banner so that you don't need to override in each view:

@if (!IsSectionDefined("Banner"))
{
    ... put the default banner contents here
}
else
{
    @RenderSection("Banner", required: true)
}

Problem

I have this _Layout.cshtml ``` <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> //SOME LOGO LOGIC </div> </div> <div id="menu-wrapper"> //SOME MENU LOGIC </div> <!-- end #menu --> <div id="banner"> <div id="slider"> <a href="#" class="button previous-button">&lt;</a> <a href="#" class="button next-button">&gt;</a> <div class="viewer"> <div class="reel"> <div class="slide"> <h2>Stallen..</h2> <p>Her kan du skrive noe tekst</p> <a class="link" href="~/horse/riversidestar">Full story ...</a><img src="~/images/img01.jpg" width="900" height="350" alt="" /></div> <div class="slide"> <h2>Riverside Star i naturen</h2> <p>Her kan du skrive noe tekst</p> <a class="link" href="~/horse/riversidestar">Full story ...</a><img src="~/images/img02.jpg" width="900" height="350" alt="" /></div> </div> </div> <div class="indicator"> <ul> <li class="active">1</li> <li>2</li> </ul> </div> </div> <script type="text/javascript">//SOME SCRIPT</script> </div> </div> <div id="page"> <div id="content"> @RenderBody() </div> <div id="sidebar-bg"> <div id="sidebar"> <h2>Nyheter</h2> @{Html.RenderAction("ShortNewsList", "News");} </div> </div> <div style="clear: both;">&nbsp;</div> </div> ``` Right now, its only the renderBody part that is different on each view. How can I change the content of the DIV with id=banner when I go into different View When I try to add it in another View, it will off course be very wrong in the layout

Original source