ASP.NET MVC - 将 JSON 对象返回到视图并“格式化为表格”

Question

我有一个由另一位开发人员开发的视图，其中已经有 javascript 代码应该处理 JSON 对象并格式化为 HTML 表。

我是 MVC 的新手，我从控制器创建了一个 JSON 对象，其中包含我需要的内容。问题是从我的控制器中，如果我只返回 JSON 对象，那么浏览器只会向客户端显示原始 JSON 字符串。 似乎当我返回一个 JSON 对象时，浏览器只显示 JSON，而没有实际调用我的视图，该视图具有处理 JSON 的代码并使其对用户友好。

这是我的控制器：

        public JsonResult GetPlayerNameByID(int playerID)
        {
            var player = GetPlayerByID(playerID);

            return Json(player, JsonRequestBehavior.AllowGet);
        }

这通过下拉列表的点击事件调用。 该页面的视图如下所示：

@model FirstApp.Models.PlayerViewModel

<div id="container" class="container">
    <table class="table player">
        <thead>
            <tr>
                <th class="Name">Name</th>
                <th class="Overall">Overall</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

我相信我的问题是控制器没有返回到那个视图，而只是一个原始的 JSON 对象。 关于如何返回该视图的任何建议（这是进行调用的视图）。

Answer 1

为了返回一个视图，你需要返回一个视图。比如：

return View();

或者，如果需要包含模型：

return View(someModel);

但您的控制器操作只是返回 JSON 数据：

return Json(player, JsonRequestBehavior.AllowGet);

您不能同时返回。所以听起来你有两个选择：

1. 返回一个以player 对象为模型的视图。在这种情况下，视图将直接呈现模型中的数据，不需要 JSON 或任何 JavaScript 参与。 （嗯，可能有，这取决于您的视图是什么以及您需要做什么。但它不会在控制器级别。）
2. 有两个控制器动作。一个返回视图，另一个返回 JSON 数据。客户端 JavaScript 代码将向第二个操作发出 AJAX 请求以获取 JSON 数据。

你选择哪一个真的取决于你。但最终您不能同时从同一个操作返回视图和原始 JSON。

---

举第二个选项的例子，你会有两个动作：

public ViewResult Player(int playerID)
{
    return View(playerID);
}

public JsonResult GetPlayerNameByID(int playerID)
{
    var player = GetPlayerByID(playerID);

    return Json(player, JsonRequestBehavior.AllowGet);
}

第一种方法将返回您的Player 视图（假设您当然有一个），仅使用一个整数作为模型。所以视图将从该模型类型的声明开始：

@model int

这意味着在视图代码中，您将能够访问变量Model 中的playerID。因此，在视图的 JavaScript 代码中，您可以将其捕获到变量中：

let playerID = @Model;

例如，如果 playerID 的值为 123，这会将客户端呈现为：

let playerID = 123;

从那里您可以使用 AJAX 向@Url.Action("GetPlayerNameByID") 发出请求以获取 JSON 数据。如何执行此操作取决于您使用的 JavaScript 框架/库（如果有），并且网上有许多示例说明如何在各种框架和 ASP.NET 中使用 AJAX。