ASP.NET MVC Tutorial #01

튜토리얼 정복 시리즈 1탄 ASP.NET MVC !!!

Creating a Tasklist Application with ASP.NET MVC

 

이 튜토리얼의 목적은 ASP.NET MVC 어플리케이션을 구축하는 감각을 일깨워 주는 것이다. 이 튜토리얼에서 단순한 Tasklist 어플리케이션을 구축하는 방법을 보여줄 것이다.

 

ASP 나 ASP.NET 에서 작업을 해봤다면, 당신은 ASP.NET MVC 가 매우 친근할 것이다. ASP.NET MVC은 ASP 어플리케이션의 페이지와 매우 흡사하다. 그리고 전통적인 ASP.NET Web Form 어플리케이션처럼, ASP.NET MVC은 언어들과 닷넷 프레임워크에서 제공하는 클래스들에 풍부한 접근을 제공한다.

 

The Tasklist Application

 

단순함을 유지하기 위해, 매우 심플한 Tasklist 어플리케이션을 만들 것이다. 이 어플리케이션은 다음 3가지 기능을 가지고 있다.

 

1.     일정의 리스트

2.     새 일정 만들기

3.     완료된 일정의 표시

 

Creating an ASP.NET MVC Web Application Project

 

Visual Studio 2008에서 새로운 ASP.NET MVC Web Application project을 만들자. File, New Project 메뉴를 선택하면 당신은 New Project dialog box가 뜨는 것을 볼 것이다. 당신의 좋아하는 프로그래밍 언어(C# or VB)를 선택하고 ASP.NET MVC Application project을 선택하자. 프로젝트 이름은 TaskList라 하고 OK 버튼을 클릭하라.

 

(영문 VS2008에서는 unit test를 생설할지 박스가 나오는데 No 클릭)

 

ASP.NET MVC 어플리케이션은 기본적으로 다음 폴더들을 가지고 있다. Models, Views, 그리고 Controllers 폴더 이다.

당신은 솔루션 탐색기로 위의 폴더들을 볼 수 있다. 우리는 TaskList 어플리케이션을 구축함에 있어 Models, Views, 그리고 Controllers 폴더에 파일을 추가할 것이다.

 

Creating the Controller

 

보통 ASP.NET MVC 어플리케이션을 만들 때 당신은 controller을 만드는 작업부터 시작할 것이다. ASP.NET MVC 어플리케이션에 대한 각 브라우저의 요청은 controller에 의해 다뤄진다. Controller는 요청에 응답하는 어플리케이션 로직으로 구성된다.

 

우리의 TaskList 어플리케이션에서 우리는 HomeController 클래스를 정의할 것이고 아래의 코드로 구성된다. 정의된 controller은 4가지 함수를 구성한다. Index(), Create(), CreateNew(), 그리고 Complete(). 각 함수는 controller action 에 일치한다.

 

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using TaskList.Models;   namespace TaskList.Controllers {      public class HomeController : Controller      {           // 일정 목록을 보여준다.           public ActionResult Index()           {                return View();           }           // 새 일정을 작성하는 폼을 보여준다.           public ActionResult Create()           {                return View();           }           // 데이터베이스에 새 일정을 추가한다.           public ActionResult CreateNew()           {                return RedirectToAction("Index");           }           // 완료된 일정을 표시한다.           public ActionResult Complete()           {                // 데이터베이스 로직                return RedirectToAction("Index");           }      } }

 

여기에 각 controller action의 목적이 있다

 

ü  Index() – 당신이 일정의 리스트를 보기를 원할 때 호출

ü  Create() – 당신이 새로운 일정을 추가하기 위해 등록 폼을 보기를 원할 때 호출

ü  CreateNew() – 새로운 일정 등록을 위한 폼이 submit 되었을 때 호출. 이 controller 행동은 실제 새로운 일정을 데이터 베이스에 추가 시키는 작업을 한다.

ü  Complete() – 새로운 일정이 완료됨을 표시할 때 호출.

 

우리는 추가적인 작업을 위해 controller action에 로직을 추가할 필요가 있다.

 

Controller 클래스에 구성된 몇몇 public function은 controller action으로 작용한다. 이 부분은 신중히 처리해야 한다. 누구든지 그들의 웹 브라우저의 주소 바에서 올바른 URL을 통해 controller action을 호출 할 수 있다. 그렇게 때문에 당신이 호출되기를 원하지 않는 function이 있을 때 controller에서 public으로 function을 만들면 안 된다.

 

Controller action은 ActionResult를 리턴 한다는 것을 명심해라. ActionResult은 해당 action이 하는 것을 의미한다. Index()와 Create() controller action은 MVC view을 리턴 한다. CreateNew()와 Complete() action 결과는 사용자에게 다른 controller action으로 바꿔주는 역할을 한다.

 

이 controller들이 어떠한 작업을 하는지 설명하겠다. 당신이 create() controller action을 요청할 때, 새로운 일정을 만드는 폼을 구성하는 view가 리턴 된다. 당신이 이 폼에서 submit 했을 때 CreateNew() controller action이 호출된다. CreateNew() controller action은 새로운 일정을 데이터베이스에 추가하고 사용자에게 Index() controller action으로 리다이렉트한다. Index() controller action은 일정 전체 목록을 표시할 view을 리턴 한다. 마지막으로 당신이 완료 일정을 표시한다면, Complete() controller action이 호출되고 데이터베이스가 업데이트 된다. Complete() action은 사용자가에게 Index() action을 리다이렉트 하고 업데이트된 일정이 표시된다.

 

Creating the Views

 

View은 HTML markup과 브라우저로 보내는 콘텐트로 구성된다. View은 ASP.NET 어플리케이션에서 페이지에 가장 가까운 것이다. 당신은 확장자가 aspx인 파일을 만듦으로써 view를 만든다.

 

당신은 올바른 위치에서 view을 구성해야 한다. 당신이 HomeController의 Index() action method을 위해 view를 만든다면 다음과 같은 경로 폴더 안에 view를 위치시켜야 한다.

 

\Views\Home\Index.aspx

 

만약 당신이 ProductController의 Price() action method을 위한 view을 만든다면, 다음 폴더에 위치시켜야 한다.

 

\Views\Product\Price.aspx

 

기본적으로 view은 그것이 일치하는 controller action 과 같은 이름을 가져야 한다. View은 항상 controller 이름과 일치하는 폴더 안에 위치해 있어야 한다.

 

당신은 view의 서브 폴더에서 우 클릭을 통해 Add, New Item 메뉴를 선택하여 view을 만들 수 있다. View을 추가하기 위해 MVC View 페이지 템플릿을 선택해라. 우리는 다음 경로에 두 가지 view을 만들어야 한다.

 

\Views\Home\Index.aspx

\Views\Home\Create.aspx

 

당신이 두 가지의 view을 만든 후, 당신의 솔루션 탐색기는 다음과 같을 것이다.

 

 

View은 HTML content와 스크립트를 작성할 수 있다. Index.aspx view은 모든 일정의 리스트를 보여줄 것이다. View의 목적을 나타내기 위해, Index.aspx view에 다음 코드를 추가하자.

 

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="TaskList.Views.Home.Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.w3.org/1999/xhtml >  <head runat="server"> <title></title> </head> <body> <div> <h1>My Tasks</h1>    ... displaying all tasks    <a href="/Home/Create">Add new Task</a> </div> </body> </html>

Index.aspx view은 현재 어떠한 일정도 표시하지 않는다. 우리는 이 튜토리얼 뒤에 Index.aspx에 일정 리스트를 표시할 스크립트를 추가할 것이다.

 

Index.aspx view은 Add new Task로 명명된 링크를 포함하고 있다는 것을 명심해라. 이 링크는 /Home/Create 경로로 연결되어 있다. 당신이 이 링크를 클릭할 때, HomeController 클래스의 Create() action이 불리어 진다. (invoke) Create() 메소드는 Create View를 리턴한다.

 

Create.aspx view은 새 일정을 만드는 폼으로 구성된다. View에 다음 코드를 작성하자.

 

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Create.aspx.cs" Inherits="TaskList.Views.Home.Create" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >      <head runat="server">           <title></title>      </head>      <body>           <div>                <h1>Add New Task</h1>                <form method="post" action="CreateNew">                     <label for="description">Task:</label>                     <input type="text" name="description" />                     <br />                     <input type="submit" value="Add Task" />                </form>           </div>      </body> </html>

 

이 폼은 다음 URL에 3 posts 리스트를 구성하는 것을 명심해라.

 

/Home/CreateNew.aspx

 

이 URL은 HomeController controller 위에 CreateNew() action에 대응한다. 새로운 일정을 나타내는 데이터 폼은 이 action에 의해 게시될 것이다.

 

Creating the Database

 

다음 단계로 우리의 일정을 저장할 데이터베이스를 만드는 것이다. 당신은 App_Data 폴더에서 우 클릭을 통하여, Add, New Item 메뉴를 선택하고 데이터베이스를 만들 수 있다. SQL Server 데이터베이스 템플릿 아이템을 선택하고, TaskListDB.mdf 라고 이름을 정하자.

 

다음으로 우리는 일정을 저장할 데이터베이스 안에 테이블을 추가시켜야 한다. 솔루션 탐색기 안에 TaskListDB.mdf을 더블 클릭해라. 테이블 폴더에서 우 클릭을 하고, Add New Table 메뉴 아이템을 선택하자. 선택된 메뉴 아이템은 데이터베이스 테이블 디자이너가 열리고 다음과 같이 칼럼을 추가하자.

Column Name	Data Type	Allow Nulls
Id	Int	False
Task	Nvarchar(300)	False
IsCompleted	Bit	False
EntryDate	DateTime	False

 

첫 칼럼인 ID 칼럼은 두 가지 특별한 속성을 가지고 있다. 첫 번째로 당신은 Id 칼럼을 primary key 칼럼으로 만들어야 한다. 두 번째로 당신은 Id 칼럼을 Identity 칼럼으로 만들어야 한다.

 

테이블이름은 Tasks 라고 하고 저장하자.

 

(저는 SQL 상에서 데이터베이스를 만들고 서버 탐색기를 통해 연결했습니다.)

 

Create the Model

 

MVC Model은 당신의 어플리케이션과 데이터베이스 억세스 로직 대부분으로 구성된다. 일반적으로 당신은 Models 폴더 안에 당신의 MVC 어플리케이션이 포함된 클래스들이 놓여있다. View 나 controller을 포함하지 않은 모든 당신의 어플리케이션 로직은 Models 폴더 안에서 밀어내야 한다.

 

이 튜토리얼에서 우리는 전 섹션에서 만든 데이터베이스와 통신하기 위해 LINQ to SQL을 사용할 것이다. 일반적으로 나는 LINQ to SQL을 선호한다. 그러나 당신이 ASP.NET MVC 어플리케이션에서 LINQ to SQL을 사용하기를 강요하지는 않는다. 내가 언급한대로 당신은 다른 기술, 예를 들어 NHibernate 나 데이터베이스와 통신할 수 있는 프레임워크를 사용해도 된다.

 

LINQ to SQL을 사용하기 위해 우리는 Models 폴더에 LINQ to SQL 클래스를 만들어야 한다. Models 폴더를 우 클릭하고 Add, New Item 메뉴를 선택하고, LINQ to SQL Classes 템플릿 아이템을 선택해라. 이름은 TaskList.dbml로 설정하자. 이 단계가 끝나면 Object Relational Designer가 나타날 것이다.

우리는 Tasks 데이터베이스 테이블을 나타낼 single LINQ to SQL 엔티티 클래스를 만들어야 한다. 솔루션 탐색기에서 Tasks 테이블을 Object Relational Designer로 드래그 해라. 마지막 action은 Task 라는 이름의 새로운 LINQ to SQL 엔티티 클래스가 생길 것이다. 저장하자.

 

 

Adding Database Login to the Controller Methods

 

우리는 지금 데이터베이스를 가지고 있고, 우리의 controller action을 정의함으로써 우리는 데이터베이스에 일정을 저장할 수 있고, 검색할 수도 있다. 정의된 HomeController는 다음과 같다.

 

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using TaskList.Models;   namespace TaskList.Controllers {      public class HomeController : Controller      {           private TaskListDataContext db = new TaskListDataContext();           // 일정 목록을 보여준다.           public ActionResult Index()           {                var tasks = from t in db.Tasks                     orderby t.EntryDate                     descending select t;                return View(tasks.ToList());           }           // 새 일정을 작성하는 폼을 보여준다.           public ActionResult Create()           {                return View();           }           // 데이터베이스에 새 일정을 추가한다.           public ActionResult CreateNew(string description)           {                // 데이터베이스에 새 일정 추가                Tasks newTask = new Tasks();                newTask.Task = description;                newTask.IsCompleted = false;                newTask.EntryDate = DateTime.Now;                  db.Tasks.InsertOnSubmit(newTask);                db.SubmitChanges();                  return RedirectToAction("Index");           }           // 완료된 일정을 표시한다.           public ActionResult Complete(int Id)           {                // 데이터베이스 로직                var tasks = from t in db.Tasks where t.Id == Id select t;                foreach (Tasks match in tasks)                     match.IsCompleted = true;                  db.SubmitChanges();                  return RedirectToAction("Index");           }      } }

 

위 코드에서 HomeController는 db라고 정의된 class-level private field을 가지고 있는 것을 알 수 있다. Db 필드는 TaskListDataContext 클래스의 인스턴스이다. HomeController 클래스는 TaskListDB 데이터베이스를 나타내기 위해 db 필드를 사용한다.

 

Index() Controller action은 Tasks 데이터베이스 테이블로부터 모든 레코드의 검색이 정의된다. Tasks은 Index view를 통과한다.

 

CreateNew() 메소드는 Tasks 데이터베이스 테이블에서 새로운 일정을 만듦을 정의한다. CreateNew() 메소드는 description으로 명명된 String 타입의 파라미터를 받는다는 것을 명심해라. 이 파라미터는 Create view를 지나가는 description 텍스트 폼 필드를 나타낸다. ASP.NET MVC 프레임워크는 자동적으로 파라미터 필드에서 controller action으로 통과된다.

 

마지막으로 Complete() 메소드는 Tasks 데이터베이스 테이블에서 IsComplete 칼럼 값의 변화를 정의한다. 일정의 완료를 나타낼 때, task의 Id는 Complete() 메소드를 통과하여 데이터베이스를 업데이트 시킨다.

 

Modifying the Index View

 

Tasklist 어플리케이션을 완료하기 위한 마지막 작업이 남았다. 우리는 Index view을 수정하여 일정 목록을 나타내고 일정 완료를 표시하여야 한다. 수정된 Index view는 다음과 같다.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="TaskList.Views.Home.Index" %> <%@ Import Namespace="TaskList.Models" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >      <head runat="server">           <title>Index</title>      </head>      <body>           <div>                <h1>My Tasks</h1>                <ul>                     <% foreach (Tasks task in (IEnumerable)ViewData.Model) { %>                          <li>                               <% if (task.IsCompleted) {%>                                    <del>                                         <%= task.EntryDate.ToShortDateString() %>                                         -- <%=task.Task %>                                    </del>                               <% } else {%>                                    <a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>                                    <%= task.EntryDate.ToShortDateString() %>                                    -- <%=task.Task %>                               <% }%>                          </li>                     <% } %>                </ul>                <br /><br />                <a href="/Home/Create">Add new Task</a>           </div>      </body> </html>

 

Index view는 모든 일정을 열거하는 C# foreach 루프를 가지고 있다. 이 일정들은 ViewData.Model 속성으로 나타낸다. 일반적으로 controller action에서 view로 데이터를 이동하기 위해 ViewData을 사용한다.

 

루프 내에서 문법은 일정이 완료됨을 체크한다. 완료된 일정은 라인으로 보여진다. HTML <del> 태그는 완료 일정을 선으로 만들기 위해 사용된다. 일정이 완료되지 않았다면, 완료 링크 라벨은 일정의 다음을 표시한다. 링크는 다음 스크립트로 적용된다.

 

<a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>

 

일정의 Id는 링크로 표현된 URL을 포함된다는 것을 명심해라. 일정 Id는 당신이 링크를 클릭했을 때 HomeController 클래스의 Complete() action을 통과한다. 이 방식으로 해당하는 데이터베이스 레코드는 당신이 완료 링크를 클릭했을 때 업데이트 된다.

 

Index view의 마지막 버전은 다음과 같이 나타난다.

 

 

Summary

 

이 튜토리얼의 목적은 ASP.NET MVC 어플리케이션이 어떤 것인지를 맛보게 하는 것이다. ASP나 ASP.NET 어플리케이션을 만든 경험을 비추어 봤을 때 ASP.NET MVC 어플리케이션 제작이 매우 친근하다는 것을 발견했으면 하는 바램이다.

 

이 튜토리얼에서 우리는 ASP.NET MVC 어플리케이션의 가장 기본적인 특징을 알아보았다. 앞으로의 튜토리얼에서는 우리가 controllers, controller action, views, view data 그리고 HTML Helpers 등에 대해 깊게 알아볼 것이다.

TaskList.exe