将 JSON 而不是模型从我的控制器传递到我的 Razor 视图

Question

我有一个继承以下内容的视图：

@model MvcApplication.Models.Application

但是我需要知道是否可以像传递模型对象一样将 JSON 对象传递到我的视图？ 因为我有以下控制器：

public ActionResult ListPackages()
{
    using (var client = new WebClient())
    {
        var query = HttpUtility.ParseQueryString(string.Empty);
        //code goes here ....
        return Content(json, "application/json");
    }
}

它使用 API 调用返回 JSON，然后我使用 JavaScript 在视图上显示 JSON，如下所示：

 $.ajax({
            url: $('#geturl').data('url'),
            type: 'GET',
            cache: false,
            success: function (result) {
                $.each(result.data, function (key, val) {
                    var str = val.packageName;
                    $('<li/>', { text: str })
                        .appendTo($('#products'));
                });
            }

使用 JavaScript 显示 JSON 的问题是，它会让我很难轻松地使用 JSON 对象，例如基于返回的 JSON 创建链接或创建包含 JSON 的表。所以我的问题是：是否可以将 JSON 对象而不是 Model 对象从我的控制器传递到我的视图？

Answer 1

服务器端与客户端的混淆

你在这里谈论两件事：

1. 创建视图：控制器将模型传递给服务器端的视图，使用 JSON 这样做没有多大意义，因为内存中的对象正在传递给视图引擎。

2. 在客户端使用 JSON 数据：这里讨论的是客户端-服务器 Ajax 通信，您从客户端请求数据并获取从服务器返回的 JSON。这可以说与传递到视图的模型数据无关

使用 JSON 的最佳解决方案

为了在客户端轻松使用 JSON 数据（在您的情况下是一个包数组）来生成生成的填充 HTML，需要在客户端使用某种模板。 jQuery 曾经有非最终模板插件，它

现在是一个单独的项目。我对此有很好的经验，但还有其他插件。使用您对其语法最满意的一种。

这些模板应该放在哪里？

1. 如果您在创建视图时知道从服务器传递的 JSON 对象的结构，则可以将模板放入视图本身中，它们只会等待在客户端上使用。

2. 如果您不知道 JSON 对象的结构，那么您必须将模板与 JSON 对象一起传递或作为单独的请求传递。

第一种方法是常用方法，第二种方法很少使用，而且更加动态。

不使用 JSON 的最佳解决方案

如果您不喜欢将 JSON 解析为 HTML 结果（手动或使用模板），您始终可以向控制器操作发出 Ajax 请求，这将返回准备好的 HTML 作为部分视图而不是 JSON 结果。这样，您就可以轻松地将 HTML 放到您的页面上，而无需任何 JSON 数据操作。

在这里你有什么收获？假设您的应用程序中有此功能：

您有一个显示包分页列表的视图。
当用户首次访问该页面时，将返回包裹的第一页
分页到下一页是通过 Ajax 完成的，列表将被返回的数据替换

如果您要为后续 Ajax 请求创建分部视图，则可以在主视图中使用相同的分部视图来显示包的第一页。这将确保您只需更改一个部分视图，并且显示会在初始页面加载以及后续包分页时发生变化。

如果你使用视图+JSON+模板，这意味着你必须维护

两个包列表的呈现：第一页视图中使用的一个和显示后续分页的模板。

那么是哪一个呢？

在所有条件相同的情况下，第二个解决方案会更好。但当然选择取决于您的情况（情况不相等），您应该能够确定哪一个最适合您的情况。

Answer 2

不，你不能。视图必须是模型的强类型化。因此，一种解决方案是先将此 JSON 反序列化为模型对象，然后再将其传递给视图：

public ActionResult ListPackages()
{
    using (var client = new WebClient())
    {
        var query = HttpUtility.ParseQueryString(string.Empty);
        //code goes here ....

        var model = new JavaScriptSerializer().Deserialize<MyViewModel>(json);
        return View(model);
    }
}

其中

MyViewModel

 当然会反映您正在使用的 JSON 结构。