如何将页面日期选择器值传入ASP.NET Core控制器的DeviceDetails方法？

原来的Html.ActionLink是在服务器端渲染生成的静态链接，它没办法获取客户端输入框里的动态值——你现在写的begindate ="begindate"只是把字符串"begindate"作为参数值传过去，不是用户实际选择的日期。要解决这个问题，有两种常用的方案，你可以根据需求选择：

方案1：用表单提交（最简单直接的方式） #

把输入框和按钮包裹在表单里，利用表单提交自动传递参数的特性，不需要额外写JS：

<!-- 替换你的按钮和输入框代码 -->
<form asp-action="DeviceDetails" asp-controller="你的控制器名称" method="get">
    <!-- 隐藏字段传递idDetails，和控制器参数名对应 -->
    <input type="hidden" name="idDetails" value="@ViewBag.DeviceName" />
    <!-- 给日期输入框加上name属性，必须和控制器方法的参数名一致 -->
    <input id="begindate" name="begindate" type="date" class="btn btn-default"/>
    <input id="enddate" name="enddate" type="date" class="btn btn-default" />
    <button type="submit" class="btn btn-default">Show data</button>
</form>

说明： #

• 表单的asp-action和asp-controller指定要提交到的控制器方法，method="get"会把参数拼在URL里，和你原来用ActionLink的行为一致；
• 输入框的name属性必须和控制器方法的参数名完全匹配（begindate、enddate），这样表单提交时才会自动把输入值传给控制器；
• 隐藏字段用来传递idDetails，避免用户手动修改。

方案2：用JavaScript动态生成带参数的链接（适合需要自定义验证的场景） #

如果需要在跳转前做一些逻辑（比如检查用户是否选了日期），可以用JS动态修改链接的参数：

<input id="begindate" type="date" class="btn btn-default"/>
<input id="enddate" type="date" class="btn btn-default" />
<!-- 先生成基础链接（只带idDetails），给链接加个id方便JS操作 -->
<a id="showDataBtn" href="@Url.Action("DeviceDetails", new { idDetails = ViewBag.DeviceName })" class="btn btn-default">Show data</a>

<script>
document.getElementById('showDataBtn').addEventListener('click', function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    
    // 获取输入框的日期值
    const beginDate = document.getElementById('begindate').value;
    const endDate = document.getElementById('enddate').value;
    
    // 可选：添加验证逻辑，比如检查日期是否为空
    if (!beginDate || !endDate) {
        alert('请选择开始和结束日期！');
        return;
    }
    
    // 拼接完整的URL，用encodeURIComponent编码避免特殊字符问题
    const baseUrl = this.href;
    const newUrl = `${baseUrl}&begindate=${encodeURIComponent(beginDate)}&enddate=${encodeURIComponent(endDate)}`;
    
    // 跳转到目标地址
    window.location.href = newUrl;
});
</script>

说明： #

• Url.Action先生成只包含idDetails的基础链接，JS再动态拼接日期参数；
• encodeURIComponent用来编码日期值，避免出现空格、特殊字符导致的参数传递错误；
• 可以在跳转前加入任意自定义逻辑，比如日期合法性检查（比如结束日期不能早于开始日期）。

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