JSON文件替換HTML標籤

我想解析我的JSON文件，其中包含kay值對並替換HTML中的標籤。JSON文件替換HTML標籤

所以API獲取一個JSON文件，例如：

{ 
    "myValue1": "value1", 
    "myValue2": "value2", 
    "myValue3": "value3", 
}

，我得到一個HTML模板，從數據庫，如：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="description" content="description"> 

<title>Page Title</title> 

<link rel="stylesheet" media="screen" href="css/styles.css" /> 
<link rel="stylesheet" media="print" href="css/print.css" /> 

<style> 
    body {background:#e3e3e3;} 
</style> 

</head> 

<body> 
     <p style="color: red;">{{myValue1}}</p> 
     <p>{{myValue2}}</p> 
     <p>{{myValue3}}</p> 
</body> 
</html>

，我想，以取代從JSON文件中的所有標記HTML文件，結果應該如下所示：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="description" content="description"> 

<title>Page Title</title> 

<link rel="stylesheet" media="screen" href="css/styles.css" /> 
<link rel="stylesheet" media="print" href="css/print.css" /> 

<style> 
    body {background:#e3e3e3;} 
</style> 

</head> 

<body> 
     <p style="color: red;">value1</p> 
     <p>value2</p> 
     <p>value3</p> 
</body> 
</html>

該模板應該是可替換的，並且存儲在D B。我如何在ASP.NET Core中執行此操作？

來源

2017-04-11 Cieja

-1

而不是使用像{{myValue1}}這樣的標籤，您可以爲需要更改的元素指定id。即。

<p style="color: red;" id="myValue1"></p> 
<p id="myValue2"></p> 
<p id="myValue3"></p>

在JavaScript中，搜索其中的JSON對象中的關鍵元素的ID相匹配的元素並設置值。

var json = { 
    "myValue1": "value1", 
    "myValue2": "value2", 
    "myValue3": "value3", 
}; 

for(var key in json) { 
    if(json.hasOwnProperty(key)) { 
    var element = document.getElementById(key); 
    if(element != null){ 
     element.innerHTML = json[key]; 
    } 
    } 
}

檢查出來的codepen - https://codepen.io/gswe/pen/ybBObP

來源

2017-04-11 07:21:23

這是一個.NET問題。除非您建議用戶將JSON值發送到瀏覽器並使用Javascript替換元素。這與任何Javascript框架都是相反的。如果您將數據發送到瀏覽器，爲什麼不使用*數據綁定*？ –

你可以反序列化JSON數據，並使用該結果更換。

假設這是你的JSON數據：

var json = @"{""myValue1"":""value1"",""myValue2"":""value2"",""myValue3"":""value3""}";

而且認爲這是你的HTML模板：

var template = "&lt;html&gt;.......&lt;/html&gt;";

現在反序列化這個JSON到一個新的Dictionary<string, string>字典對象使用JavaScriptSerializer：

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
var dictionary = serializer.Deserialize<Dictionary<string, string>>(json);

現在您可以替換模板l中的標籤ike this：

foreach(var item in dictionary) { 
    var key = "{{" + item.Key + "}}"; 
    var value = item.Value; 
    template = template.Replace(key, value); 
}

來源

2017-04-11 14:02:00

JSON文件替換HTML標籤

回答

相關問題