2015-02-06 29 views
1

我有一个使用.NET Web API的正常运行的Web API。返回的是通过api url call/api/v1/Au/Get获取的JSON数据。现在我不知道如何将这些数据提供给有用的数据,因为此url路径是我的api调用,并且与视图无关。如何返回我可以传入HTML表格或列表的数据?我一直在研究很多,并没有提出任何有用的东西。使用ASP.NET Web API的JSON到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含有大量的数据和原始字符串是所有的表单的提交作出后的网页上显示的格式。任何对此的帮助将非常感激。

+0

你可以做的是,做一个javascript ajax调用并获取该JSON,解析它并在您的DIV或容器中设置相关值。 你可以发布你的JSON数据吗? – 2015-02-06 05:48:45

+0

输出太长,无法发布到这里。 http://codebeautify.org/jsonviewer/a6e2bb – cbanowsky 2015-02-06 05:59:18

+0

为什么不创建一个'VIEWMODEL'并将其加载到视图中?这将是真正的显示所有的数据'VIEW' – 2015-02-06 06:02:05

回答

1

Web API的答案是JSON,它是一个串行化为字符串的JavaScript对象(JSON是JavaScript Object Notation)。你需要做的是

  1. 得到JSON答案形成服务器
  2. 将其转换为JavaScript对象
  3. 和使用某种类型的模板或MV *框架,表中的easyly表现出来。

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

对于2,如果浏览器太旧(例如JSON 3),则可以使用浏览器的JSON功能(JSON.parse)或JSON库。然而,如果您使用像jQuery这样的框架来制作Ajax请求,则可以直接获取JavaScript对象。

为3,则可以使用JavaScript模板库,例如HandlebarsMustache,或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插件datatablesSlickGridjqGrid

正如你所看到的那样,有很多选择,但是基本的想法在这个答案开头的3点中有解释。