根據字段將json數據填充到html模板中

我需要使用從Web API調用返回的JSON數據填充HTML。 HTML也是一個模板文件，將會向客戶公開。其中客戶可以編輯HTML中的一些字段。根據字段將json數據填充到html模板中

例如刪除一些標題和列等。假設HTML具有表格數據格式。每當用戶單擊客戶端上的按鈕時，都會執行Web API調用，我們會得到一個JSON數據。現在這個JSON數據必須根據它所具有的標籤加載到HTML模板上。我們不得不使用c＃來填充HTML。所有的渲染（HTML格式）都必須在服務器端進行。我們也可以使用JavaScript，但現在服務器解決方案在asp.net web-API中。主要要求是渲染必須在服務器端使用任何語言進行。如何在C＃中執行此操作？

HTML

<h3>Table Name</h3> 
<table style="width:100%"> 
    <tr> 
    <th>Row Names</th> 
    <th>NewItems</th> 
    <th>ChangedItems</th> 
    <th>Errors</th> 
    <th>total</th> 
    </tr> 

    <tr> 
    <td>Types</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 

    <tr> 
    <td>Properties</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 

    <tr> 
    <td>Lists</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 

    <tr> 
    <td>Entries</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</table>

JSON

{ 
    "Compare Report": { 
     "Types": { 
      "NewItems": 0, 
      "ChangedItems": 0, 
      "Errors": 0, 
      "Total": 0 
     }, 
     "Properties": { 
      "NewItems": 0, 
      "ChangedItems": 0, 
      "Errors": 0, 
      "Total": 0 
     }, 
     "Lists": { 
      "NewItems": 0, 
      "ChangedItems": 0, 
      "Errors": 0, 
      "Total": 0 
     }, 
     "Entries": { 
      "NewItems": 0, 
      "ChangedItems": 0, 
      "Errors": 0, 
      "Total": 0 
     } 
    } 
}

樣品臺

來源

2017-10-04 Sundeep

JSON和HTML之間的關係是什麼？也就是說，是表中的行或列表示的NewItems/ChangedItems/Errors/Total？ – jhenderson2099

對不起，應該有他們關聯。現在編輯它。 NewItems/ChangedItems/Errors/Total是列名稱類型/道具/列表/條目是行名稱 – Sundeep

是否列（當前顯示爲Col1/2/3/4應該表示NewItems/ChangedItems/Errors/Total）？此外，你是否期待一個零表（給定你當前的JSON數據）？ – jhenderson2099

您將需要一個模型（如AS的一部分P MVC）以及JSON序列化器/反序列化將JSON轉換爲對象（因爲您沒有使用AJAX/jQuery）。一個JSON解串器可作爲的一部分：

在.NET JavaScriptSerializer class（取決於淨的版本，您正在使用），或
的Newtonsoft JSON.Net庫

可以使用JSON解串器將JSON映射到一個ASP MVC模型，然後在您的視圖中進行渲染。

如果您檢查this .Net Fiddle，您將看到與Newtonsoft.JSON和ASP MVC 4.5一起檢查。（沒有對JavaScriptSerializer類的內置支持。）

來源

2017-10-04 16:34:02 jhenderson2099

我明白你的建議，謝謝。我猜想使用的視圖是cshtml。沒有使用模型沒有辦法。由於這個視圖必須是html而不是cshtml，並且不應該包含任何代碼。 – Sundeep

正確。該視圖是.cshtml。如果您使用[ViewBag]（https://msdn.microsoft.com/en-us/library/system.web.mvc.controllerbase.viewbag（v = vs.118）.aspx），則可以在沒有模型的情況下執行此操作。。 – jhenderson2099

該模型被用作由控制器加載並被視圖使用的MVC框架的一部分。你可以通過Javascript反序列化JSON，但你仍然需要Java Javascript來渲染表格。無論採用哪種方式，您都需要一個對象（C＃或JavaScript）來獲取該JSON並動態地構建表。 – jhenderson2099

根據字段將json數據填充到html模板中

回答

相關問題