Question

我想解析包含kay-value对的JSON文件并替换HTML中的标签。

因此API获取JSON文件，例如：

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

我从DB获得了一个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>

模板应该是可替换的，并存储在DB中。我怎么能在ASP.NET Core中做到这一点？

Answer 1

您可以反序列化JSON数据并使用该结果进行替换。

假设这是您的JSON数据：

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

并假设这是您的HTML模板：

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

现在使用Dictionary<string, string>将此JSON反序列化为新的JavaScriptSerializer字典对象：

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

现在您可以像这样替换模板中的标签：

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

Answer 2

您可以为需要更改的元素指定 id ，而不是使用{{myValue1}}之类的标记。即

<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中查看 - Webpack for Angular2

JSON文件替换HTML标记

2 个答案: