[ASP.NET CORE/MVC] #13 컨트롤러에서 받은 데이터를 Javascript변수에 넣기

안녕하세요 미나라이입니다.
이번에는 ASP.NET CORE MVC Web에서 컨트롤러로 받아온 데이터를 Javascript변수에 넣어서 사용하는 방법에 대해서 간단하게 포스팅 하려고 합니다.
프로젝트 환경
OS : Windows 10
IDE : Visual Studio Code 1.62.2
.Net SDK : 5.0.403
.Net Runtime : .NetCore.App 5.0.10 / 5.0.12
Razor페이지의 Javascript변수에 값 넣는 방법
컨트롤러에서 반환한 데이터를 Javascript변수에 넣어서 써야 하는 경우가 있습니다.
물론 변수에 평범하게 VIEWDATA를 넣는 방법도 가능합니다.
Controller
ViewData["intTest"] = 10;
ViewData["strTest"] = "Test";
Razor View(Script)
var test = @ViewData["intData"];
var test = "@ViewData["strData"]";
위와같이 하면 화면 랜더링 후에 이와같이 적용됩니다.

하지만 이렇게 쓰면 하나 문제가 발생 할 수 있는데
한글을 입력하면 문자가 인코딩 된 문자열로 출력 되어 버립니다.
데이터에 한글이 포함되었을 경우
Controller
ViewData["strData2"] = "테스트";
Razor View(Script)
var strData2 = "@ViewData["strData2"]";
결과
한글이 제대로 출력되지 않은 것을 확인 할 수 있습니다.

해결방법
이럴때는 Razor페이지에 아래와 같이 정의 해 주면 한글이 깨지지 않고 출력되게 됩니다.
Razor View(Script)
var strData2 = "@Html.Raw(ViewData["strData2"])";
결과
글자가 깨지지 않고 변수에 들어가 있는 것을 확인 할 수 있습니다.

JSON으로 반환한 데이터를 Javascript의 Object형식으로 변환하는 방법
이번에는 컨트롤러에서 JSON으로 반환한 VIEWDATA를 Javascript의 Object변수로 바인딩 시키는 방법에 대해서 알아봅시다.
InputData
<form id="test" action="/Home/Privacy">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control" name="name" id="username" placeholder="User Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" class="form-control" name="age" id="age" placeholder="Age">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Controller
public IActionResult Privacy(UserInfo user)
{
ViewData["user"] = Json(user);
return View();
}
Razor View(Script)
// Json으로 받은 값을 JavascriptObject로 변환
var obj = @Html.Raw(Json.Serialize(@ViewData["user"]));
var user = obj.value;
// Object로 변환한 데이터를 화면에 출력
$(document).ready(function() {
$("#name").text(user["name"]);
$("#age").text(user["age"]);
});
결과
JSON형식으로 받은 VIEWDATA를 Javascript변수에 담아서 Object타입으로 사용 하고 있습니다.
입력화면

출력화면

디버깅화면
오브젝트로 변환한 데이터의 value에 json타입으로 변환시킨 데이터가 들어있는 것을 확인 할 수 있습니다.

설명이 많이 미숙한점이 있지만 샘플 프로젝트 같이 첨부합니다.
혹시라도 질문사항이 있으면 댓글로 남겨주세요
'ASP.NET&C# > ASP.NET MVC' 카테고리의 다른 글
[ASP.NET/MVC CORE] #15 세션으로 로그인 페이지를 구현 (0) | 2021.12.26 |
---|---|
[ASP.NET/MVC CORE] #14 MIME 맵핑하기 (0) | 2021.12.21 |
[ASP.NET CORE/MVC] #12 AJAX로 JSON데이터를 컨트롤러로 전송하기 (0) | 2021.12.18 |
[ASP.NET CORE/MVC ] #11 VIEW파일 분할해서 보여주기(Partial) (0) | 2021.12.15 |
[ASP.NET CORE/MVC] #10 파일 업로드 기능 구현 (1) | 2021.12.15 |