将表单标记添加到下拉列表项会破坏ui

Question

我正在开发ASP.NET Core 2.0 Web应用程序并选择了Materialize前端库。我面临的问题是，当我添加带有下拉菜单的导航栏时，我无法在不破坏UI的情况下发出HTTP Post请求

问题在于我无法使用 标记以便应用样式。

<!-- Dropdown Trigger -->
<li>
    <a class="dropdown-button" href="#!" data-target="dropdownMenu">Hi, @UserManager.GetUserName(User)<i class="material-icons right">arrow_drop_down</i></a>
</li>
<!-- Dropdown Structure -->
<ul id="dropdownMenu" class="dropdown-content">
    <li>
        <a href="#!">Profile</a>
    </li>
    <li>
        <a href="#!">Settings</a>
    </li>
    <li class="divider"></li>
    <li>
        <form method="post" asp-controller="Account" asp-action="Logout">
            <input type="submit" value="Logout"/>
        </form>
    </li>
</ul>

请问任何想法？ :)

Answer 1

要获得填充，您可以将表单包装在一个范围中：

<li>
   <span>
      <form method="post" asp-controller="Account" asp-action="Logout">
         <input type="submit" value="Logout">
      </form>
   </span>
</li>

如果您需要与＆lt; \ a＆gt;完全相同的样式（悬停等）你要么必须将li＆gt; css扩展到li＆gt;输入，要么只是用JS触发表单：

<li><a href="#" onClick="document.logoutForm.submit()">Logout</a></li>

然后用表格包装菜单：

<form name="logoutForm" method="post" asp-controller="Account" asp-action="Logout">

最后一个选项是使用＆lt; \ a＆gt;：

包装表单

<li>
   <a href="#">
      <form method="post" asp-controller="Account" asp-action="Logout">
         <input type="submit" value="Logout" style="background:none;border:none;padding:0;">
      </form>
   </a>
</li>