ASP.NET MVC getElementById().value提交控制器返回null问题

按优先级从高到低排查以下问题：

1. 最高频问题：提交了错误的表单 #

你提到快捷筛选按钮和自定义日期输入框分别放在两个独立的POST表单中，这是最可能的核心诱因：

• 你通过JS修改的是自定义筛选表单里的sdate、edate输入框，但点击Today按钮时，默认触发的是按钮所属的快捷筛选表单的提交逻辑，这个表单里根本没有这两个日期输入域，自然不会把值带给后端。控制台能打印到赋值结果，只能证明你DOM操作选中了正确的输入框并修改了值，不代表提交的请求里携带了这两个值。
• 修复方案二选一：
  • 把所有筛选控件（快捷按钮、日期输入框、提交按钮）放到同一个<form>标签内，不要拆分独立表单
  • 必须保留两个表单的话，在JS赋值完成后，手动获取包含日期输入框的自定义筛选表单，调用其submit()方法提交，不要走快捷按钮的默认提交逻辑

2. 输入框缺少name属性 #

ASP.NET MVC的表单参数绑定/模型绑定是通过表单元素的name属性匹配参数名的，和id属性没有关系。

• 检查两个日期输入框，必须配置和后端参数名一致的name属性，示例：

<input type="date" id="sdate" name="sdate" />
<input type="date" id="edate" name="edate" />

如果只有id没有name，哪怕输入框在正确的表单里，值也不会被包含在提交的请求数据中。

3. 赋值和提交的时序冲突 #

如果没有阻止按钮的默认提交行为，可能出现JS赋值逻辑还没执行完成，表单就已经提前提交的情况，此时提交的还是输入框的原始空值，你在控制台看到的赋值结果是后续代码执行完的状态，不是提交瞬间的状态。

• 修复Today函数逻辑，先阻止默认提交，赋值完成后再手动提交表单，参考代码：

function Today(e) {
  // 阻止按钮默认提交行为
  e.preventDefault();
  const sdateEl = document.getElementById('sdate');
  const edateEl = document.getElementById('edate');
  // 给日期框赋值
  sdateEl.value = '2022-02-01';
  // 格式化为yyyy-MM-dd格式的当前日期
  const now = new Date();
  edateEl.value = now.toISOString().split('T')[0];
  // 替换为你自定义筛选表单的实际id，手动提交正确的表单
  document.getElementById('filterForm').submit();
}

• 按钮绑定事件时记得传入事件对象：

<button type="submit" onclick="Today(event)">Today</button>

4. 后端参数匹配问题 #

如果前面的检查都没问题，打开浏览器开发者工具的「网络」面板，查看POST请求的Form Data部分：

• 如果Form Data里已经有正确的sdate、edate值，检查后端Home控制器的Index方法：
  • 参数名必须是sdate、edate（大小写不敏感，拼写不能错）
  • 如果用DateTime类型接收，建议先加可空标记避免格式解析报错，示例：

  [HttpPost]
  public ActionResult Index(DateTime? sdate, DateTime? edate)
  {
      // 你的图表统计业务逻辑
      return View();
  }
  

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