如何将Model存储在隐藏输入框并在JavaScript函数中访问？

我来帮你梳理一下这个场景下的正确做法和注意事项，毕竟我也经常处理ASP.NET MVC和JS交互的这类问题😉

一、后端序列化的正确写法 #

你当前的后端代码思路是对的，我调整下Razor语法的写法让它更清晰规范：

@{
    // 序列化Model中的DefaultFare对象为JSON字符串
    var defaultFareListJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.DefaultFare);
    // 生成隐藏字段存储JSON，Html.Hidden会自动处理HTML转义，避免前端解析出错
    @Html.Hidden("DefaultFareList", defaultFareListJson);
}

这里要确保Model.DefaultFare是可序列化的对象——比如没有循环引用、没有无法序列化的特殊类型，如果有需要可以给实体类加上[JsonObject]等Newtonsoft.Json的特性来控制序列化行为。

二、前端JS的正确访问方式 #

你的JS代码已经有了雏形，但需要补充空值判断和完整的属性访问逻辑，避免运行时报错：

function viewDefaultFareSchedule() {
    // 先获取隐藏字段的JSON值
    var fareJson = $('#DefaultFareList').val();
    
    // 先处理空值或无效数据的情况
    if (!fareJson || fareJson === "null") {
        alert('暂无默认票价数据');
        return;
    }
    
    // 解析JSON字符串为JS对象，原生JSON.parse()或jQuery.parseJSON()都可以用
    var defaultFareObject = JSON.parse(fareJson);
    // 也可以用jQuery的方法：var defaultFareObject = jQuery.parseJSON(fareJson);
    
    // 访问Fares属性（假设你的DefaultFare对象包含Fares集合）
    if (defaultFareObject.Fares && defaultFareObject.Fares.length > 0) {
        // 举个例子：遍历所有票价并打印到控制台
        defaultFareObject.Fares.forEach(function(fareItem) {
            console.log(`票价ID：${fareItem.Id}，价格：${fareItem.Price}`);
        });
        
        // 或者弹出第一个票价的信息
        alert(`第一个默认票价：${defaultFareObject.Fares[0].Price}`);
    } else {
        alert('未找到有效的票价列表');
    }
}

三、常见问题排查 #

• 解析报错？ 打开浏览器开发者工具的Elements面板，找到#DefaultFareList隐藏字段，查看它的value属性是否是标准的JSON格式（比如有没有未转义的双引号）。如果有问题，检查后端序列化是否正确，或者是否有特殊字符需要处理。
• 访问Fares时报错？ 确认Model.DefaultFare确实包含Fares属性，并且序列化后JSON里存在这个字段。另外一定要加空值判断，避免defaultFareObject为null时访问属性导致JS报错。
• ASP.NET Core用户注意 如果是用ASP.NET Core，默认序列化器是System.Text.Json，和Newtonsoft.Json的行为略有不同，如果遇到序列化问题，可以切换回Newtonsoft.Json或者调整序列化配置。

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