이제 실제 Model View 로 표현해보도록 하겠다. Model Controller 를 통해서 가공되고 최종적으로 형성된 Model View 를 통해서 보여지게 되는데 , 여기서 Controller Model View로 보내는 방법은 2가지가 존재한다. 두가지 방법은 다음과 같다.

ViewBag 객체를 이용

StrongView 를 이용.

개발자는 두가지 방법을 전부 이용하여 데이터를 보내는 방법을 익혀야 한다. 각각의 방법은 서로간의 장 단점을 가지고 있으며 , 이를 적절히 이용해야 더 유연하게 MVC를 이용할수 있을것이다.

두가지 방법의 장 단점은 다음과 같다.

Untitled.png



그러면 모델을 View로 보내는 두가지 방법을 전부 살펴보도록 하겠다. 일단 먼저 전송할 Model 을 작성한다.


1.     Models 폴더에 ClassLibrary 파일을 하나 만들고 이름을 HelloModel로 작성한다

2.     아래와 같은 프로퍼티를 생성한다

namespace HelloworldApp3.Models

{

    public class HelloModel

    {

        public String TodayDate { get; set; }

        public String HelloMsg { get; set; }

    }

}


 

이제 해당 모델을 ViewBag StrongView를 이용해서 연결해 보도록 하자.



1. ViewBag


ViewBag 의 가장 큰 특징은 간편하게 데이터를 넘겨줄수 있다는것이다. 또한 ViewBag MasterPage PartialPage 에서 공유할수 있다는 장점도 있다. 그런 반면 스캐폴딩 같은 코드 자동완성을 사용하지 못하는 것은 큰 취약점으로 나타낼수 있다.

그러면 이제 ViewBag 을 이용해서 Model View 로 연결해 보도록 하겠다.

1.     먼저 HomeController Index Action을 다음과 같이 수정한다.

        public ActionResult Index()

        {

            ViewBag.CurrentModel = new HelloworldApp3.Models.HelloModel {

                   TodayDate = DateTime.Now.ToString(),

                   HelloMsg = "안녕하세요? ViewBag 통한 Model 전송입니다."

 

            };

            return View();

        }


 

2.     Index.cshtml은 다음과 같이 수정된다. 인텔리센스가 지원되지 않으므로 , 철자에 유의 하도록 하자. 해당 코드는 ViewBag.CurrentModel 모델이 있다고 가정한 후 , 그곳에 해당 Model을 정의해서 작성한것이다. 이는 컴파일 타임에 오류를 검출하는 대신 런타임시에 타입을 검사해서 유연하게 컴파일링이 되도록 한다 (이는 반대로 런타임시까지 오류를 검출하기 힘들다는 문제점을 낳기도 한다.)


@{

    Layout = "~/Views/Shared/_LayoutMaster.cshtml";

    ViewBag.Title = "Index";

   

}

<h2>@ViewBag.CurrentModel.HelloMsg</h2>

@ViewBag.CurrentModel.TodayDate

 


3.     실행결과를 확인한다.

5_1.png

[그림 : 실행화면]


위와 같이 적용이 된 것을 볼수 있을것이다. 위의 페이지 결과와 같이 ViewBag.CurrentModel View 페이지에 정상적으로 데이터를 넘겼으며 , 그 결과가 잘 출력되고 있다. 이제 다음으로 StrongView 에 대해 살펴보도록 하자.



2. StrongView


강력한 뷰는 가공된 Model 을 뷰에 바로 투영시키기 위해 고안되었다. 단순히 View 를 이용해서 Model 에 바인딩하는 것은 ViewBag 과 큰차이가 없어 보인다. StrongView 의 가장 큰 장점은 컴파일시에 타입을 체크할수 있다는것과 , 온전한 범위의 스캐폴딩을 지원한다는것이다. 또한 구현방식 또한 실제 View Data를 주입시킨다는 느낌으로 구현함으로써 ASP.NET 의 가장 큰 장점이었던 웹페이지를 클라이언트 처럼 개발한다라는 철학에 의거한다고 할수있다.

1.     먼저 StrongView 를 구현하기 위해 StrongIndex 라는 Action 을 만든다. 그후 아래와 같이 구현한다.

        public ActionResult StrongIndex()

        {           

            return View(

                new HelloworldApp3.Models.HelloModel {

                   TodayDate = DateTime.Now.ToString(),

                   HelloMsg = "안녕하세요? StrongView 통한 Model 전송입니다."

 

            });

        }


해당 코드는 뷰에 완성된 Model을 넘겨주는것으로 코드를 마무리 하고 있다. 정말 이 작업이 끝이다.


2.     이제 3장에서 했던것처럼 AddView 를 이용해서 새로운 뷰를 추가한다. 이번에는 StrongView 를 작성할것이기 때문에 , 아래의 그림과 같이 View에서 사용할 모델을 지정한다.

 5_2.png

[그림 : Model 연결]


3.     이제 StrongIndex 뷰를 작성해보자. View() 에 들어간 값은 Model 객체에 있으며 , 이를 이용해서 전송된 Model 에 편리하게 접근할수 있다.

    @model HelloworldApp3.Models.HelloModel

 

    @{

        ViewBag.Title = "StrongIndex";

        Layout = "~/Views/Shared/_LayoutMaster.cshtml";

    }

    <h2>@Model.HelloMsg</h2>

    @Model.TodayDate


 

4. 이제 실행 결과를 확인해보자.

결과값은 단순하지만 , 훨씬 간단하게 코딩할수 있다.

 

3. Bonus! StrongPartial

클래식 ASP.NET을 어느정도 다룰수 있는 개발자의 경우는 WebUserControl 을 핸들링하기 위해 다양한 변수를 삽입하거나 , WebUserControl behind 코드에 데이터 연결을 위한 코드를 작성하곤 했다.  MVC에서는 이것이 불가능하지만 , 그대신 View가 받은 데이터를 Partial 로 보내는것은 가능하다. 이제 Strong Partial Page를 작성해보도록 하겠다.


1.     먼저 Footer페이지를 아래와 같이 수정한다.

@model HelloworldApp3.Models.HelloModel

<div>Footer - 파샬페이지 테스트</div>

@Model.TodayDate


 

 해당 코드에서는 첫줄에 사용할 model 을 정의하였다. 한번에 여러 개의 model 을 정의할수 없는 부분이 약간 아쉬운 부분이다. 세번째 줄에서는 첫페이지에서 정의한 모델을 가져와서 사용하는 모습을 보여준다. 이는 View페이지에서 사용했던 코딩과 완전히 동일한 방식이다.


2.     StrongIndex Partial 을 호출하는 코드를 삽입하고 두번째 인자로 Model을 넘겨준다.

전체 코드는 다음과 같다

@model HelloworldApp3.Models.HelloModel

 

@{

    ViewBag.Title = "StrongIndex";

    Layout = "~/Views/Shared/_LayoutMaster.cshtml";

}

<h2>@Model.HelloMsg</h2>

@Model.TodayDate

@Html.Partial("Footer",Model)


 

@Html.Partial() 두가지 인자를 받도록 오버로딩 되어 있는데 첫번째인자는 사용할 partialpage 페이지 이름, 두번째 인자는 넘겨 받을 Model이다. 이러한 방식으로 PartialPage 모델을 전송할수 있다.


5_3.png

      [그림 : 파샬 페이지에 데이터를 정상적으로 전달한 모습]



Summary

ViewBag 을 이용한 방법과 StrongView 모두 MVC에서 데이터를 View로 전송하는 가장 간단하면서도 중요한 방법이다. 다음 장에서는 데이터베이스 연결과 함께 스캐폴딩에 대해서 알아보도록 하겠다.




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