[ASP.NET CORE/MVC] #12 AJAX로 JSON데이터를 컨트롤러로 전송하기

[ASP.NET CORE/MVC] #12 AJAX로 JSON데이터를 컨트롤러로 전송하기

안녕하세요 미나라이입니다.

 

이번에는 ASP.NET CORE MVC Web에서 JSON형식의 데이터를 컨트롤러 모델에 바인딩 하는 방법에 대해서 포스팅 해 보려고 합니다.

프로젝트 환경

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

테스트 공통 모듈

HTML

<script src="~/lib/jquery/dist/jquery.min.js"></script>

<form>
    <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=button id="btn1" class="btn btn-primary">Ajax1</button>
    <button type=button id="btn2" class="btn btn-primary">Ajax2</button>
    <button type=button id="btn3" class="btn btn-primary">Ajax3</button>
    <button type=button id="btn4" class="btn btn-primary">Ajax4</button>
    <button type=button id="btn5" class="btn btn-primary">Ajax5</button>
    <button type=button id="btn6" class="btn btn-primary">Ajax6</button>
</form>

모델

public class UserInfo
{
    public string name  {get; set;}	

    public int age {get; set;}
    
}

JSON데이터를 컨트롤러에서 모델로 바인딩

클라이언트(Javascript)

입력값을 Object형식으로 넣고 JSON형식으로 직렬화 합니다.

여기서 중요한게contentType을application/json로 지정 해야 합니다.

$("#btn1").click(function() {
    // 입력 값 취득 후 Object에 추가
    var obj = {
        name : $("input[name='name']").val(),
        age : $("input[name='age']").val()
    };

    // 데이터를 Object형식에서 Json형식으로 직렬화
    var json = JSON.stringify(obj);

    // 서버와 비동기 통신
    $.ajax({
        url: "/Home/AjaxTest",
        contentType: "application/json",
        dataType: "json",
        type: "post", 
        data: json, 
        success: function (data) {
            if(data == "OK") {
                alert("OK");
            }else {
                alert("NG");
            }
        },
        error: function (data) {
            alert("Error");
        }
    });
});

서버(Controller)

파라메터에 모델을 받고 [FromBody]를 달아주어야 모델로 바인딩이 됩니다.

public JsonResult AjaxTest([FromBody]UserInfo user)
{
    string result = null;
    if(user != null)
    {
        result = "OK";
    }
    return Json(result);
}

디버깅

데이터 입력

스크립트 데이터 확인

json변수에 직렬화된 데이터가 들어있다.

서버에 전송 후 컨트롤러 확인

user모델에 입력한 데이터가 바인딩 된 것을 확인 할 수 있다.

JSON데이터를 컨트롤러에서 문자열로 받고 Deserialize하기

이번에는 직렬화된 JSON데이터를 직접 받아서 컨트롤러에서 Deserialize해서 사용 해 보겠습니다.

클라이언트(Javascript)

직렬화 한 데이터를 Object형식의 Value로 넣습니다.

이번에는 JSON형식을 바인딩 하지 않기 때문에 contentType을application/x-www-form-urlencoded로 합니다.

$("#btn4").click(function() {
    // 입력 값 취득 후 Object에 추가
    var obj = {
        name : $("input[name='name']").val(),
        age : $("input[name='age']").val()
    };
    
    var sendData = {param : JSON.stringify(obj)};

    // 서버와 비동기 통신
    $.ajax({
        url: "/Home/AjaxTest4",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        type: "post", 
        data: sendData, 
        success: function (data) {
            if(data == "OK") {
                alert("OK");
            }else {
                alert("NG");
            }
        },
        error: function (data) {
            alert("Error");
        }
    });
});

서버(Controller)

파라미터에 변수명에 object의 key값을 지정 해 줍니다.

그리고 데이터를 Key,Value형식의 컬렉션인 Dictionary를 이용해서 풀어줍니다.

object형식에서 int타입으로 형변환 할 때 String타입으로 1차적으로 변환 해 주고 int타입으로 바꿔야 합니다.

(다이렉트로 형변환 하면 에러가 발생합니다.)

public JsonResult AjaxTest4(string param)
{
    string result = null;
    if(param != null)
    {
        // JSON데이터를 Key,Value형식으로 풀어줍니다.
        Dictionary<string, object> user = JsonSerializer.Deserialize<Dictionary<string, object>>(param);
        // 각각의 데이터 형식으로 형변환 해 줍니다.
        string name = user["name"].ToString();
        int age = Convert.ToInt32(user["age"].ToString());
        result = "OK";
    }
    return Json(result);
}

디버깅

데이터 입력

스크립트 데이터 확인

입력한 데이터를 확인 해 봅시다.

서버에 전송 후 컨트롤러 확인

직렬화된 상태로 컨트롤러로 데이터가 들어 온 것을 확인 할 수 있습니다.

이상으로 JSON데이터를 컨트롤러에 전달하는 두가지 방법에 대해서 알아보았는데요

 

Object형식으로 변환하는 방법은 저번 포스팅을 참고 해 주세요.

[ASP.NET/MVC] #7 컨트롤러로 데이터 보내고 받기

 

[ASP.NET/MVC] #8 AJAX를 이용해서 컨트롤러로 데이터 주고 받기

그리고 샘플 소스에 Object형식의 전송 방법도 같이 첨부 했습니다.

TestProject_Json.zip

1.21MB

이상으로 간단하게 컨트롤러로 JSON데이터 보내는 방법들에 대해서 알아보았습니다.