ASP.NET Entity Framework中向onchange方法传DateTime变量报错

你遇到的核心问题有两个：一是DateTime值传递到JS时的语法错误，二是循环中元素ID的不规范（含空格）。咱们一步步拆解解决：

为什么原代码会报错？ #

当Razor渲染checkChanged({Model.Periods[i].EndTime})时，它会把DateTime直接输出成类似checkChanged(2024/05/20 14:30:00)的格式——这在JavaScript里是无效语法：日期字符串没有引号包裹，空格和斜杠会被当成运算符，直接触发语法错误。

另外，元素ID里的空格endTime {i}也不规范，后续用JS选择元素时容易出问题，建议改成下划线分隔的endTime_{i}。

方案1：传递格式化后的日期字符串（带引号） #

把DateTime转成JS能识别的ISO格式字符串，并用单引号包裹，确保渲染后是合法的JS字符串参数：

@Html.EditorFor(model => model.Periods[i].EndTime, new { 
    htmlAttributes = new { 
        @class = "form-control", 
        id = $"endTime_{i}", 
        onchange = $"checkChanged('{Model.Periods[i].EndTime.ToString("o")}')" 
    } 
})

对应的JS函数可以直接处理：

function checkChanged(newTime) {
    // 转成JS Date对象使用（可选）
    const date = new Date(newTime);
    console.log("原始字符串:", newTime);
    console.log("Date对象:", date);
}

方案2：通过DOM元素获取值（更可靠） #

避免直接传递参数，而是通过元素ID或事件对象获取输入值，彻底规避Razor渲染的格式问题：

方式A：传递元素ID

@Html.EditorFor(model => model.Periods[i].EndTime, new { 
    htmlAttributes = new { 
        @class = "form-control", 
        id = $"endTime_{i}", 
        onchange = $"checkChanged('endTime_{i}')" 
    } 
})

JS函数：

function checkChanged(elementId) {
    const input = document.getElementById(elementId);
    const newTime = input.value;
    console.log("输入值:", newTime);
    // 转成Date对象
    const date = new Date(newTime);
    console.log("解析后的日期:", date);
}

方式B：使用事件对象（最简洁）

不用传任何参数，直接通过事件对象获取触发元素的值：

@Html.EditorFor(model => model.Periods[i].EndTime, new { 
    htmlAttributes = new { 
        @class = "form-control", 
        id = $"endTime_{i}", 
        onchange = "checkChanged(event)" 
    } 
})

JS函数：

function checkChanged(event) {
    const newTime = event.target.value;
    console.log("输入值:", newTime);
    const date = new Date(newTime);
    console.log("解析后的日期:", date);
}

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