How to Create Dropdown Navbar Menu Item in Layout.CSHTML in ASP.NET

Question

I am new to ASP.NET and I am trying to figure out how to create a nav bar menu items with drop down capability. I am using this theme in particular. In their sample code they demonstrate the drop down functionality, but in my default MVC application I am using _Layout.cshtml to create my nav bar. I am having difficulty figuring out the correct syntax.

I have implemented sections within my Index.cshtml page which I would like the first nav bar menu item drop downs to go to accordingly. How may I accomplish this?

Index.cshtml

<section id="item 1">...</section>
<section id="item 2">...</section>
<section id="item 3">...</section>

_Layout.cshtml

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @*<li>@Html.ActionLink("Index", "Index", "Home")</li>*@
                <li class="dropdown">
                    <a class="dropdown-toggle" role="button" aria-expanded="false" data-toggled="dropdown">@Html.ActionLink("Home", "Index", "Home")</a>
                <ul class="dropdown-menu" role="menu">
                    <li>Action 1</li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                </ul>
                </li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

Thanks in advance!

EDIT:

I've updated my _Layout.cshtml which shows the dropdown and the list items do navigate to my Index page, but from here how can I specifically direct each list item to point to each section of Index.cshtml page (i.e. item 1, item 2, or item 3?

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("My Application", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @*<li>@Html.ActionLink("Index", "Index", "Home")</li>*@
                <li class="dropdown">
                    <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Home <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>@Html.ActionLink("Item 1", "Index", "Home", null, new { id = "item 1" })</li>
                        <li>@Html.ActionLink("Item 2", "Index", "Home", null, new { id = "item 2" })</li>
                        <li>@Html.ActionLink("Item 3", "Index", "Home", null, new { id = "item 3" })</li>
                    </ul>
                </li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

Here is another link I've referenced.

My HomeController.cs for ActionResult Index

public ActionResult Index()
    {
        return View();
    }

The toggle button is wrong (you're creating a hyperlink within a hyperlink), but otherwise this looks more or less right. So, what are you having trouble with? — Tieson T., Sep 06 '15 at 04:29
Well, I've commented out the original HTML Helper for my HomeController's Index ActionResult. I simply want to create a drop down for my Index nav bar item that contains three textual items in which upon selecting, I am navigated down to that section of the page. Do I need to update my HomeController's Index ActionResult or can I somehow place `#1`, `#2`, or `#3` so that each section may be navigated to appropriately? — Matthew, Sep 06 '15 at 15:23

score 5 · Answer 1 · answered Sep 06 '15 at 04:26

This issue has less to do with asp.net than with html. In the link you provided you can view source on all elements on the page. Viewing the source on the navigation bar gives the html below.

You just need to put this html somewhere in your layout.cshtml page and reference their css files so that the styling comes into effect (either download the css or link it from a hosted version someone online)

you can use a link tag to reference css on your html page:

<link rel="stylesheet" type="text/css" href="mystyle.css">

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Well I did download their css and I have incorporated it to update my theme. I need to stick with the default ASP.NET MVC template layout and create my nav bar within _Layout.cshtml so that my menu is incorporated the same on all of my pages. Also, on each drop down item from that first menu item, I need it to navigate down the page to a particular section. Can you help with this? — Matthew, Sep 06 '15 at 04:29
@Matthew if you want to navigate to a certain part of the page by clicking on a link in your nav, you need to use the `name` attribute. This answer should help http://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash — Abdul Ahmad, Sep 06 '15 at 04:32

score 3 · Answer 2 · edited May 23 '17 at 10:28

3

The solution by PussInBoots here resolves the issue.

@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null)

Where MyAnchor will be the section id from the original question.

edited May 23 '17 at 10:28

Community

1
1

answered Sep 06 '15 at 16:29

Matthew

3,976
15
66
130

1

And the MSDN link for that overload: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink.aspx#M:System.Web.Mvc.Html.LinkExtensions.ActionLink%28System.Web.Mvc.HtmlHelper,System.String,System.String,System.String,System.String,System.String,System.String,System.Object,System.Object%29 – Tieson T. Sep 06 '15 at 16:45

How to Create Dropdown Navbar Menu Item in Layout.CSHTML in ASP.NET

2 Answers2

Linked