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>

但是，包装此form标记的a元素也会破坏Bootstrap样式，如下所示：

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

我以上述方式问这个问题，因为我更喜欢一种能让我的Razor视图至少像现在一样简单的解决方案，但最好还是让它变得更简单。也许有一种我忽略的Html辅助方法，可以通过Bootstrap拾取渲染标记的方式完成我需要的工作？

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

警告： Stack Overflow代码段的宽度往往会触发Bootstrap的响应功能，这可能会略微改变视图。

＆＃13;

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

＆＃13;

Answer 1

将表单放在div中，显示：none;并使用锚点击提交按钮=）

<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选择器：< / p>

<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规则......

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

2 个答案: