结合 MVC .NET Razor 和 Javascript 构建数组答案

【问题标题】：Combine MVC .NET Razor with Javascript to build an array结合 MVC .NET Razor 和 Javascript 构建数组
【发布时间】：2014-10-31 02:42:25
【问题描述】：

我正在将一个列表从我的控制器传递到一个视图，我希望能够在其中获取模型并循环遍历 JQuery/Javascript 中的结果。我花了很长时间弄清楚如何做到这一点。

我的控制器返回一个颜色列表。在视图中，我将 List 转换为数组。然后我将它传递给我试图循环遍历它以构建一个可以在我的 JS 中使用的数组。

<script>
$(document).ready(function () {

    var currentView = sessionStorage.getItem('lastView');
    var jsArr;
    for (i=0; i<@arr.Length; i++) {
        jsArr.push(@arr[i])
    }

    if (!currentView) {
        sessionStorage.setItem('lastView', 0);
        $("body").css("background-image", "url('/Images/Home/@arr[0].Location')");
    } else {

        sessionStorage.setItem('lastView', currentView++);
    }
})
</script>

必须有一个简单的方法来做到这一点......

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

<script>
$(document).ready(function () {

    var currentView = sessionStorage.getItem('lastView');
    var jsArr = @Html.Raw(Json.Encode(arr)) ;

    if (!currentView) {
        sessionStorage.setItem('lastView', 0);
        $("body").css("background-image", "url('/Images/Home/@Html.Raw(arr[0].Location)')");
    } else {

        sessionStorage.setItem('lastView', currentView++);
    }
})
</script>

【讨论】：

感谢 tvanfosson。我肯定错过了什么。你的代码也不起作用。在
这只是一个解析错误。创建一个名为 identity:function identity(val) { return val; } 的函数并执行：var jsArr = identity(@Html.Raw(Json.Encode(arr)));，如果你想摆脱语法错误。
至于 TGH 的回答，剃须刀代码周围缺少引号 - var jsArr ='@Html.Raw(Json.Encode(arr))';
感谢 TGH！你是对的。我忘记了引号，这就是让我失望的原因。现在一切都很好。

【解决方案2】：

我会改为从服务器返回 json。但是，如果您想在 html 视图中执行此操作，我认为这样的方法可能有效：

var jsonObj = '@Html.Raw(Json.Encode(Model.arr))'

//the loop is unnecessary, but can be useful if you need additional processing
var myArray = [];
for (i=0; i<jsonObj.length; i++) {
        myArray.push(jsonObj[i])
    }

【讨论】：

感谢重播 THG。我尝试了类似的方法，但它在
这里还有一些想法stackoverflow.com/questions/3365551/…
@TGH，我认为您缺少引号var jsonObj = '@Html.Raw(Json.Encode(Model))';

【解决方案3】：

这是一种用剃须刀代码手动构建 JSON 或 JS 对象的方法，一些非常易于使用的代码：

@foreach (var item in Model.Users)
    {
    <text>
    UserData[UserData.length] = {
        "UserID": '@item.ID', "FullName": '@item.Name'
    };
    </text>
    }

我特意展示了正在使用的模型属性名称和不同的 JSON 属性名称，以显示手动构建数组的优势。

此外，在这种情况下，您可以通过多个数据集合发送模型。然后只需使用 Razor 代码遍历该集合 (@foreach (var item in Model.Users)) 即可构建 JSON 或 Javascript 对象数组

【讨论】：