In visual studio 2013 mvc, how to have a dropdown list in header using bootstrap and html helper

Question

my requirement is as below. I have a header with the following links: Home, Destinations, Seasons. I want the Destinations link to be a drop down list(containing links Attractions and Popular destinations) on hover. I know how to implement this using html, css and bootstrap, but since im using mvc, navigating to the action method in the controller would be a problem. Below is the code ive got so far. Have no clue how to implement the dropdown list. Please help!

<div class="menu">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>

                        <ul class="dropdown-menu" aria-labelledby="dropdownmenu1">
                            <li>@Html.ActionLink("Activities", "Activities", "Home")</li>
                            <li>@Html.ActionLink("Popular Destinations","Destinations","Home")</li>
                        </ul>
                    </li>
                <li>@Html.ActionLink("Seasons", "Seasons", "Home")</li>
            </ul>
            </div>
        </div>

I want the links 'Activities' and 'Popular Destinations' to be in the dropdown list of the header link 'Destinations'. Please advice how to achieve this using bootstrap and html helper actionlink.

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

You should use-

@Html.DropDownListFor(model => model.YourModelName, listItems, "-- Select Value--")

For more detail, Please refer:- DropDownList in MVC 4 with Razor

edited May 23 '17 at 11:53

Community

1
1

answered Mar 21 '16 at 06:14

Priya

1,359
6
21
41

score 0 · Answer 2 · answered Apr 01 '16 at 11:27

Try this below html

<div class="menu">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Destinations 
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("Activities", "Activities", "Home")</li>
                    <li>@Html.ActionLink("Popular Destinations","Destinations","Home")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("Seasons", "Seasons", "Home")</li>
        </ul>
    </div>
</div>

In visual studio 2013 mvc, how to have a dropdown list in header using bootstrap and html helper

2 Answers2