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标签

回答

相关问题