ASP.NET MVC：如何将cshtml日期变量传递至JS模块？

首先你遇到的第一个问题是C#变量命名不合法：C#里变量名不能用连字符-，所以end-date得改成endDate或者end_date这种合法命名。

1. 定义合法的C#日期变量 #

在home.cshtml里先定义正确的日期变量，可以直接硬编码，也可以从后端模型/ViewBag获取：

@{
    // 直接定义目标日期
    var endDate = new DateTime(2030, 12, 31);
    // 或者从ViewBag读取后端传递的值：var endDate = ViewBag.TimerEndDate;
}

2. 把日期传递到JS的几种实用方式 #

方式一：通过HTML data属性传递（推荐） #

这种方式符合DOM语义化，还能把数据和元素绑定在一起，修改CSHTML的代码如下：

<p id="timer" data-end-date="@endDate.ToString("yyyy-MM-dd")"></p>

这里用yyyy-MM-dd格式是因为JS的Date对象能直接解析这种格式，避免出现日期解析错误。

方式二：直接注入JS变量 #

如果不需要通过DOM元素传递，可以直接在页面里生成JS变量。如果是普通JS脚本，直接写：

<script>
    // 把C#日期转成JS可识别的格式，生成Date对象
    const targetEndDate = new Date('@endDate.ToString("yyyy-MM-dd")');
</script>

要是你用的是ES模块（比如通过import加载独立的JS文件），可以把变量挂载到全局对象，方便模块读取：

<script>
    // 挂载到window全局对象
    window.targetEndDate = new Date('@endDate.ToString("yyyy-MM-dd")');
</script>
<script type="module" src="/js/timer.js"></script>

3. 对应的JS实现代码（以倒计时功能为例） #

从data属性读取日期的JS代码 #

// 获取页面元素和目标日期字符串
const timerEl = document.getElementById('timer');
const endDateStr = timerEl.dataset.endDate;
const targetDate = new Date(endDateStr);

// 更新倒计时的函数
function updateCountdown() {
    const now = new Date();
    const timeDiff = targetDate - now;

    // 时间差小于等于0，说明倒计时结束
    if (timeDiff <= 0) {
        timerEl.textContent = '倒计时已结束';
        return;
    }

    // 计算剩余的天、时、分、秒
    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    // 更新页面显示
    timerEl.textContent = `剩余：${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
}

// 初始化显示，然后每秒更新一次
updateCountdown();
setInterval(updateCountdown, 1000);

ES模块方式的JS代码（timer.js） #

如果你用的是模块化JS，直接从全局读取变量即可：

// 从全局window对象获取目标日期
const targetDate = window.targetEndDate;

function updateCountdown() {
    const now = new Date();
    const timeDiff = targetDate - now;

    if (timeDiff <= 0) {
        document.getElementById('timer').textContent = '倒计时已结束';
        return;
    }

    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    document.getElementById('timer').textContent = `剩余：${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
}

updateCountdown();
setInterval(updateCountdown, 1000);

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