使用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 。

如您所見，有很多選擇，但是在此答案開頭的三點中對基本思想進行了解釋。