无需JavaScript，能否将Html.ActionLink嵌入DropDownList？

好问题！原生的DropDownList（对应HTML里的<select>元素）确实没法直接嵌入Html.ActionLink生成的链接——因为HTML规范里<option>标签只能包含纯文本，不能嵌套像<a>这样的交互式元素。不过我们有两种完全不需要JavaScript的替代方案，能实现类似的跳转效果：

方案一：表单提交+后台重定向 #

这种方式利用表单提交来触发跳转，完全依赖服务器端逻辑，不需要任何前端脚本。

前端代码 #

@using (Html.BeginForm("RedirectToPage", "Home", FormMethod.Get))
{
    @Html.DropDownList("targetUrl", new SelectList(new[] {
        new SelectListItem { Text = "Home", Value = Url.Action("Home", "Home") },
        new SelectListItem { Text = "About", Value = Url.Action("About", "Home") },
        new SelectListItem { Text = "Contact", Value = Url.Action("Contact", "Home") },
    }, "Value", "Text"), "Select a page")
    
    <button type="submit" style="margin-left: 8px;">Go to Page</button>
}

后台Action代码 #

在你的HomeController里添加一个处理重定向的Action：

public ActionResult RedirectToPage(string targetUrl)
{
    // 验证URL是本地链接，避免安全风险
    if (!string.IsNullOrEmpty(targetUrl) && Url.IsLocalUrl(targetUrl))
    {
        return Redirect(targetUrl);
    }
    // 默认跳转到首页
    return RedirectToAction("Home");
}

用户选择好选项后点击提交按钮，表单会把选中的URL提交到后台，后台再重定向到目标页面。

方案二：CSS模拟下拉菜单（推荐） #

这种方式用HTML和CSS模拟原生下拉菜单的外观，里面直接放Html.ActionLink生成的链接，点击就能直接跳转，完全不需要JS，还能自定义样式。

前端代码 #

<div class="custom-dropdown">
    <button class="dropdown-trigger">Change View</button>
    <div class="dropdown-links">
        @Html.ActionLink("Home", "Home", "Home")
        @Html.ActionLink("About", "About", "Home")
        @Html.ActionLink("Contact", "Contact", "Home")
    </div>
</div>

CSS样式 #

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    padding: 6px 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 100;
}

.custom-dropdown:hover .dropdown-links {
    display: block;
}

.dropdown-links a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #495057;
    white-space: nowrap;
}

.dropdown-links a:hover {
    background-color: #f8f9fa;
}

鼠标悬停在触发按钮上时，下拉菜单会展开，点击里面的链接就能直接跳转到对应页面，体验和原生下拉菜单类似，但更灵活可控。

内容的提问来源于stack exchange，提问作者Kidan