ASP.NET MVC - View(3)

갑자기 생각나네요. 제 좌우명..
'일신우일신'
매일매일 새로워지고 발전된 모습으로 살아가려는 몸부림의 일환으로 맘속에 담아두고 있는 말이죠. 근데 다른쪽 마음에서는 계속 쉬라고, 편히 있으라고, 괜찮다고,,, 성공을 향해 달려야 하는 제게 앉아 있으라고, 누워 있으라고, 자라고,,, 아흐~ 이놈에게 이겨야하는데 쉽지가 않네요. 어쩌다가 한번씩 이기는 형편이죠. 머.. 지금 이렇게 컴터앞에 앉아 글을 쓰고있는건 제가 이겼다는 증거겠죠? --; 전 위너입니다. 이겼습니다. 그냥 제 자신에게 나약해지지말자라는 각오를 위한 잡소리였습니다.ㅎㅎ 
다시한번 새로운 마음으로 시작해 보도록 하죠^^

이번에는 데이터베이스의 테이블에 있는 값들을 HTML로 출력해보겠습니다. 준비되셨죠?^^

DB 데이터를 테이블에 나타내기

우선 다음의 컬럼들을 가지고 있는 전화번호 테이블을 생성해 보도록 하겠습니다.

DB, Table 생성하고 데이터를 넣어보자!

먼저, SQL Server DataBase를 생성합니다. 일반적으로 App_Data 폴더 밑에 저장되기 때문에 바로 App_Data 폴더에서 생성하도록 하겠습니다.
App_Data -> Add -> New Items을 선택하여 TestDB를 생성합니다.


생성후 서버 탐색기를 열어 테이블을 생성합니다.


4개의 컬럼(ID, NAME, TEL_NO, RGST_DT)을 생성하고 널허용 하지않도록 하겠습니다.
그리고 ID 컬럼은 시퀀스를 걸어주도록 하죠^^. ID 컬럼을 선택하고 프로퍼티 창을 보면 Identity Specification이 No로 되어있는 것을 볼 수 있습니다. 옆 화살표를 클릭하여 확장을 해보면 Id Identityf를 선택할 수 있는데요 Yes로 선택하면 자동적으로 초기값과 증가분이 세팅되는 것을 확인하실 수 있습니다.


툴 상단에 있는 깜직한 저장 버튼을 클릭하고^^

테이블 명을 TelDir로 한뒤 OK 를 클릭하시면 깔끔하게 테이블이 생성되었습니다.^^


자~ 이제는 데이터를 넣을 시간입니다. 다시 서버 탐색기를 열어서 생성된 테이블에서 Show Table Data를 선택합니다. 그러면 빈 테이블이 보일 텐데요. 맘껏 저장하세요. ID는 자동으로 증가합니다^^


저는 다음 그림처럼 넣었습니다.


그러면 디비생성과 테이블 생성, 데이터 넣기 모두가 완료되었습니다.

이제는 모델 생성 시간

이 전화번호 테이블을 나타내기 위해서는 모델 클래스를 생성해야합니다. 엔티티 프레임워크를 사용하여 클래스를 생성해보겠습니다. 다음의 단계를 밟아가며 생성해보죠^^

1. 솔루션 탐색기에 있는 모델 폴더에 아이템을 추가합니다.(Add -> New Item)
2. Data 카테고리를 선택하고 ADO.NET Entity Data Model 템플릿을 선택합니다.
3. 모델 이름을 TelDirDBModel.edmx라고 입력한후 다음버튼을 클릭합니다.


다음 버튼을 클릭하면 다음의 그림처럼 Entity Data Model 위자드가 나타납니다. 계속 단계를 밟아가죠^^



바로 전에 생성한 TesDB를 선택하고(자동으로 선택되어있죠?^^;) 보면 커넥션 스트링을 확인할수 있고, 이 스트링 값으로 Web.Config에 등록까지 할수 있습니다. 정말 놀라움을 금할 길이 없네요^^;
Web.Config 파일을 열어보시면 TestDBEntities 라는 이름으로 커넥션이 세팅되어있는 것을 확인할 수 있습니다.


다음에는 Tables를 선택하고 네임스페이스는 TestDBModel로 입력후 다음버튼을 클릭합니다.


완료가 되면 엔티티 데이터 모델 디자인 창이 열립니다. 다음그림에서처럼 TelDir 엔티티가 나타납니다.


프로퍼티 창을 보면 Entity Set Name 과 Name 이 동일하게 되어있는데요. 전 헷갈리기 때.문.에 약간 바꿔보겠습니다.


이로써 모델 작업이 끝났습니다.~  라고 말씀드리니까 정말 끝난듯 보이지만 이 녀석이 빌드를 해야 사용할수 있더라고요. 잠시 후에 상황을 봐가며 말씀드리겠습니다.

TelDir 컨트롤러 만들기

자. 이제 데이터베이스 레코드를 나타내는 방법을 알아볼건데요. 전화번호부의 리스트를 리턴하는 컨트롤러를 생성해보겠습니다. 솔루션 탐색기의 컨트롤러 폴더에 TelDirController 라는 이름의 컨트롤러를 생성합니다. 그리고 다음 그림처럼 TelDir 컨트롤러의 노출된 Index() 액션메쏘드를 수정하겠습니다. 데이터베이스 레코드 셋을 반환하도록 수정하죠^^


커넥션을 생성한 후에 작업을 해야하는데, 빨간 물결 치는거 보이시죠?^^; using 문이 빠졌네요. Test 밑에 마우스 커서를 갖다대면 추가해야할 문장이 보입니다. 클릭! 한후 다음과 같이 작성하겠습니다.

* 팁 *
저렇게 물결칠때는 '컨트롤 +  . '  을 입력하셔도 동일한 결과를 얻으실수 있습니다.
다들 아시던 부분? ^^;


그런 후 메쏘드 안에서 아무데서나 마우스 오른쪽 버튼을 클릭하신 후 Add View 옵션을 선택합니다.


Create a strongly-typed view 를 선택합니다. 엥? 그런데 저희가 여태까지 만들었던 모델클래스가 보이질 않네요ㅠㅠ
 

여기서 슬슬 이해가 오시면 좋죠?  이것 때.문.에. 빌드가 필요했던 것이었습니다. 빌드를 안하면 보여주질 않아요-_-; F6키를 조심스럽게 누르시면 빌드가 성공하고 다시 Add View 해보시면,
ㅎㅎ 있네요 있어^^ Models.TelDir 을 선택하고 View content 에 List 를 선택하고 Add 합니다.


그러면 다음의 View 페이지의 소스를 확인하실 수 있습니다.


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication2.Models.TelDir>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Index</h2>
    <table>
        <tr>
            <th></th>
            <th>
                ID
            </th>
            <th>
                NAME
            </th>
            <th>
                TEL_NO
            </th>
            <th>
                RGST_DT
            </th>
        </tr>
    <% foreach (var item in Model) { %>
   
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id=item.ID }) %> |
                <%= Html.ActionLink("Details", "Details", new { id=item.ID })%>
            </td>
            <td>
                <%= Html.Encode(item.ID) %>
            </td>
            <td>
                <%= Html.Encode(item.NAME) %>
            </td>
            <td>
                <%= Html.Encode(item.TEL_NO) %>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:g}", item.RGST_DT)) %>
            </td>
        </tr>
   
    <% } %>
    </table>
    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

역시 강력한 타입이 들어가니(strongly-typed view - 좀전에 선택해서 이 뷰를 만들었죠) 자동으로 모델클래스(TelDir이죠)와 매핑이 되면서, 모델에서 아이템을 가져와 하나씩 출력하는 심플한 리스트 형식의 페이지가 완성이 되었습니다. 스탓 디버그인 F5를 눌러서 확인을 해보겠습니다. URL은 컨트롤러를 매핑시키기 위해 /TelDir 을 입력해주세요. 다음처럼 화면이 나타나면 성공입니다.


굿이네요~^^

퍄샬(Partial) 템플릿 만들기

너무 복잡 미묘한 뷰를 만들때, 이것들을 각각 부분부분 나누고 쪼개서 뷰에 보여준다면.. 어떠십니까? 괜찮은 생각인가요? 이때 이 파샬은 뷰 페이지를 이해하고 유지보수 하는것을 쉽게해주죠^^
만들어 보겠습니다.
Add View 창에서 다음의 단계를 밟으면
1. TelDirTemplate 이름을 입력합니다.
2. Create a partial view(.ascx), Create a strongly-typed view 를 선택합니다.
3. view data class 는 TelDir을 선택합니다.
4. content 는 Empty를 선택합니다.
5. Add 버튼을 클립합니다.


완료가 되면 다음 소스에서 처럼 파샬 템픔릿인 TelDirTemplate를 확인할 수 있습니다.


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication2.Models.TelDir>" %>
<tr>
    <td>
        <%= Html.Encode(Model.ID) %>
    </td>
    <td>
        <%= Html.Encode(Model.NAME) %>
    </td>
    <td>
        <%= Html.Encode(Model.TEL_NO) %>
    </td>
    <td>
        <%= Html.Encode(String.Format("{0:g}", Model.RGST_DT)) %>
    </td>
</tr>

보시면 레코드의 한줄을 나타내는 템플릿을 포함하고 있습니다.
이제, TelDirTemplate 파샬 템플릿을 이용하여 Index 뷰를 수정해보겠습니다.


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication2.Models.TelDir>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Index</h2>
    <table>
        <tr>           
            <th>
                ID
            </th>
            <th>
                NAME
            </th>
            <th>
                TEL_NO
            </th>
            <th>
                RGST_DT
            </th>
        </tr>
    <% foreach (var item in Model) { %>
   
        <% Html.RenderPartial("TelDirTemplate", item); %>
   
    <% } %>
    </table>
    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

foreach 문을 수정하였습니다. 테이블에 있는 모든 전화번호를 foreach 문을 통해 하나씩 돌면서 TelDirTemplate을 이용하여 렌더하고 있습니다. TelDirTemplate은 RenderPartial() 도우미 메쏘드를 호출하여 렌더를 합니다.

RenderPartial() 메쏘드가 다른 도우미 메쏘드와 다른 점은 RenderPartial() 메쏘드는 스트링을 리턴하지 않습니다. 그래서 RenderPartial() 메쏘드는 <%= Html.RenderPartial(); %> 대신에 <% Html.RenderPartial(); %> 으로 호출을 해야만 합니다.


정리요

이것으로 데이터베이스 및 테이블 생성, 엔티티 프레임워크를 이용해서 컨트롤러에서 데이터를 반환하는 방법, 스카폴딩으로 자동으로 아이템 콜렉션이 뷰에 생성되는 방법, 마지막으로 파샬 템플릿까지 알아봤습니다.

다음에는 더 알차게 준비하도록 하겠습니다^^

참고자료
http://www.asp.net/learn/mvc/tutorial-11-cs.aspx

'.NET > MVC Basic' 카테고리의 다른 글

ASP.NET MVC - Model(1)  (0) 2010.03.31
ASP.NET MVC - View(4)  (0) 2009.12.11
ASP.NET MVC - View(2)  (0) 2009.11.30
ASP.NET MVC - View(1)  (2) 2009.11.23
ASP.NET MVC - Controller(2)  (0) 2009.11.11