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

Solution 1

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>

Solution 2

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.

Comments

[Matthew]

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?

[Abdul Ahmad]

@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 stackoverflow.com/questions/2835140/…

[Matthew]

I understand. How can I incorporate that with this format <li>@Html.ActionLink("Index", "Index", "Home")</li> so that I can navigate to any of the section Id's that I've created? I've shown my controller above as an edit and also presented another resource I've referenced.

[Tieson T.]

And the MSDN link for that overload: msdn.microsoft.com/en-us/library/…