html - 设置必须调用 POST 操作的下拉菜单项的样式

Question

我的 ASP.NET MVC5 应用程序使用 Twitter Bootstrap navbar在顶部。导航栏中的一项是 dropdown-menu对于已登录的用户。下拉菜单中是 ActionLink到个人资料页面，然后选择另一个元素来注销。

注销操作如下 this advice从而调用 HttpPost操作，这意味着它不能使用普通的 ActionLink 。相反，我使用 BeginForm和一个 input的type=submit 。 Razor View 如下所示:

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

但是，form包装此 a 的元素标签也破坏了 Bootstrap 样式，渲染如下:

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

我按照上面的方式问这个问题，因为我更喜欢一个让我的 Razor View 至少像现在一样简单的解决方案，但最好是让它更简单。也许有一个Html我忽略了一个辅助方法，它可以通过 Bootstrap 拾取渲染的标记来完成我需要的操作？

---

作为脚注，这里有 html + css重现摆弄。

警告:Stack Overflow 代码片段的宽度往往会触发 Bootstrap 的响应功能，这可能会稍微改变 View 。

<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 中；并使用 anchor 单击提交按钮 =)

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