ASP.NET Core 2.0中添加Form标签至下拉项致UI失效问题求助

嘿，我来帮你搞定这两个头疼的问题！下面分两部分给你具体的解决思路和代码示例：

一、带下拉菜单的导航栏中发起POST请求且不破坏UI #

Materialize的导航栏下拉默认用<a>标签做跳转，都是GET请求，但要发POST又不想页面刷新或者UI错乱，有两种靠谱的方案：

方案1：隐藏表单+下拉项点击触发提交 #

这种方法适合不需要异步处理的场景，通过隐藏表单来发起POST，点击下拉项时触发表单提交：

<!-- 导航栏下拉菜单部分 -->
<nav>
  <div class="nav-wrapper">
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#">首页</a></li>
      <li>
        <a class="dropdown-trigger" href="#!" data-target="dropdown1">操作<i class="material-icons right">arrow_drop_down</i></a>
        <ul id="dropdown1" class="dropdown-content">
          <!-- 下拉项用按钮更语义化，避免a标签默认跳转干扰 -->
          <li><button id="submitPostBtn" class="dropdown-item">执行POST操作</button></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<!-- 隐藏的POST表单 -->
<form id="hiddenPostForm" action="/YourController/YourAction" method="POST" style="display:none;">
  @* ASP.NET Core必填的防伪造令牌 *@
  @Html.AntiForgeryToken()
  <!-- 需要传参数的话，添加隐藏输入框 -->
  <input type="hidden" name="param1" value="yourTargetValue">
</form>

<!-- 绑定点击事件的JS -->
<script>
  // 点击下拉按钮时提交隐藏表单
  document.getElementById('submitPostBtn').addEventListener('click', function() {
    document.getElementById('hiddenPostForm').submit();
  });

  // 初始化Materialize下拉菜单
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems);
  });
</script>

方案2：AJAX异步发起POST请求 #

这种方案完全不会刷新页面，UI丝毫不破坏，适合需要异步处理结果的场景：

<!-- 导航栏下拉菜单部分 -->
<nav>
  <div class="nav-wrapper">
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#">首页</a></li>
      <li>
        <a class="dropdown-trigger" href="#!" data-target="dropdown1">操作<i class="material-icons right">arrow_drop_down</i></a>
        <ul id="dropdown1" class="dropdown-content">
          <li><a id="ajaxPostLink" href="#!" class="dropdown-item">异步执行POST</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<!-- AJAX请求的JS -->
<script>
  document.getElementById('ajaxPostLink').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签的默认跳转行为

    fetch('/YourController/YourAction', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        // 带上防伪造令牌验证
        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
      },
      body: 'param1=yourValue&param2=anotherValue'
    })
    .then(response => response.json())
    .then(data => {
      // 处理请求成功后的逻辑，比如弹出提示
      M.toast({html: '操作成功！'});
    })
    .catch(error => {
      console.error('请求失败:', error);
      M.toast({html: '操作失败，请重试'});
    });
  });

  // 初始化Materialize下拉菜单
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems);
  });
</script>

二、<a>标签应用Materialize样式的问题 #

Materialize对导航栏里的<a>标签有默认样式支持，如果你发现样式不生效，大概率是结构或者类名没加对，试试这些方法：

1. 确保<a>标签在标准导航栏结构里 #

Materialize的导航栏标准结构是nav > .nav-wrapper > ul > li > a，这样<a>会自动继承导航栏的样式：

<nav>
  <div class="nav-wrapper teal">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <!-- 这里的a标签会自动应用Materialize的导航链接样式 -->
      <li><a href="/home">首页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </div>
</nav>

2. 手动添加Materialize的链接样式类 #

如果是自定义的<a>标签（不在导航栏里），可以用Materialize的波纹效果类、扁平按钮类来增强样式：

<!-- 带波纹点击效果的链接 -->
<a href="#" class="waves-effect waves-teal">点击我</a>

<!-- 看起来像链接的扁平按钮（适合替代a标签做操作） -->
<a href="#" class="btn-flat white-text">操作按钮</a>

3. 自定义覆盖默认样式（如果需要） #

如果Materialize的默认样式不符合需求，可以用CSS覆盖，比如修改导航链接的hover效果：

/* 自定义导航栏链接的hover样式 */
nav .nav-wrapper ul li a:hover {
  background-color: rgba(255,255,255,0.1);
  color: #fff;
}

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