如何在jQuery代码中结合MVC Model实现foreach循环替换硬编码数据

嘿，我明白你现在的需求——要把jQuery里的硬编码数据替换成MVC Model里的内容，还要做循环遍历对吧？其实有两种比较常用的方法，我给你详细讲讲：

方法一：直接通过Razor生成JavaScript数据数组 #

Razor是服务器端视图引擎，所以可以直接在脚本里用它的foreach循环来拼接JS对象数组，页面渲染时就会自动把Model数据注入进去。

举个例子，假设你的Model是一个IEnumerable<Product>集合（包含Id和Name属性），代码可以这么写：

@{
    // 这里假设你的Model是产品集合
}

<script>
$(document).ready(function() {
    // 用Razor循环生成JS数组
    var modelData = [
        @foreach(var product in Model)
        {
            // 把每个Model项转成JS对象，注意字符串要加引号
            @: { id: @product.Id, name: "@product.Name" },
        }
    ];
    // 移除最后一个多余的逗号（避免JS语法错误）
    if(modelData.length > 0) modelData.pop();

    // 现在可以用jQuery遍历这个数组了
    $.each(modelData, function(index, item) {
        // 这里写你的业务逻辑，比如打印到控制台或者生成页面元素
        console.log(`产品ID：${item.id}，名称：${item.name}`);
        $("#productList").append(`<li>${item.name}（ID：${item.id}）</li>`);
    });
});
</script>

如果你的Model属性里有特殊字符（比如引号、换行），记得把字符串部分改成@Html.Raw(Json.Encode(product.Name))，这样会自动转义特殊字符，避免JS语法错误。

方法二：把Model序列化为JSON（更优雅的方式） #

这种方法不用手动拼接每个属性，直接把整个Model序列化成JSON字符串，再转成JS对象，适合结构复杂的Model。

示例代码：

<script>
$(document).ready(function() {
    // 把Model序列化为JSON，用Html.Raw避免转义成HTML实体
    var modelData = @Html.Raw(Json.Encode(Model));

    // 用jQuery的each方法遍历数据
    $.each(modelData, function(index, item) {
        console.log(`ID：${item.Id}，名称：${item.Name}`);
        // 这里可以做你需要的操作，比如替换页面上的硬编码内容
        $(`#item-${item.Id}`).text(item.Name);
    });
});
</script>

如果你的Model是单个对象而不是集合，那就直接序列化单个对象就行，不用each循环，比如var singleItem = @Html.Raw(Json.Encode(Model));，然后直接用singleItem.Id获取属性。

注意事项 #

• 确保你的Model是可序列化的，不要有循环引用（比如A包含B，B又包含A），否则序列化会报错。
• 如果是.NET Core项目，把Json.Encode换成Json.Serialize就行，用法类似。
• 敏感数据不要直接序列化到前端，避免信息泄露。

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