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

Question

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

我是MVC的新手，并从Controller创建了一个包含所需内容的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);

您不能返回both。因此，听起来您有两个选择：

1. 以player对象作为模型返回视图。在这种情况下，视图将直接从模型中呈现数据，并且不需要JSON或JavaScript的任何参与。 （好吧，根据您的视图和需要执行的操作。可能不会在控制器级别。）具有两个控制器动作。一个返回视图，另一个返回JSON数据。客户端JavaScript代码将对第二个操作发出AJAX请求，以获取JSON数据。
2. 您选择哪一个取决于您自己。但是最终您无法通过同一操作返回

   both

视图和原始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

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

let playerID = @Model;

例如，如果playerID的值为123，则会将客户端显示为：

let playerID = 123;

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