요즈음 웹 개발에서 가장 중요한 부분을 차지하는 부분은 Ajax일 것입니다. 이로 인해 더 적은 양의 데이터를 보내고 , 화면의 깜박임 없이 사용자의 요청을 처리하는 것은 고급 웹 솔루션의 경우에는 거의 필수적인 기능으로 자리 잡아 가게 되었습니다. 이런 Ajax의 가장 중요한 요소는 비동기로 원하는 데이터를 전송하는것인데 , 이를 위한 규격중에 가장 가벼운 JSON(JavaScript Object Notation)을 많이 선호하게 되었습니다. 이번장에서는 이러한 JSON 을 MVC에서 사용하는 방법에 대해 살펴보도록 하겠습니다.

먼저 아래의 컨트롤러 액션을 살펴보도록 하겠습니다.

 

public ActionResult IndexAjax()

{

    return Json("test" , JsonRequestBehavior.AllowGet);           

}

 [코드 : JSon 데이터 전달]

 

너무 간단한 코드인가요? 단지 하나의 메서드로 , MVC는 간편하게 Json 데이터를 전송할수 있습니다.

 

14_1.png
[그림 JSon 데이터 전송]

 

Json Serialization

때로는 동적으로 게시판등에서 바인딩을 위해 MVC에서 사용하는 데이터를 JSON 형식으로 전송해야 하는 경우도 있습니다. 이런 경우에 MVC는 간단하게 MVC 객체를 Serialize 해줍니다.

이전 7장에서 사용되었던 EF 코드를 JSON 으로 노출시키고 , 바인딩을 해보도록 하겠습니다.

 

먼저 두개의 ActionResult를 작성합니다.

 

public ActionResult TestView()

{

     return View();

}

 

//Json 을 호출하기 위한 뷰

public ActionResult IndexAjax()

{           

    return Json(db.TestTable.ToList() ,JsonRequestBehavior.AllowGet);

}

 

 

이제 실제 TestView 페이지를 작성해보도록 하겠습니다.

 

<div id="container"></div>

<script type="text/javascript">

    $.ajax({

        url: '/Test/IndexAjax',

        type: 'POST',

        dataType: 'json',

        contentType: "application/json; charset=utf-8",       

        success: function (result) {

            if (result != null) {

                var divHtml = "";

                for(var i = 0 ; i < result.length ; i++)

                {

                    divHtml+= result[i].SomeData + "<br />";

                }

                $("#container").html(divHtml);

            }

        }

    });

</script>

[코드 : TestView 에서 작성된 Ajax로 리스트를 호출하는 코드]

 

 

14_2.png
[그림 : 뷰에서 List 형태로 호출된 Json 뷰]

 

Summary

JSon을 이용해서 DB의 내용을 웹페이지와 통신하는 것은 이제 웹 개발에 있어서 기본적인 스팩중에 하나로 인식이 되고 있습니다. MVC에서는 이러한 JSON 통신에 대한 지원을 폭넓게 함으로써 개발에 대한 선택의 폭을 더 넓혀주고 있습니다. 다음장에서는 이제 이러한 JSon이 어떻게 MVC의 고급 기능과 통합할수 있는지 알아보도록 하겠습니다.



ASP.NET MVC3 시리즈 강좌 리스트
[ASP.NET MVC3강좌] 1. MVC(Model- View – Controller) 란 무엇인가.
[ASP.NET MVC3강좌] 2. MVC 환경 세팅
[ASP.NET MVC3강좌] 3. HelloWorld MVC
[ASP.NET MVC3강좌] 4. Layout , Partial Page
[ASP.NET MVC3강좌] 5. Model 을 View에서 표현하기
[ASP.NET MVC3강좌] 6. MVC의 매력적인 기능 스캐폴딩!(With EF)
[ASP.NET MVC3강좌] 7. 유효성 검사
[ASP.NET MVC3강좌] 8. ModelBinder
[ASP.NET MVC3강좌] 9. MVC ActionResult 종류 살펴보기
[ASP.NET MVC3강좌] 10. MVC 처리 프로세스 & ActionFilter
[ASP.NET MVC3강좌] 11. Global.asax
[ASP.NET MVC3강좌] 12. (번외편) Repository Pattern
[ASP.NET MVC3강좌] 13. MEF(Managed Extensibility Framework) in MVC
[ASP.NET MVC3강좌] 14. Javascript in MVC
[ASP.NET MVC3강좌] 15. Javascript Intellicense in Visual Studio
[ASP.NET MVC3강좌] 16. JSON in MVC - 1
[ASP.NET MVC3강좌] 17. JSON in MVC - 2
[ASP.NET MVC3강좌] 18. HTML5 in MVC
[ASP.NET MVC3강좌] 19. MVC Tips 1 - HandleUnknownAction
[ASP.NET MVC3강좌] 20. MVC Tips 2 - Cache ActionFilter





profile

ASP.NET MVP 2009~2011