CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap-3
Neill
Neill

Reputation: 711

How can I create a menu sidebar all the way on the left in MVC

I have been working with MVC for a few months and its going well, but I can't figure out how to create a Sidebar menu all the way to the utmost left of the screen.

This is a standard MVC 5 web application.

What I think the problem is, is that in _Layout View, the

@RenderBody()

falls within the div tag:

<div class="container body-content">

So all code in any of my created Views is contained in that container.

Is this even the reason?

My View:

<h2>TestSideBar</h2>

<div class="container" id="sidebar" style="margin-left: 0px">
    <div id="wrapper" class="wrapper">
        <!-- Sidebar -->
        <div class="nav navbar-left">
            <div class="sidebar-wrapper">
                <div class="logo">
                    <a href="#" class="simple-text">
                        Placeholder
                    </a>
                </div>

                <ul class="nav">
                    <li>
                        <a href="@Url.Action("Item1", "Controller")">
                            <span class="glyphicon glyphicon-off ">  Item 1</span>
                        </a>

                        <a href="@Url.Action("Item2", "Controller")">
                            <span class="glyphicon glyphicon-star "> Item 2</span>
                        </a>
                    </li>
                </ul>

            </div>
        </div><!-- end navbar-left -->
    </div><!-- end sidebar container -->


    <div class="main-panel">
        Main Content Stuff Here

    </div><!-- end main-panel -->
</div><!-- end wrapper-->

I have attached 2 images, how it looks now and how I want it to look

I have tried using the @section RenderLeft as well.

I just can't get it to look the way I want.

Incorrect

Correct

Thanks.

Upvotes: 3

Views: 15914

Answers (2)

Mikael Puusaari
Mikael Puusaari

Reputation: 1034

You can use Html.RenderPartial

Create a view, e.g: _LeftMenu.csthml and put it in the "Views/Shared" folder.

Put the left menu html in that view, example(this can of course be done with Divs and a Model if you prefer)

<ul class="list-group">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
    </li>
</ul>

Then divide the content area in your Layout page into two, one for your left menu and the second for the render body area that will contain the child pages:

<body>
    <header>
    </header
        <div class="row col-md-12 FullContent">
            <div class="col-md-2 CustomLeftnavbar">
                @{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
            </div>
            <div class="container col-md-10">
                <main role="main" class="CustomBody">
                    @RenderBody()
                </main>
            </div>
        </div>
</body>

This way you will not need to go against the DRY principle as it will be shared with any and all other pages that uses the same layout page

Upvotes: 1

Neill
Neill

Reputation: 711

Well I have found two ways to do this so far. There could be better ones out there.

Firstly I was correct in my assumption that the container div in _Layout View was causing the problem.

Option 1

In the _Layout View, before the container div and RenderBody, use @RenderSection code

@RenderSection("LeftMenu", required: false)

<div class="container body-content">
    @RenderBody()

Then in the View you want the menu, enclose the menu code in:

@section LeftMenu{
    <!-- Content Here -->
}

The "LeftMenu" is just a name, any name can be used here.

This causes the code in the @section to be "run" before the RenderBody.

This works, but has a drawback in that since I possible want to use the menu in more than one View, I have to add the @section LeftMenu {} code in each View I want it because you cannot use @section {} in a partial view.

Option 2:

In _Layout View, remove the container div that encloses @RenderBody

In each View enclose the code in a container div. Create the menu in a partial view and render it (@Html.Partial) in each view you need it, before the content code.

Neill

Upvotes: 2

Related Questions