지난 시간에 우리는 JSON 으로 MVC에서 어떻게 통신하는지에 대해서 간략하게 알아보았습니다. 아마 설명이 미진한 부분도 있었을거 같은데요, 이번장에서 이전장에 부족했던 부분과 함께 MVC의 Strong View와 통합되어서 사용되는 부분도 같이 설명을 드리도록 하겠습니다.

 

<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>

 

 

이전의 코드에서 단지 Ienumerable<T> 형태로 넘겨준 JSON 을 객체에 접근 하는 방법으로 사용하는 방법을 보셨을겁니다. 이것은 다차원 배열에도 적용 가능하며 , ‘.’ 을 이용해서 객체에 접근이 가능합니다. 예를 들면

 

public class Test2

{

    public String element1 { get; set; }

    public String element2 { get; set; }

    public String element3 { get; set; }

}

public class Test

{

    Test2 t = new Test2();

}

 

 

위와 같이 선언되어 있는 경우 JSON 에서 Test.t.element1 과 같은 식으로 객체에 접근이 가능합니다.

 

 

Strong View 에 값 넘기기
이제 실질적으로 Ajax를 이용해서 값을 넣어 보도록 하겠습니다. 먼저 기존의 EF코드에 Ajax용 Create 를 작성합니다.

[HttpPost]

public ActionResult CreateAjax(TestTable testtable)

{

db.TestTable.AddObject(testtable);

        db.SaveChanges();

        return Json("true", JsonRequestBehavior.DenyGet);

   

}

[코드 Ajax용 Create ActionResult]

 

 

 

이제 자바스크립트를 이용해서 TestTable 객체를 전달해 보도록 하겠습니다.

$.ajax({

        url: '/Test/CreateAjax',

        type: 'POST',

        dataType: 'json',

        data: JSON.stringify({

            SomeData: "JSONTest",

            RegDate: "2011/01/01"

        }),

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

      

    });

[코드 : 자바스크립트]
여기서 한가지 주의할 점은 JSON 형태로 객체를 전달할 때 MVC가 인식하기 위해서는 반드시 직렬화를 해야한다는 사실인데요 , 이를 지원하기 위해서 JSON.stringify 메서드를 사용해서 JSON을 직렬화 합니다.

 

 15_1.png
[그림 : 직렬화된 JSON 이 MVC로 정상적으로 넘어온 모습]

 

 

Summary
지금까지 JSON 과 자바스크립트를 이용한 MVC와의 통신방법에 대해서 짧게 알아보았습니다. 이 부분은 Javascript 와 MVC를 다른 개념으로 생각하지 않고 개념을 일원화 시킨다는 점에서 , 상당히 효율적인 개발 방법론을 제시하고 있다고 생각합니다. 다음 장에서는 MVC이 제공하는 html5 지원 기능들에 대해서 살펴보도록 하겠습니다.




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