如何在JavaScript中获取CSHTML页面中的testModel模型列表数据

你之前写的var listModel = document.getElementById("mainOfferDiv")只能获取到div对应的DOM对象，该对象本身没有存储你的lstModel数据，所以无法拿到目标集合。
lstModel是服务端渲染阶段的C#变量，不会直接暴露给客户端JS，需要你主动把它序列化为JSON格式传递到客户端，以下是两种常用的实现方式：

方式1：挂载为全局JS变量（最简单） #

首先在你的CSHTML页面里，引入外部JS之前，添加如下代码，把C#集合序列化为JSON赋值给全局变量：

// 引入序列化命名空间，如果你用Newtonsoft.Json就替换成对应的命名空间
@using System.Text.Json
@model IEnumerable<testModel>
@{
    var lstModel = Model.ToList();
}
<!-- 把C#集合序列化为JSON，暴露为全局JS变量，注意一定要加Html.Raw避免特殊字符转义 -->
<script>
window.lstModel = @Html.Raw(JsonSerializer.Serialize(lstModel));
</script>
<!-- 注意必须在上面的script之后再引入你的外部JS文件 -->
<script src="你的外部JS文件路径"></script>

之后在外部JS文件里直接访问window.lstModel就能拿到完整的testModel数组，每一项的ID和name属性都可以直接读取。

方式2：存到DOM元素的data属性（适合不想污染全局变量的场景） #

在CSHTML的目标div上添加自定义data属性存储序列化后的JSON：

<div id="mainOfferDiv" data-model-list="@Html.Raw(JsonSerializer.Serialize(lstModel))">
@for(int i = 0; i<lstModel.Count(); i++)
{
}
</div>

然后在外部JS里按如下方式解析获取：

const mainDiv = document.getElementById("mainOfferDiv");
const listModel = JSON.parse(mainDiv.dataset.modelList);
// 此时listModel就是完整的testModel数组

注意事项：

• 必须加@Html.Raw，否则Razor会自动把JSON里的引号等特殊字符转义，导致JSON格式错误无法解析
• 如果你的项目用的是Newtonsoft.Json，把JsonSerializer.Serialize替换成JsonConvert.SerializeObject即可
• 序列化相关的C#代码必须写在CSHTML文件里，不能直接写到外部JS文件中，外部JS不会经过Razor引擎渲染，无法识别C#语法

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