ASP.NET中如何为日期选择控件绑定动作事件触发控制器SetTimes方法

失效原因说明 #

• asp-action是ASP.NET Core内置的标签辅助属性，仅作用于<form>、<a>等支持路由生成的标签，功能是为标签生成指向对应控制器动作的提交地址/链接。单独给孤立的<input>标签添加asp-action不会生成任何交互逻辑，自然无法触发控制器方法。
• 你代码里的日期值格式也存在兼容性问题：原生type="date"的输入框仅支持yyyy-MM-dd的ISO格式传值，使用dd-MM-yyyy格式会导致控件默认值无法正常显示、回传值解析失败。

两种可落地的正确实现方案 #

方案1：整页提交模式（无额外JS依赖，适合简单场景） #

将日期控件包裹在指定目标动作的表单内，监听控件选中变化事件自动提交表单：

<form asp-action="SetTimes" method="post">
    <input class="form-control col-sm-5" 
           asp-for="Date" 
           type="date" 
           value="@DateTime.Today.ToString("yyyy-MM-dd")"
           onchange="this.form.submit()" />
</form>

对应控制器方法接收绑定参数即可：

[HttpPost]
public IActionResult SetTimes(DateTime Date)
{
    // 执行你需要的指定业务逻辑
    return RedirectToAction("当前展示页面的Action名称");
}

方案2：无刷新AJAX模式（体验更佳，适合复杂交互场景） #

通过原生JS监听日期选中事件，异步请求控制器方法，不会打断用户当前的页面操作：

1. 页面中的日期控件定义

<input class="form-control col-sm-5" 
       id="dateSelect"
       asp-for="Date" 
       type="date" 
       value="@DateTime.Today.ToString("yyyy-MM-dd")" />

2. 页面底部添加事件监听逻辑

document.getElementById('dateSelect').addEventListener('change', function () {
    const currentValue = this.value;
    fetch('/你的控制器名称/SetTimes?selectedDate=' + currentValue, {
        method: "Get"
    }).then(response => {
        if (response.ok) {
            // 可选：请求成功后更新页面上的关联内容，比如可选时间范围
            console.log("日期已同步到服务端");
        }
    })
})

3. 对应控制器接口定义

[HttpGet]
public IActionResult SetTimes(DateTime selectedDate)
{
    // 执行需要的指定业务逻辑
    return Ok();
}

通用踩坑注意事项 #

• 不要给孤立的<input>标签单独添加asp-action、asp-controller这类路由类辅助属性，没有对应标签的上下文时，这类属性不会生成任何实际的HTML交互逻辑
• 涉及防伪验证的应用场景，AJAX请求需要主动带上页面生成的防伪令牌，否则会被ASP.NET Core的安全校验拦截

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