JSONファイルがHTMLタグを置き換えます

私は、kay-valueペアを含むJSONファイルを解析し、HTMLのタグを置き換えたいと考えています。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>

と私はHTMLにJSONファイルからすべてのタグを交換したいと思います結果は次のようになります。

<!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コアでこれを行うにはどうしたらいいですか？

出典

2017-04-11 Cieja

-1

{{myValue1}}のようなタグを使用する代わりに、変更が必要な要素に対してidを指定することができます。すなわち、あなたのJavaScriptで

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

、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フレームワークとは逆のものです。データをブラウザに送ると、* data binding *を使わないのはなぜですか？ –

あなたはJSONデータをデシリアライズし、交換するため、その結果を使用することができます。

これはあなたのJSONデータであると仮定します

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

そして、これはあなたのHTMLテンプレートであると仮定します。

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

は今JavaScriptSerializerを使用して、新しいDictionary<string, string>辞書オブジェクトにこのJSONをデシリアライズ：

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

これで、テンプレートlのタグを置き換えることができますこれは：

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タグを置き換えます

答えて

関連する問題