ASP.NET MVC - 将 JSON 对象返回到视图并"format as table"

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的例子。