2015-02-06 28 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點中有解釋。