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

[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타입으로 변환시킨 데이터가 들어있는 것을 확인 할 수 있습니다.

설명이 많이 미숙한점이 있지만 샘플 프로젝트 같이 첨부합니다.

TestProject_ViewJavascript.zip

1.21MB

혹시라도 질문사항이 있으면 댓글로 남겨주세요