如何从视图组件返回 JSON？

Posted 2023-04-12

【中文标题】如何从视图组件返回 JSON？

【英文标题】：How to return JSON from a View Component?

【发布时间】：2018-03-20 06:30:29

【问题描述】：

我正在尝试将控制器逻辑移动到视图组件类中，但控制器仅返回 JSON，用于作为我的视图组件 UI 的客户端小部件。这是问题所在的核心控制器代码：

public IActionResult TreeData(string dir = "")

    var browsingRoot = Path.Combine(_config.BaseDir, dir);
    var nodes = new List<TreeNode>();
    nodes.AddRange(RecurseDirectory(browsingRoot));
    return Json(nodes);

这在控制器中很好，但是ViewComponent 派生类不喜欢Json 返回方法。我看到的所有示例都使用return View(*<something>*)。

视图组件不应该返回整个响应，所以我想它应该有一个 Content 返回方法至少返回纯 html。

【问题讨论】：

文档：docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components

尝试添加更多关于您打算如何在视图中使用该组件的详细信息。将有助于提供答案。

为什么需要从组件中返回 json？那不是组件的设计目的。您需要从中返回视图（带有可选模型）。请也提供您的视图，可能在 viewcomponent 中生成 html 会有所帮助（您在问题中提到，您可以从 InvokeAsync 返回纯 html，但它会对您有帮助吗？）

@ingvar 如果我的组件视图包含一个 Bootstrap 插件，并且该插件需要 Json 来初始化。那是以前，现在这个问题是严格的学术问题。这是可能的，使用ContentViewComponentResult。

【参考方案1】：

看起来可以通过返回内容而不是视图来完成：

public IActionResult TreeData(string dir = "")

    var browsingRoot = Path.Combine(_config.BaseDir, dir);
    var nodes = new List<TreeNode>();
    nodes.AddRange(RecurseDirectory(browsingRoot));
    return new ContentViewComponentResult(JsonConvert.SerializeObject(nodes));

【讨论】：

这段代码给我一个错误说Cannot implicitly convert type [...]ContentViewComponentResult to [...]IActionResult