使用ASP.NET Web API将JSON转换为HTML表

Question

我有一个使用.NET Web API的可运行的Web API。 通过api网址调用/ api / v1 / Au / Get返回的是JSON数据。 现在，我不知道如何将数据输入有用的东西，因为此url路径是我的api调用，并且与视图无关。 如何返回可传递到HTML表或列表中的数据？ 我一直在研究很多，还没有想到任何有用的东西。

这是打电话的形式

<form class="rhc" method="POST" action="/api/v1/Au/Get">
    <input type="text" name="twitter_handle" class="form-control" placeholder="Twitter" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
            <span class="ladda-label">Free Preview</span>
            <span class="ladda-spinner"></span>
        </button>
    </span>
</form>

返回的JSON包含大量数据，并且原始字符串就是提交表单后在页面上显示的全部内容。 在这方面的任何帮助将不胜感激。

Answer 1

Web API的答案是JSON，这是一个序列化为字符串的JavaScript对象（JSON是JavaScript Object Notation）。 您需要做的是

1. 从服务器获取JSON答案
2. 将其转换为JavaScript对象
3. 并使用某种模板或MV *框架将其轻松显示在表格中。

对于1，您需要使用AJAX进行查询以获取JSON响应。

对于2，您可以使用浏览器的JSON功能（ JSON.parse ），或者使用JSON库（如果浏览器过旧）（例如JSON 3 ）。

但是，如果使用类似jQuery的框架来发出Ajax请求，则可以直接获取JavaScript对象。

对于3，您可以使用JavaScript模板库（如Handlebars或Mustache） ，或MV *库（如MVVM Knockout.JS）。

伪代码：

$.post('service url', {twitter_handle: 'value'}).done(function(data) {
   // Use any of the template or MV* solution to generate the HTML
   // from the data object and the template
});

另外，您可以使用任何可用的网格JavaScript库，例如jQuery插件datatables或SlickGrid或jqGrid 。

如您所见，有很多选择，但是在此答案开头的三点中对基本思想进行了解释。