在 Visual Studio 2013 mvc 中，如何使用引导程序和 html 助手在标题中创建下拉列表答案

【问题标题】：In visual studio 2013 mvc, how to have a dropdown list in header using bootstrap and html helper在 Visual Studio 2013 mvc 中，如何使用引导程序和 html 助手在标题中创建下拉列表
【发布时间】：2016-04-01 19:27:50
【问题描述】：

我的要求如下。我有一个带有以下链接的标题：主页、目的地、季节。我希望目的地链接成为悬停时的下拉列表（包含链接景点和热门目的地）。我知道如何使用 html、css 和引导程序来实现这一点，但由于我使用 mvc，导航到控制器中的操作方法将是一个问题。下面是我到目前为止得到的代码。不知道如何实现下拉列表。请帮忙！

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

我希望链接“活动”和“热门目的地”位于标题链接“目的地”的下拉列表中。请建议如何使用 bootstrap 和 html helper actionlink 来实现这一点。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

你应该使用-

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

更多详情，请参考：- DropDownList in MVC 4 with Razor

【讨论】：

【解决方案2】：

在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>

【讨论】：