JSON 파일이 HTML 태그를 대체합니다.

케이 - 값 쌍이 포함 된 내 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을 지정할 수 있습니다. 즉. 자바 스크립트에서

<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가 요소를 대체하도록 제안하지 않는 한. 어떤 자바 스크립트 프레임 워크가하는 것과 반대입니다. 브라우저에 데이터를 보내면 * 데이터 바인딩 *을 사용하지 않는 이유는 무엇입니까? –

당신은 JSON 데이터를 직렬화 및 교체를 위해 그 결과를 사용할 수 있습니다.

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);

이 당신의 HTML 템플릿입니다

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

그리고 가정

이 당신의 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 태그를 대체합니다.

답변

관련 문제