MVC中如何将type为button的按钮值传递至控制器方法？

嘿，我明白你遇到的困扰了——用type="submit"按钮能正常把command参数（next/back）传给控制器，但换成type="button"就不行了对吧？这其实是HTML按钮的默认行为差异导致的，我给你拆解原因和解决方案：

问题根源 #

• type="submit"：这是表单提交按钮，点击时会自动触发表单的提交流程，同时会把按钮自身的name和value作为表单数据的一部分发送到服务器，所以你的控制器能拿到command参数。
• type="button"：这只是个普通的交互按钮，默认没有任何表单提交行为，点击它啥也不会主动发送，自然参数传不过去。

可行的解决方案 #

方案1：直接改用type="submit"（最省心） #

如果没有特殊要求，把按钮的type改成submit就完事了，和你之前正常工作的逻辑一致：

<a href="#"><button id="backButton" tabindex="-1" formnovalidate="formnovalidate" name="command" value="back" type="submit"> Back</button></a>
<a href="#"><button id="nextButton" name="command" value="next" type="submit"> Next</button></a>

小提示：如果按钮不在表单标签内部，记得给按钮加form="你的表单ID"属性，指定要提交的表单。

方案2：给type="button"加JS事件手动提交表单 #

如果你必须用type="button"，可以通过JavaScript手动触发表单提交，同时把按钮的value作为参数传进去。这里分两种场景：

场景A：按钮在表单外

假设你的表单ID是myForm，可以这么写：

<form id="myForm" action="/YourController/YourAction" method="post">
  <!-- 你的表单其他输入元素 -->
</form>

<a href="#"><button id="backButton" tabindex="-1" formnovalidate="formnovalidate" name="command" value="back" type="button"> Back</button></a>
<a href="#"><button id="nextButton" name="command" value="next" type="button"> Next</button></a>

<script>
// 给两个按钮绑定点击事件
document.getElementById('backButton').addEventListener('click', () => submitCommand('back'));
document.getElementById('nextButton').addEventListener('click', () => submitCommand('next'));

function submitCommand(commandValue) {
  const form = document.getElementById('myForm');
  
  // 先清理可能存在的旧参数，避免重复
  const oldInput = form.querySelector('input[name="command"]');
  if (oldInput) oldInput.remove();
  
  // 创建隐藏input来传递command参数
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'command';
  input.value = commandValue;
  form.appendChild(input);
  
  // 触发表单提交
  form.submit();
}
</script>

场景B：按钮在表单内

如果按钮本身就在表单里，代码可以更简洁：

<form id="myForm" action="/YourController/YourAction" method="post">
  <button id="backButton" tabindex="-1" formnovalidate="formnovalidate" name="command" value="back" type="button"> Back</button>
  <button id="nextButton" name="command" value="next" type="button"> Next</button>
</form>

<script>
// 批量绑定所有指定按钮的点击事件
document.querySelectorAll('button[type="button"][name="command"]').forEach(btn => {
  btn.addEventListener('click', function() {
    const form = this.form;
    // 清理旧参数
    const oldInput = form.querySelector('input[name="command"]');
    if (oldInput) oldInput.remove();
    
    // 添加当前按钮的value作为参数
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'command';
    input.value = this.value;
    form.appendChild(input);
    
    form.submit();
  });
});
</script>

方案3：用AJAX异步提交（无刷新） #

如果不想刷新页面，还可以用AJAX异步把参数传给控制器（适合单页交互场景）：

<button id="backButton" tabindex="-1" formnovalidate="formnovalidate" name="command" value="back" type="button"> Back</button>
<button id="nextButton" name="command" value="next" type="button"> Next</button>

<script>
document.getElementById('backButton').addEventListener('click', () => sendCommand('back'));
document.getElementById('nextButton').addEventListener('click', () => sendCommand('next'));

async function sendCommand(commandValue) {
  try {
    // 注意：ASP.NET项目需要带上CSRF令牌，否则会被拦截
    const csrfToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
    
    const response = await fetch('/YourController/YourAction', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRF-TOKEN': csrfToken
      },
      body: `command=${commandValue}` // 可以追加其他表单参数，比如`&username=${document.getElementById('username').value}`
    });
    
    // 处理服务器返回的响应，比如更新页面内容
    const result = await response.json();
    console.log('提交成功:', result);
  } catch (error) {
    console.error('提交失败:', error);
  }
}
</script>

小提示：如果是ASP.NET Core项目，记得在表单里加@Html.AntiForgeryToken()生成CSRF令牌，不然AJAX提交会被拒绝。

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