ASP.NET MVC - 비동기로 호출하여 JSON 객체를 받기

시나리오 : form 페이지에서 submit될 때 비동기로 액션을 호출한다. 이때 사용자로부터 입력을 못받게 회색 레이어로 덮어준다. 액션에서는 json 객체를 반환한다.

 

1. 액션에서 익명객체 생성하여 Json으로 반환

public class AjaxTextController : Controller {
	...
    [HttpPost]
    public ActionResult SubmitForm(FormCollection fc)
    {
    	string p1 = fc["p1"] == null ? "" : fc["p1"].ToString();
        string p2 = fc["p2"] == null ? "" : fc["p2"].ToString();
        
        for (int i = 0; i < 10; i++)
        {
        	Thread.Sleep(1000); // Loading창이 표시되는것을 눈으로 보기 위해 10초 정도 대기시간을 준다.
        }

		// 익명객체를 생성하여 단순히 전달받은 파라미터를 넣어준다.
        var obj = new
        {
        	p1 = p1,
            p2 = p2
        }
        
        return Json(obj); // 익명객체를 Json으로 반환해준다.
    }
}

 

2. 뷰페이지에서 아래와 같이 처리

<!-- jQuery 라이브러리 포함 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

...

<!-- 폼 -->
<form id="myForm">
    <input type="text" name="p1" placeholder="p1">
    <input type="text" name="p2" placeholder="p2">
    <input type="submit" value="Submit">
</form>

...

<!-- 로딩창 -->
<div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:200px; height:100px; background:white; border-radius:10px; display:flex; align-items:center; justify-content:center;">
        <span>Loading...</span>
    </div>
</div>


<!-- 비동기호출부분 처리 -->
<script>
    $(document).ready(function () {
        
        $('#myForm').submit(function (event) {
            event.preventDefault(); // 기본 submit 이벤트 방지

            // 폼 데이터를 변수에 저장
            var formData = $(this).serialize();

            // 로딩 오버레이 표시
            $('#loading-overlay').show();

            // AJAX 요청
            $.ajax({
                type: 'POST',
                url: '/AjaxTest/SubmitForm', // 서버의 폼 처리 URL
                data: formData,
                success: function (response) {
                    console.log('Response from server: ', response);

                    console.log('p1: ' + response.p1);
                    console.log('p2: ' + response.p2);
                    // 로딩 오버레이 숨기기
                    $('#loading-overlay').hide();
                },
                error: function (xhr, status, error) {
                    console.error('Error: ', error);
                    // 오류 응답 처리
                    // 로딩 오버레이 숨기기
                    $('#loading-overlay').hide();
                }
            });
        });
    });

</script>

 

3. 실행시 동작결과

폼에서 p1과 p2를 채운 후 submit버튼을 누르면 로딩창이 10초간 뜨다가 사라진다.

콘솔창에는 p1과 p2 값을 찍어준다.