오랜만에 글을 쓰네요^^; 오늘일을 내일로 미루고미루다보니 ㅎㅎ 이렇게 되었네요;; 깊이깊이 반성하고 있습니다. 제 블로그 명이 What Is The Fun? 이었는데요 이제 개인적으로 재미도 찾았고 해서 블로그 명도 바꾸고(성공으로 가는 발자취) 디자인도 변경했습니다^^ 새로운 맘가짐으로 다시 시작해보려고요. 자~ 시작해볼까요?
뷰 알기
우리는 애플리케이션은 표현로직과 업무로직을 분리하는 것이 좋다는 것을 알고 있습니다. 이렇게 하지 않으면 이 두 로직이 이리저리 꼬이게되고(움찔--;) 약간의 수정조차 힘들게되는 유지보수의 어려움이 초래되죠. ASP.NET MVC 에서는 이를 강제적으로 분리합니다. 뷰는 단지 컨트롤러의 출력만 담당하게 됩니다. 최종적으로 브라우저의 보여줄 HTML 만 렌더하는 작업만 갖게되죠.
ASP.NET MVC 애플리케이션에서는 주소창에서 입력된 URL은 해당서버의 디스크에 있는 페이지(파일)을 찾는것이 아닌 컨트롤러를 통한 뷰를 호출하게 됩니다. URL은 컨트롤러와 매핑이 되고 컨트롤러는 뷰를 리턴해주는 식이죠. 컨트롤러는 뷰를 리턴할수 있고 다른 액션을 호출할 수 있습니다.
다음의 HomeController는 Index(), Datail() 라는 두 액션을 노출합니다.
Index() 액션을 호출하려면 브라우저에 다음과 같이 입력하면되죠.
/Home/Index
또 Detail() 액션을 호출하려면
/Home/Detail
라고 입력합니다.
Index() 액션은 뷰를 리턴합니다. 대부분의 액션은 뷰를 리턴하게 됩니다. 그러나 뷰 리턴만이 아닌 다른 타입을 리턴할 수도 있습니다. 위 예제처럼 Datail() 액션은 들어온 요청을 다른 액션(Index)로 리다이렉트합니다(RedirectToActionResult).
Index() 액션에는 View() 라는 한줄의 코드만 있습니다. 이 코드는 웹서버의 \View\Home\Index.aspx에 위치하고 있는 뷰를 리턴합니다.
뷰의 패스(path)는 컨트롤러의 이름과 액션의 이름을 통해 유추해낼수 있습니다.
뷰이름을 명확하게 해서 리턴하도록 하려면 다음처럼 string으로 이름을 줄 수 있습니다.
View("Sses");
이 코드는 \View\Home\Sses.aspx를 리턴합니다. 이렇게 매치매치가 되니 참 쉽죠잉~
뷰에 컨텐트를 추가하자
일단 간단하게 현재시간을 출력해볼까요?
뷰페이지에 컨텐트를 추가하는 한 방법으로 인라인 코드를 들 수 있습니다. 인라인 코드는 <%와 %>를 사용하여 코드를 생성하고, HTML에 삽입하여 결과를 도출해내기 위한 구문입니다.
바디 안쪽을 보시면 <% Response.Write(DateTime.Now); %>를 보실 수 있습니다. 이는
Response.Write() 메쏘드를 호출하여 현재시간을 브라우저에 출력하게 됩니다. Response.Write()는 너무 빈번히 사용되기 때문에 이를 줄여서 사용할수가 있는데요,
<% Response.Write(DateTime.Now); %> ==> <%=DateTime.Now %>
변경해도 같은 결과를 얻을 수 있습니다.
Response.Write를 <%=과 %>로 대신해서 호출하는거죠^^
HTML 도우미를 이용해 컨텐트를 추가하자
뷰페이지에 컨텐트를 추가하는 또 하나의 방법은 HTML 도우미를 이용하는 것입니다. 일반적으로 HTML 도우미는 텍스트박스, 체크박스, 셀렉트 박스 등의 HTML 태그를 스트링으로 생성해줍니다.
다음은 HTML 도우미중 Html.BeginForm(), Html.TextBox(), Html.Password()를 사용하여 로그인 폼을 작성해 보겠습니다.
모든 HTML 도우미는 뷰의 HTML 속성을 호출하게 됩니다. 위처럼 HTML 도우미인 Html.TextBox()를 호출하여 TextBox를 렌더하게 됩니다.
<% using (Html.BeginForm()) { %> ~ <% } %> 도우미 구문은 처음 using 절에서는 <form> 태그를 렌더하고 구문이 끝나는 부분에서는 닫는 </form> 태그를 렌더합니다. 결과적으로 다음과 같은 HTML을 렌더합니다.
<form method="post" action="/Home/Login"> ~ </form>
ViewData로 뷰에 전달하기
컨트롤러와 뷰는 완전히 독립적입니다. 기존 ASP.NET 웹폼처럼 코드비하인드 로직이 ASPX 페이지와 떼려야 뗄 수 없는 사이였던 것과는 달리 ASP.NET MVC는 이 로직을 분리해놓았죠.
컨트롤러에서 뷰로의 데이터 전달 수단은 ViewData입니다. 컨트롤러는 ViewDataDictionary 속성의 ViewData를 가지고 있습니다. 사용법은 간단합니다. 키/값의 쌍을 사용하는거죠.
위의 message라는 키와 "Hello! ASP.NET MVC!!!"의 값을 갖는 ViewData는 뷰가 렌더될때 같이 전달됩니다. 뷰에서는 다음과 같이 ViewData에 접근할 수 있습니다.
<%= Html.Encode(ViewData["message"]) %>
Html.Encode() 도우미는 <, > 등과 같은 특별한 캐릭터를 인코딩합니다. 사용자가 웹사이트로 보내는 자바스크립트 공격과 같은 것을 막기위해서도 뷰에서 보여지는 데이터들은 인코딩해야합니다. 예제에서는 컨트롤러에서 message를 생성했기 때문에 인코딩을 할 필요는 없지만 뷰에서 ViewData를 가져와서 화면에 출력될때는 Html.Encode()를 호출하는것이 좋은 코딩습관입니다.
휴~ 뷰에 대해서 조금 알아봤는데요. 다음은 HTML 도우미에 대해서 좀더 알아보겠습니다.
다음글은 또 언제쓰게 될까요? ㅎㅎ 기다려지십니까? -_-;;
다음 포스팅에서 뵙겠습니다.^^
ASP.NET MVC - View(1)
오랜만에 글을 쓰네요^^; 오늘일을 내일로 미루고미루다보니 ㅎㅎ 이렇게 되었네요;; 깊이깊이 반성하고 있습니다. 제 블로그 명이 What Is The Fun? 이었는데요 이제 개인적으로 재미도 찾았고 해서 블로그 명도 바꾸고(성공으로 가는 발자취) 디자인도 변경했습니다^^ 새로운 맘가짐으로 다시 시작해보려고요. 자~ 시작해볼까요?
뷰 알기
우리는 애플리케이션은 표현로직과 업무로직을 분리하는 것이 좋다는 것을 알고 있습니다. 이렇게 하지 않으면 이 두 로직이 이리저리 꼬이게되고(움찔--;) 약간의 수정조차 힘들게되는 유지보수의 어려움이 초래되죠. ASP.NET MVC 에서는 이를 강제적으로 분리합니다. 뷰는 단지 컨트롤러의 출력만 담당하게 됩니다. 최종적으로 브라우저의 보여줄 HTML 만 렌더하는 작업만 갖게되죠.
ASP.NET MVC 애플리케이션에서는 주소창에서 입력된 URL은 해당서버의 디스크에 있는 페이지(파일)을 찾는것이 아닌 컨트롤러를 통한 뷰를 호출하게 됩니다. URL은 컨트롤러와 매핑이 되고 컨트롤러는 뷰를 리턴해주는 식이죠. 컨트롤러는 뷰를 리턴할수 있고 다른 액션을 호출할 수 있습니다.
다음의 HomeController는 Index(), Datail() 라는 두 액션을 노출합니다.
Index() 액션을 호출하려면 브라우저에 다음과 같이 입력하면되죠.
/Home/Index
또 Detail() 액션을 호출하려면
/Home/Detail
라고 입력합니다.
Index() 액션은 뷰를 리턴합니다. 대부분의 액션은 뷰를 리턴하게 됩니다. 그러나 뷰 리턴만이 아닌 다른 타입을 리턴할 수도 있습니다. 위 예제처럼 Datail() 액션은 들어온 요청을 다른 액션(Index)로 리다이렉트합니다(RedirectToActionResult).
Index() 액션에는 View() 라는 한줄의 코드만 있습니다. 이 코드는 웹서버의 \View\Home\Index.aspx에 위치하고 있는 뷰를 리턴합니다.
뷰의 패스(path)는 컨트롤러의 이름과 액션의 이름을 통해 유추해낼수 있습니다.
뷰이름을 명확하게 해서 리턴하도록 하려면 다음처럼 string으로 이름을 줄 수 있습니다.
View("Sses");
이 코드는 \View\Home\Sses.aspx를 리턴합니다. 이렇게 매치매치가 되니 참 쉽죠잉~
뷰에 컨텐트를 추가하자
일단 간단하게 현재시간을 출력해볼까요?
뷰페이지에 컨텐트를 추가하는 한 방법으로 인라인 코드를 들 수 있습니다. 인라인 코드는 <%와 %>를 사용하여 코드를 생성하고, HTML에 삽입하여 결과를 도출해내기 위한 구문입니다.
바디 안쪽을 보시면 <% Response.Write(DateTime.Now); %>를 보실 수 있습니다. 이는
Response.Write() 메쏘드를 호출하여 현재시간을 브라우저에 출력하게 됩니다. Response.Write()는 너무 빈번히 사용되기 때문에 이를 줄여서 사용할수가 있는데요,
<% Response.Write(DateTime.Now); %> ==> <%=DateTime.Now %>
변경해도 같은 결과를 얻을 수 있습니다.
Response.Write를 <%=과 %>로 대신해서 호출하는거죠^^
HTML 도우미를 이용해 컨텐트를 추가하자
뷰페이지에 컨텐트를 추가하는 또 하나의 방법은 HTML 도우미를 이용하는 것입니다. 일반적으로 HTML 도우미는 텍스트박스, 체크박스, 셀렉트 박스 등의 HTML 태그를 스트링으로 생성해줍니다.
다음은 HTML 도우미중 Html.BeginForm(), Html.TextBox(), Html.Password()를 사용하여 로그인 폼을 작성해 보겠습니다.
모든 HTML 도우미는 뷰의 HTML 속성을 호출하게 됩니다. 위처럼 HTML 도우미인 Html.TextBox()를 호출하여 TextBox를 렌더하게 됩니다.
<% using (Html.BeginForm()) { %> ~ <% } %> 도우미 구문은 처음 using 절에서는 <form> 태그를 렌더하고 구문이 끝나는 부분에서는 닫는 </form> 태그를 렌더합니다. 결과적으로 다음과 같은 HTML을 렌더합니다.
<form method="post" action="/Home/Login"> ~ </form>
ViewData로 뷰에 전달하기
컨트롤러와 뷰는 완전히 독립적입니다. 기존 ASP.NET 웹폼처럼 코드비하인드 로직이 ASPX 페이지와 떼려야 뗄 수 없는 사이였던 것과는 달리 ASP.NET MVC는 이 로직을 분리해놓았죠.
컨트롤러에서 뷰로의 데이터 전달 수단은 ViewData입니다. 컨트롤러는 ViewDataDictionary 속성의 ViewData를 가지고 있습니다. 사용법은 간단합니다. 키/값의 쌍을 사용하는거죠.
위의 message라는 키와 "Hello! ASP.NET MVC!!!"의 값을 갖는 ViewData는 뷰가 렌더될때 같이 전달됩니다. 뷰에서는 다음과 같이 ViewData에 접근할 수 있습니다.
<%= Html.Encode(ViewData["message"]) %>
Html.Encode() 도우미는 <, > 등과 같은 특별한 캐릭터를 인코딩합니다. 사용자가 웹사이트로 보내는 자바스크립트 공격과 같은 것을 막기위해서도 뷰에서 보여지는 데이터들은 인코딩해야합니다. 예제에서는 컨트롤러에서 message를 생성했기 때문에 인코딩을 할 필요는 없지만 뷰에서 ViewData를 가져와서 화면에 출력될때는 Html.Encode()를 호출하는것이 좋은 코딩습관입니다.
휴~ 뷰에 대해서 조금 알아봤는데요. 다음은 HTML 도우미에 대해서 좀더 알아보겠습니다.
다음글은 또 언제쓰게 될까요? ㅎㅎ 기다려지십니까? -_-;;
다음 포스팅에서 뵙겠습니다.^^
참고자료
http://www.asp.net/learn/mvc/tutorial-04-cs.aspx
'.NET > MVC Basic' 카테고리의 다른 글