CODEWITHSUNDEEP
asp.netasp.net-mvc
espenk
espenk

Reputation: 585

MVC different header for each view

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

Upvotes: 3

Views: 3166

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038880

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)
}

Upvotes: 8

Related Questions