必须调用 POST 操作的样式下拉菜单项

Question

我的 ASP.NET MVC5 应用程序在顶部使用 Twitter Bootstrap navbar。导航栏中的一项是dropdown-menu，用于登录用户。下拉列表中有一个指向个人资料页面的ActionLink，还有一个要注销的项目。

注销操作跟随this advice，因此调用HttpPost 操作，这意味着它不能使用普通的ActionLink。相反，我使用BeginForm 和input 的type=submit。 Razor 视图如下所示：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" data-toggle="dopdown" class="dropdown-toggle">
            John Doe <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                @Html.ActionLink("Account", "Index", "Account")
            </li>
            <li>
                @using (Html.BeginForm("Logout", "Account", FormMethod.Post))
                {
                  <input type="submit" value="LogOff" class="btn btn-default navbar-btn"/>
                }
            </li>
        </ul>
    </li>
</ul>

但是，它的渲染是这样的：

我试过用这个替换<input type="submit" />：

<a href="#" onclick="$(this).closest('form').submit(); return false;">LogOff</a>

但是，包装此 a 标记的 form 元素也破坏了 Bootstrap 样式，呈现如下：

处理这个问题的正确方法是什么？

我以我上面的方式提出这个问题，因为我更喜欢一种解决方案，让我的 Razor 视图至少像现在一样简单，但最好让它更简单。也许我忽略了一个 Html 辅助方法，它可以通过 Bootstrap 拾取呈现的标记来满足我的需要？

---

作为脚注，这里有一个 html+css 复制代码。

警告： Stack Overflow sn-ps 的宽度往往会触发 Bootstrap 的响应特性，这可能会稍微改变视图。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> 
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    John Doe
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Profile</a>
                    </li>
                    <li>
                        <form action="xyz" method="POST">
                            <input type="submit" value="LogOff" class="btn btn-default navbar-btn" />
                        </form>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 1

将您的表单放在一个带有 display: none 的 div 中；并使用锚点点击提交按钮 =)

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" data-toggle="dopdown" class="dropdown-toggle">
            John Doe <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                @Html.ActionLink("Account", "Index", "Account")
            </li>
            <li>
                <a href="#" onclick="$('#mySubmit').click();">Log Off</a>
            </li>
        </ul>
    </li>
</ul>
<div style="display: none;">
    @using (Html.BeginForm("Logout", "Account", FormMethod.Post))
    {
        <input id="mySubmit" type="submit" value="LogOff" class="btn btn-default navbar-btn"/>
    }
</div>

Answer 2

我最终做了类似于@Repo 的回答，但不同之处足以保证将其发布为不同的解决方案。基本思路是一样的，这个答案也使用了我在问题中提到的解决方法：在锚标签上使用 javascript 提交表单。

使用此解决方法，表单非常接近锚标记，使代码在将来更易于阅读，也无需使用byId 选择器：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" data-toggle="dopdown" class="dropdown-toggle">
            John Doe <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                @Html.ActionLink("Account", "Index", "Account")
            </li>
            <li>
                @* WORKAROUND: Anchor tag outside the form element to make Bootstrap style it properly. *@
                @using (Html.BeginForm("Logout", "Account", FormMethod.Post))
                { }
                <a href="#" onclick="$(this).parent().find('form').submit(); return false;">LogOff</a>
            </li>
        </ul>
    </li>
</ul>

我确实认为这是一个丑陋的解决方法，所以请任何人加入一个更合适的解决方案，它不需要这种难以理解的标记或一堆自定义 css 规则...