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

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

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

 

이번에는 ASP.NET CORE MVC Web의 컨트롤러 활용 방법 중에 AJAX를 이용한 비동기 데이터 처리 방법에 대해서 포스팅 하려고 합니다.

 

프로젝트 환경

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

 

AJAX 및 비동기 처리에 대해서 무엇인지와 왜 하는건지에 대해서 설명하면 너무 길어지니까

간단하게 정리하면

 

화면 전환 없이 데이터를 주고받기 위해서 하는 처리라고 생각하면 됩니다.회원가입을 하다가 아이디 중복체크라든지 필요한 경우가 있습니다.

이 경우 아이디 중복 확인을 위해 서버와 통신을 해야하는데 동기식 통신을 하면 화면이 전환이 되어서 기껏 입력 해놓은 데이터가 다 날아가 버립니다.

물론 데이터를 보존해놓고 다시 뿌려주는 방식으로 가능은 하겠지만 매우 번거로운 방법입니다.

그래서 입력 한 값이 날아가지 않은 상태로 결과를 호출 받을 수 있는 AJAX를 사용합니다.

 

Ajax의 개념과 예제가 자세하게 나와있는 블로그를 링크 합니다.

JavaScript, jQuery, 그리고 Ajax

 

간단하게 서버와 통신하는 예제를 지금부터 구현 해 보겠습니다.

 

Index.cshtml

화면

폼 데이터

이번 예제는 Jquery의 Ajax를 사용하기 때문에 라이브러리를 별도로 링크 해 주었습니다.

ASP.NET CORE MVC의 해당 버전의 프로젝트를 생성하면 Jquery 3.5버전의 라이브러리가 기본 제공되어지고 있습니다.

<!-- 제이쿼리 Ajax를 사용하기 위해서는 라이브러리를 호출 해 주어야 합니다. -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>

<form id="userForm">
    Name : <input type=text name=name /><br />
    Age : <input type=text name=age /><br />
    <input type=button id="btn" value="AJAX" />
</form>

스크립트

$('#btn').click(function() {
    $.ajax({
        url: "/Home/AjaxTest", // 컨트롤러에 보낼 URL을 적습니다.
        contentType: "application/x-www-form-urlencoded", // 보내는 데이터의 인코딩 타입을 적습니다.
        dataType: "json", // 반환 될 데이터의 타입을 적습니다.
        type: "post", // 보내는 방식을 적습니다. get or post
        data: $("#userForm").serialize(), // 컨트롤러로 보낼 데이터를 넣습니다.
        success: function (data) { // 통신 결과가 성공일 경우(data)에 반환 될 타입의 데이터가 들어옵니다.
            if(data == "OK") {
                alert("OK");
            }else {
                alert("NG");
            }
        },
        error: function (data) { // 통신 결과가 실패 할 경우
            alert("Error");
        }
    });
});

 

폼 데이터를 간단하게 전달하는 방법중에는 serialize함수를 이용하는 방법이 있습니다.

해당 함수를 쓰면 form안에 있는 모든 input데이터의 name과 value를 취득해서 파라미터 형식으로 만들어 줍니다.

아래와 같은 형식으로 작성 해 줍니다.

 

이제 컨트롤러로 통신을 해 봅시다.

 

HomeController.cs

반환 타입은 JsonResult로 지정해야하고

반환 데이터는 무슨 타입이든지 Json으로 변환을 해 주어야 합니다.

public JsonResult AjaxTest(string name, int age)
{
    string result = "OK";
    return Json(result);
}

데이터가 정상적으로 들어 온 것을 확인 해 봅시다.

통신 결과를 반환하고 결과를 확인 합니다.

OK가 정상적으로 들어 온 것을 확인 합니다.

 

샘플 프로젝트 파일을 같이 첨부 합니다.

TestProject_AjaxController.zip

1.20MB