javascript - 将列表从 MVC ViewBag 传递到 JavaScript

Question

我有一个用户列表，我使用 View 包将其从我的 Controller 传递到我的 View 。现在我需要能够将相同的列表传递给页面上的 javascript。我可以使用 foreach 循环重建列表:

    @foreach (var item in ViewBag.userList) //Gets list of users passed from controller and adds markers to the map
{
    var userLat = item.LastLatitude;
    var userLon = item.LastLongitude;
    var _userId = item.Id;

    <script>array.push({"userId":"'@_userId'","userLat":"'@userLat'","userLon":"'@userLon'"});</script>
}

然而，这似乎是一种困惑的方法，如果进行更改，则需要进行大量返工。我知道 Stack overflow 上有类似的帖子，但其中很多都使用以前版本的 MVC，而且相同的语法似乎并不适用。有什么想法吗？

Answer 1

您可以使用 JSON 解析器在一行安全的代码中完成此操作。你绝对不应该像你在你的例子中试图做的那样用一些字符串连接和东西手动构建 JSON。也无需编写任何循环。

正确的做法是:

<script type="text/javascript">
    var array = @Html.Raw(
        Json.Encode(
            ((IEnumerable<UserModel>)ViewBag.userList).Select(user => new 
            { 
                userId = user.Id, 
                userLat = user.LastLatitude, 
                userLon = user.LastLongitude 
            })
        )
    );

    alert(array[0].userId);
</script>

生成的 HTML 将完全符合您的预期:

<script type="text/javascript">
    var array = [{"userId":1,"userLat":10,"userLon":15}, {"userId":2,"userLat":20,"userLon":30}, ...];
    alert(array[0].userId);
</script>

当然，此代码的下一级改进是摆脱 ViewCrap 并使用强类型 View 模型。