如何使用 ASP.NET Web api 在漂亮的 HTML 中格式化 JSON 返回值？答案

【问题标题】：How to format JSON return value in nice HTML with ASP.NET web api?如何使用 ASP.NET Web api 在漂亮的 HTML 中格式化 JSON 返回值？
【发布时间】：2014-03-06 14:22:10
【问题描述】：

这是我第一次使用 MVC Web Api 2，我设法让我的 Web 应用程序从单独域上的第二个 Web 应用程序中以 JSON 格式检索我需要的数据。

我的 API 控制器如下所示：

private IQueryable<ArticleDTO> MapArticles()
{
    return from p in db.Articles.Include("Tags")
           select new ArticleDTO() {    
           ArticleID=p.ArticleID,
           Title = p.Title,
           Subheading = p.Subheading,
           DatePublished = p.DatePublished,
           Body = p.Body,
           Tags = Tags.Select(t => new TagDTO {
               Name = t.Name
           })
};
}

public IEnumerable<ArticleDTO> GetArticles()
{
    return MapArticles().AsEnumerable();
}

我的客户端端点看起来像这样（主要用于测试）：

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(uri)
        .done(function (data) {

            $.each(data, function (key, item) {

                $('<li>', { text: formatItem(item) }).appendTo($('#articles'));
            });
        });
});

function formatItem(item) {
    return item.Title;
}

我的问题是我试图在 CSS/html 中格式化生成的 JSON - 如果我直接从数据库获取数据，而不是通过 API，Razor 视图如下所示：

<div class="col-md-8">
    <h3>
        @Html.ActionLink(@item.Title, "ArticlesDetail", "Home", new { id = item.ArticleID }, null)
    </h3>
    <span class="sidebardate">@item.Date.ToLongDateString()</span><br />
    @if (item.Tags != null && item.Tags.Count > 0)
    {
        <span class="sidebarabstract ArticleTags">
            <strong>Tags:</strong>
            @Html.Raw(string.Join(", ", from category in item.Tags select string.Format("<span><a href='/Article/Category/{0}'>{1}</a></span>", category.Name, category.Name)))
        </span>
    }
    <div class="Articlesbodytext">
        <p>@item.Abstract </p>
    </div>
</div>

如何格式化我的 JSON 结果以匹配此格式？我是不是走错了路，我应该在 API 调用中使用 RSS 提要吗？

感谢您的帮助！

【问题讨论】：

您的网站设计有问题。您需要一个适当的数据层/服务，可以在您的 Web api 以及您的 mvc 表单中重用。
我不同意 - 我的 api 控制器返回我想要的结果，我的问题是如何格式化响应。
是的。您可以使用 json 序列化/反序列化库，如 Json.NET 或 JavaScriptSeralizer（原生于 .net 框架）等。这里的大多数答案已经描述了这一点。您在控制器操作方法中使用库，将模型传递给视图。之前，我只是强调有一个统一的方式来获取数据。

标签： c# asp.net asp.net-mvc json asp.net-web-api

【解决方案1】：

首先，Web API 不会出错。其次，使用 Fiddler (get it from here) 并检查您的 Web API 响应。根据您在那里找到的内容调整您的 WebAPI 或 Javascript。

【讨论】：

我的 API 响应很好，只是不知道收到后如何格式化

【解决方案2】：

NewtonsoftJSON 我取得了不错的成绩

另外，请注意，当您调用$.each(...) 时，回调的参数与$("#id").each(...) 相反

$.each takes a function (element, key) { }

但是

$("...").each takes a function (key, element) { }

这让我有些头疼。

【讨论】：