첫 번째 반복에서는 가능한 가장 간단한 방법으로 연락처 관리자를 만듭니다. CRUD(만들기, 읽기, 업데이트 및 삭제)의 기본 데이터베이스 작업에 대한 지원을 추가합니다.
VB(연락처 관리 ASP.NET MVC 애플리케이션) 빌드
이 자습서 시리즈에서는 처음부터 끝까지 전체 연락처 관리 애플리케이션을 빌드합니다. Contact Manager 애플리케이션을 사용하면 사용자 목록에 대한 연락처 정보(이름, 전화 번호 및 전자 메일 주소)를 저장할 수 있습니다.
여러 반복을 통해 애플리케이션을 빌드합니다. 반복할 때마다 애플리케이션을 점진적으로 개선합니다. 이 여러 반복 방법의 목표는 각 변경의 이유를 이해할 수 있도록 하는 것입니다.
반복 #1 - 애플리케이션을 만듭니다. 첫 번째 반복에서는 가능한 가장 간단한 방법으로 연락처 관리자를 만듭니다. CRUD(만들기, 읽기, 업데이트 및 삭제)의 기본 데이터베이스 작업에 대한 지원을 추가합니다.
반복 #2 - 애플리케이션을 멋지게 만듭니다. 이 반복에서는 기본 ASP.NET MVC 보기 master 페이지 및 계단식 스타일시트를 수정하여 애플리케이션의 모양을 개선합니다.
반복 #3 - 양식 유효성 검사를 추가합니다. 세 번째 반복에서는 기본 양식 유효성 검사를 추가합니다. 사용자가 필요한 양식 필드를 완료하지 않고 양식을 제출하지 못하도록 합니다. 또한 전자 메일 주소 및 전화 번호의 유효성을 검사합니다.
반복 #4 - 애플리케이션을 느슨하게 결합합니다. 이 네 번째 반복에서는 여러 소프트웨어 디자인 패턴을 활용하여 Contact Manager 애플리케이션을 더 쉽게 유지 관리하고 수정할 수 있습니다. 예를 들어 리포지토리 패턴 및 종속성 주입 패턴을 사용하도록 애플리케이션을 리팩터링합니다.
반복 #5 - 단위 테스트 만들기 다섯 번째 반복에서는 단위 테스트를 추가하여 애플리케이션을 더 쉽게 유지 관리하고 수정할 수 있습니다. 데이터 모델 클래스를 모의하고 컨트롤러 및 유효성 검사 논리에 대한 단위 테스트를 빌드합니다.
반복 #6 - 테스트 기반 개발을 사용합니다. 이 여섯 번째 반복에서는 먼저 단위 테스트를 작성하고 단위 테스트에 대한 코드를 작성하여 애플리케이션에 새로운 기능을 추가합니다. 이 반복에서는 연락처 그룹을 추가합니다.
반복 #7 - Ajax 기능 추가 일곱 번째 반복에서는 Ajax에 대한 지원을 추가하여 애플리케이션의 응답성과 성능을 향상시킵니다.
이 반복
이 첫 번째 반복에서는 기본 애플리케이션을 빌드합니다. 목표는 가능한 가장 빠르고 간단한 방법으로 Contact Manager를 빌드하는 것입니다. 이후 반복에서는 애플리케이션의 디자인을 개선합니다.
Contact Manager 애플리케이션은 기본 데이터베이스 기반 애플리케이션입니다. 애플리케이션을 사용하여 새 연락처를 만들고, 기존 연락처를 편집하고, 연락처를 삭제할 수 있습니다.
이 반복에서는 다음 단계를 완료합니다.
- MVC 애플리케이션 ASP.NET
- 연락처를 저장할 데이터베이스 만들기
- Microsoft Entity Framework를 사용하여 데이터베이스에 대한 모델 클래스 생성
- 데이터베이스의 모든 연락처를 나열할 수 있는 컨트롤러 작업 및 보기 만들기
- 데이터베이스에서 새 연락처를 만들 수 있는 컨트롤러 작업 및 뷰 만들기
- 컨트롤러 작업 및 데이터베이스의 기존 연락처를 편집할 수 있는 보기 만들기
- 컨트롤러 작업 및 데이터베이스의 기존 연락처를 삭제할 수 있는 보기 만들기
소프트웨어 필수 구성 요소
ASP.NET MVC 애플리케이션에서는 컴퓨터에 Visual Studio 2008 또는 Visual Web Developer 2008이 설치되어 있어야 합니다(Visual Web Developer는 Visual Studio의 고급 기능을 모두 포함하지 않는 Visual Studio의 무료 버전임). 다음 주소에서 Visual Studio 2008 또는 Visual Web Developer의 평가판 버전을 다운로드할 수 있습니다.
https://www.asp.net/downloads/essential/
참고
Visual Web Developer를 사용하는 ASP.NET MVC 애플리케이션의 경우 Visual Web Developer 서비스 팩 1이 설치되어 있어야 합니다. 서비스 팩 1이 없으면 웹 애플리케이션 프로젝트를 만들 수 없습니다.
MVC 프레임워크를 ASP.NET. 다음 주소에서 ASP.NET MVC 프레임워크를 다운로드할 수 있습니다.
이 자습서에서는 Microsoft Entity Framework를 사용하여 데이터베이스에 액세스합니다. Entity Framework는 .NET Framework 3.5 서비스 팩 1에 포함되어 있습니다. 다음 위치에서 이 서비스 팩을 다운로드할 수 있습니다.
https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35
이러한 각 다운로드를 하나씩 수행하는 대신 웹 PI(웹 플랫폼 설치 관리자)를 활용할 수 있습니다. 다음 주소에서 웹 PI를 다운로드할 수 있습니다.
https://www.asp.net/downloads/essential/
MVC 프로젝트 ASP.NET
MVC 웹 애플리케이션 프로젝트를 ASP.NET. Visual Studio를 시작하고 메뉴 옵션 파일, 새 프로젝트를 선택합니다. 새 프로젝트 대화 상자가 나타납니다(그림 1 참조). 웹 프로젝트 유형 및 ASP.NET MVC 웹 애플리케이션 템플릿을 선택합니다. 새 프로젝트 이름을 ContactManager로 지정하고 확인 단추를 클릭합니다.
새 프로젝트 대화 상자의 오른쪽 위에 있는 드롭다운 목록에서 .NET Framework 3.5를 선택했는지 확인합니다. 그렇지 않으면 ASP.NET MVC 웹 애플리케이션 템플릿이 표시되지 않습니다.
그림 01: 새 프로젝트 대화 상자(전체 크기 이미지를 보려면 클릭)
MVC 애플리케이션을 ASP.NET 단위 테스트 프로젝트 만들기 대화 상자가 나타납니다. 이 대화 상자를 사용하여 ASP.NET MVC 애플리케이션을 만들 때 솔루션에 단위 테스트 프로젝트를 만들고 추가하려는 것을 나타낼 수 있습니다. 이 반복에서는 단위 테스트를 빌드하지 않지만 나중에 반복에서 단위 테스트를 추가할 계획이므로 예, 단위 테스트 프로젝트 만들기 옵션을 선택해야 합니다. 새 ASP.NET MVC 프로젝트를 처음 만들 때 테스트 프로젝트를 추가하는 것은 ASP.NET MVC 프로젝트를 만든 후 테스트 프로젝트를 추가하는 것보다 훨씬 쉽습니다.
참고
Visual Web Developer는 테스트 프로젝트를 지원하지 않으므로 Visual Web Developer를 사용할 때 단위 테스트 프로젝트 만들기 대화 상자가 표시되지 않습니다.
그림 02: 단위 테스트 프로젝트 만들기 대화 상자(전체 크기 이미지를 보려면 클릭)
ASP.NET MVC 애플리케이션이 Visual Studio 솔루션 탐색기 창에 표시됩니다(그림 3 참조). 솔루션 탐색기 창이 표시되지 않으면 메뉴 옵션 보기, 솔루션 탐색기 선택하여 이 창을 열 수 있습니다. 솔루션에는 ASP.NET MVC 프로젝트와 테스트 프로젝트라는 두 개의 프로젝트가 포함되어 있습니다. ASP.NET MVC 프로젝트의 이름은 ContactManager이고 테스트 프로젝트의 이름은 ContactManager.Tests입니다.
그림 03: 솔루션 탐색기 창(전체 크기 이미지를 보려면 클릭)
프로젝트 샘플 파일 삭제
ASP.NET MVC 프로젝트 템플릿에는 컨트롤러 및 뷰에 대한 샘플 파일이 포함되어 있습니다. 새 ASP.NET MVC 애플리케이션을 만들기 전에 이러한 파일을 삭제해야 합니다. 파일 또는 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 삭제를 선택하여 솔루션 탐색기 창에서 파일 및 폴더를 삭제할 수 있습니다.
ASP.NET MVC 프로젝트에서 다음 파일을 삭제해야 합니다.
\Controllers\HomeController.vb
\Views\Home\About.aspx
\Views\Home\Index.aspx
또한 테스트 프로젝트에서 다음 파일을 삭제해야 합니다.
\Controllers\HomeControllerTest.vb
데이터베이스 만들기
Contact Manager 애플리케이션은 데이터베이스 기반 웹 애플리케이션입니다. 데이터베이스를 사용하여 연락처 정보를 저장합니다.
Microsoft SQL Server, Oracle, MySQL 및 IBM DB2 데이터베이스를 비롯한 모든 최신 데이터베이스가 포함된 ASP.NET MVC 프레임워크입니다. 이 자습서에서는 Microsoft SQL Server 데이터베이스를 사용합니다. Visual Studio를 설치할 때 Microsoft SQL Server 데이터베이스의 무료 버전인 Microsoft SQL Server Express 설치하는 옵션이 제공됩니다.
솔루션 탐색기 창에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 추가, 새 항목을 선택하여 새 데이터베이스를 만듭니다. 새 항목 추가 대화 상자에서 데이터 범주 및 SQL Server 데이터베이스 템플릿을 선택합니다(그림 4 참조). 새 데이터베이스의 이름을 ContactManagerDB.mdf 확인 단추를 클릭합니다.
그림 04: 새 Microsoft SQL Server Express 데이터베이스 만들기(전체 크기 이미지를 보려면 클릭)
새 데이터베이스를 만든 후 솔루션 탐색기 창의 App_Data 폴더에 데이터베이스가 나타납니다. ContactManager.mdf 파일을 두 번 클릭하여 서버 Explorer 창을 열고 데이터베이스에 연결합니다.
참고
Microsoft Visual Web Developer의 경우 서버 Explorer 창을 데이터베이스 Explorer 창이라고 합니다.
서버 Explorer 창을 사용하여 데이터베이스 테이블, 뷰, 트리거 및 저장 프로시저와 같은 새 데이터베이스 개체를 만들 수 있습니다. Tables 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 새 테이블 추가를 선택합니다. 데이터베이스 테이블 Designer 나타납니다(그림 5 참조).
그림 05: 데이터베이스 테이블 Designer(전체 크기 이미지를 보려면 클릭)
다음 열이 포함된 테이블을 만들어야 합니다.
| 열 이름 | 데이터 형식 | Null 허용 |
|---|---|---|
| Id | int | false |
| FirstName | nvarchar(50) | false |
| LastName | nvarchar(50) | false |
| Phone | nvarchar(50) | false |
| 메일 | nvarchar(255) | false |
첫 번째 열인 ID 열은 특수합니다. ID 열을 ID 열 및 기본 키 열로 표시해야 합니다. 열 속성을 확장하고(그림 6의 아래쪽을 보면) ID 사양 속성까지 아래로 스크롤하여 열이 ID 열임을 나타냅니다. (Is Identity) 속성을 Yes 값으로 설정합니다.
열을 선택하고 키 아이콘이 있는 단추를 클릭하여 열을 기본 키 열로 표시합니다. 열이 기본 키 열로 표시되면 열 옆에 키 아이콘이 나타납니다(그림 6 참조).
테이블 만들기를 마친 후 저장 단추(플로피 아이콘이 있는 단추)를 클릭하여 새 테이블을 저장합니다. 새 테이블에 연락처 이름을 지정합니다.
Contacts 데이터베이스 테이블 만들기를 완료한 후 테이블에 일부 레코드를 추가해야 합니다. 서버 Explorer 창에서 연락처 테이블을 마우스 오른쪽 단추로 클릭하고 테이블 데이터 표시 메뉴 옵션을 선택합니다. 표시되는 표에 하나 이상의 연락처를 입력합니다.
데이터 모델 만들기
ASP.NET MVC 애플리케이션은 모델, 뷰 및 컨트롤러로 구성됩니다. 먼저 이전 섹션에서 만든 Contacts 테이블을 나타내는 Model 클래스를 만듭니다.
이 자습서에서는 Microsoft Entity Framework를 사용하여 데이터베이스에서 모델 클래스를 자동으로 생성합니다.
참고
ASP.NET MVC 프레임워크는 어떤 식으로든 Microsoft Entity Framework에 연결되지 않습니다. NHibernate, LINQ to SQL 또는 ADO.NET 비롯한 대체 데이터베이스 액세스 기술과 함께 ASP.NET MVC를 사용할 수 있습니다.
다음 단계에 따라 데이터 모델 클래스를 만듭니다.
- 솔루션 탐색기 창에서 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가, 새 항목을 선택합니다. 새 항목 추가 대화 상자가 나타납니다(그림 6 참조).
- 데이터 범주 및 ADO.NET 엔터티 데이터 모델 템플릿을 선택합니다. 데이터 모델 이름을 ContactManagerModel.edmx 로 지정하고 추가 단추를 클릭합니다. 엔터티 데이터 모델 마법사가 나타납니다(그림 7 참조).
- 모델 콘텐츠 선택 단계에서 데이터베이스에서 생성을 선택합니다(그림 7 참조).
- 데이터 연결 선택 단계에서 ContactManagerDB.mdf 데이터베이스를 선택하고 엔터티 연결 설정에 대한 ContactManagerDBEntities 이름을 입력합니다(그림 8 참조).
- 데이터베이스 개체 선택 단계에서 테이블 레이블이 지정된 확인란을 선택합니다(그림 9 참조). 데이터 모델에는 데이터베이스에 포함된 모든 테이블(연락처 테이블이 하나만 있습니다)이 포함됩니다. 네임스페이스 모델을 입력합니다. 마침 단추를 클릭하여 마법사를 완료합니다.
그림 06: 새 항목 추가 대화 상자(전체 크기 이미지를 보려면 클릭)
그림 07: 모델 콘텐츠 선택(전체 크기 이미지를 보려면 클릭)
그림 08: 데이터 연결 선택(전체 크기 이미지를 보려면 클릭)
그림 09: 데이터베이스 개체 선택(전체 크기 이미지를 보려면 클릭)
엔터티 데이터 모델 마법사를 완료하면 엔터티 데이터 모델 Designer 나타납니다. 디자이너는 모델링되는 각 테이블에 해당하는 클래스를 표시합니다. Contacts라는 클래스가 하나 표시됩니다.
엔터티 데이터 모델 마법사는 데이터베이스 테이블 이름을 기반으로 클래스 이름을 생성합니다. 마법사에서 생성한 클래스의 이름을 거의 항상 변경해야 합니다. 디자이너에서 Contacts 클래스를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 이름 바꾸기를 선택합니다. 클래스 이름을 연락처(복수)에서 Contact(단수)로 변경합니다. 클래스 이름을 변경하면 클래스가 그림 10처럼 표시됩니다.
그림 10: Contact 클래스(전체 크기 이미지를 보려면 클릭)
이 시점에서 데이터베이스 모델을 만들었습니다. Contact 클래스를 사용하여 데이터베이스의 특정 연락처 레코드를 나타낼 수 있습니다.
홈 컨트롤러 만들기
다음 단계는 홈 컨트롤러를 만드는 것입니다. 홈 컨트롤러는 ASP.NET MVC 애플리케이션에서 호출되는 기본 컨트롤러입니다.
솔루션 탐색기 창에서 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션인 컨트롤러 추가(그림 11 참조)를 선택하여 홈 컨트롤러 클래스를 만듭니다. 만들기, 업데이트 및 세부 정보 시나리오에 대한 작업 메서드 추가 확인란을 확인합니다. 추가 단추를 클릭하기 전에 이 확인란이 선택되어 있는지 확인합니다.
그림 11: 홈 컨트롤러 추가(전체 크기 이미지를 보려면 클릭)
홈 컨트롤러를 만들 때 목록 1에서 클래스를 가져옵니다.
목록 1 - Controllers\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
'
' GET: /Home/
Function Index() As ActionResult
Return View()
End Function
'
' GET: /Home/Details/5
Function Details(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add insert logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add update logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
End Class
연락처 나열
연락처 데이터베이스 테이블에 레코드를 표시하려면 Index() 작업과 인덱스 뷰를 만들어야 합니다.
홈 컨트롤러에 Index() 작업이 이미 포함되어 있습니다. 이 메서드는 목록 2처럼 보이도록 수정해야 합니다.
목록 2 - Controllers\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
Private _entities As New ContactManagerDBEntities()
'
' GET: /Home/
Function Index() As ActionResult
Return View(_entities.ContactSet.ToList())
End Function
…
목록 2의 홈 컨트롤러 클래스에는 _entities 라는 프라이빗 필드가 포함되어 있습니다. _entities 필드는 데이터 모델의 엔터티를 나타냅니다. _entities 필드를 사용하여 데이터베이스와 통신합니다.
Index() 메서드는 Contacts 데이터베이스 테이블의 모든 연락처를 나타내는 뷰를 반환합니다. 식 _entities. ContactSet.ToList()는 연락처 목록을 일반 목록으로 반환합니다.
이제 인덱스 컨트롤러를 만들었으므로 다음으로 인덱스 뷰를 만들어야 합니다. 인덱스 보기를 만들기 전에 빌드, 솔루션 빌드 메뉴 옵션을 선택하여 애플리케이션을 컴파일합니다. 보기 추가 대화 상자에 모델 클래스 목록을 표시하려면 항상 뷰를 추가하기 전에 프로젝트를 컴파일해야 합니다.
Index() 메서드를 마우스 오른쪽 단추로 클릭하고 보기 추가 메뉴 옵션을 선택하여 인덱스 보기를 만듭니다(그림 12 참조). 이 메뉴 옵션을 선택하면 보기 추가 대화 상자가 열립니다(그림 13 참조).
그림 12: 인덱스 보기 추가(전체 크기 이미지를 보려면 클릭)
보기 추가 대화 상자에서 강력한 형식의 보기 만들기라는 확인란을 검사. 데이터 보기 클래스 ContactManager.Contact 및 콘텐츠 보기 목록을 선택합니다. 이러한 옵션을 선택하면 연락처 레코드 목록을 표시하는 보기가 생성됩니다.
그림 13: 보기 추가 대화 상자(전체 크기 이미지를 보려면 클릭)
추가 단추를 클릭하면 목록 3의 인덱스 보기가 생성됩니다. 파일 맨 <위에 나타나는 %@ 페이지 %> 지시문을 확인합니다. 인덱스 보기는 ViewPage<IEnumerable<ContactManager.Models.Contact>> 클래스에서 상속됩니다. 즉, 뷰의 Model 클래스는 연락처 엔터티 목록을 나타냅니다.
인덱스 보기의 본문에는 Model 클래스가 나타내는 각 연락처를 반복하는 foreach 루프가 포함되어 있습니다. Contact 클래스의 각 속성 값은 HTML 테이블 내에 표시됩니다.
목록 3 - Views\Home\Index.aspx(수정되지 않음)
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable(Of ContactManager.Contact))" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<p>
<%=Html.ActionLink("Create New", "Create")%>
</p>
<table>
<tr>
<th></th>
<th>
Id
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
Email
</th>
</tr>
<% For Each item In Model%>
<tr>
<td>
<%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |
<%=Html.ActionLink("Details", "Details", New With {.id = item.Id})%>
</td>
<td>
<%=Html.Encode(item.Id)%>
</td>
<td>
<%=Html.Encode(item.FirstName)%>
</td>
<td>
<%=Html.Encode(item.LastName)%>
</td>
<td>
<%=Html.Encode(item.Phone)%>
</td>
<td>
<%=Html.Encode(item.Email)%>
</td>
</tr>
<% Next%>
</table>
</asp:Content>
인덱스 보기를 한 번 수정해야 합니다. 세부 정보 보기를 만들지 않으므로 세부 정보 링크를 제거할 수 있습니다. 인덱스 보기에서 다음 코드를 찾아서 제거합니다.
{.id = item. Id})%>
인덱스 보기를 수정한 후 Contact Manager 애플리케이션을 실행할 수 있습니다. 메뉴 옵션 디버그, 디버깅 시작을 선택하거나 F5 키를 누르기만 하면 됩니다. 애플리케이션을 처음 실행하면 그림 14에서 대화 상자가 표시됩니다. Web.config 파일 수정 옵션을 선택하여 디버깅을 사용하도록 설정하고 확인 단추를 클릭합니다.
그림 14: 디버깅 사용(전체 크기 이미지를 보려면 클릭)
인덱스 보기는 기본적으로 반환됩니다. 이 보기에는 연락처 데이터베이스 테이블의 모든 데이터가 나열됩니다(그림 15 참조).
그림 15: 인덱스 보기(전체 크기 이미지를 보려면 클릭)
인덱스 보기에는 보기 아래쪽에 새로 만들기라는 레이블이 지정된 링크가 포함되어 있습니다. 다음 섹션에서는 새 연락처를 만드는 방법을 알아봅니다.
새 연락처 만들기
사용자가 새 연락처를 만들 수 있도록 하려면 홈 컨트롤러에 두 개의 Create() 작업을 추가해야 합니다. 새 연락처를 만들기 위한 HTML 양식을 반환하는 하나의 Create() 작업을 만들어야 합니다. 새 연락처의 실제 데이터베이스 삽입을 수행하는 두 번째 Create() 작업을 만들어야 합니다.
홈 컨트롤러에 추가해야 하는 새 Create() 메서드는 목록 4에 포함되어 있습니다.
목록 4 - Controllers\HomeController.vb(메서드 만들기 사용)
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
_entities.AddToContactSet(contactToCreate)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
첫 번째 Create() 메서드는 HTTP GET을 사용하여 호출할 수 있고 두 번째 Create() 메서드는 HTTP POST에서만 호출할 수 있습니다. 즉, HTML 양식을 게시할 때만 두 번째 Create() 메서드를 호출할 수 있습니다. 첫 번째 Create() 메서드는 새 연락처를 만들기 위한 HTML 양식이 포함된 보기를 반환합니다. 두 번째 Create() 메서드는 데이터베이스에 새 연락처를 추가합니다.
두 번째 Create() 메서드가 Contact 클래스의 instance 허용하도록 수정되었습니다. HTML 양식에서 게시된 양식 값은 ASP.NET MVC 프레임워크에 의해 이 Contact 클래스에 자동으로 바인딩됩니다. HTML 만들기 양식의 각 양식 필드는 Contact 매개 변수의 속성에 할당됩니다.
Contact 매개 변수는 [Bind] 특성으로 데코레이트됩니다. [Bind] 특성은 연락처 ID 속성을 바인딩에서 제외하는 데 사용됩니다. Id 속성은 Identity 속성을 나타내므로 Id 속성을 설정하지 않습니다.
Create() 메서드 본문에서 Entity Framework는 새 Contact를 데이터베이스에 삽입하는 데 사용됩니다. 새 연락처가 기존 연락처 집합에 추가되고 SaveChanges() 메서드가 호출되어 이러한 변경 내용을 기본 데이터베이스로 다시 푸시합니다.
두 Create() 메서드 중 하나를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 보기 추가 를 선택하여 새 연락처를 만들기 위한 HTML 양식을 생성할 수 있습니다(그림 16 참조).
그림 16: 보기 만들기 추가(전체 크기 이미지를 보려면 클릭)
보기 추가 대화 상자에서 ContactManager.Contact 클래스 및 콘텐츠 보기에 대한 만들기 옵션을 선택합니다(그림 17 참조). 추가 단추를 클릭하면 만들기 보기가 자동으로 생성됩니다.
그림 17: 페이지가 폭발하는 모습(전체 크기 이미지를 보려면 클릭)
만들기 보기에는 Contact 클래스의 각 속성에 대한 양식 필드가 포함되어 있습니다. 만들기 보기에 대한 코드는 목록 5에 포함되어 있습니다.
목록 5 - Views\Home\Create.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Create</h2>
<%= Html.ValidationSummary() %>
<% Using Html.BeginForm()%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">LastName:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Phone">Phone:</label>
<%= Html.TextBox("Phone") %>
<%= Html.ValidationMessage("Phone", "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.TextBox("Email") %>
<%= Html.ValidationMessage("Email", "*") %>
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Create() 메서드를 수정하고 만들기 보기를 추가한 후에는 Contact Manger 애플리케이션을 실행하고 새 연락처를 만들 수 있습니다. 인덱스 보기에 표시되는 새로 만들기 링크를 클릭하여 만들기 보기로 이동합니다. 그림 18에 보기가 표시됩니다.
그림 18: 보기 만들기(전체 크기 이미지를 보려면 클릭)
연락처 편집
연락처 레코드를 편집하는 기능을 추가하는 것은 새 연락처 레코드를 만드는 기능을 추가하는 것과 매우 유사합니다. 먼저 홈 컨트롤러 클래스에 두 개의 새 Edit 메서드를 추가해야 합니다. 이러한 새 Edit() 메서드는 목록 6에 포함되어 있습니다.
목록 6 - Controllers\HomeController.vb(편집 메서드 포함)
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Dim contactToEdit = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToEdit)
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal contactToEdit As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
Dim originalContact = (from c in _entities.ContactSet _
where c.Id = contactToEdit.Id _
select c).FirstOrDefault()
_entities.ApplyPropertyChanges( originalContact.EntityKey.EntitySetName, contactToEdit)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
첫 번째 Edit() 메서드는 HTTP GET 작업에 의해 호출됩니다. Id 매개 변수는 편집 중인 연락처 레코드의 ID를 나타내는 이 메서드에 전달됩니다. Entity Framework는 ID와 일치하는 연락처를 검색하는 데 사용됩니다. 레코드를 편집하기 위한 HTML 양식이 포함된 보기가 반환됩니다.
두 번째 Edit() 메서드는 데이터베이스에 대한 실제 업데이트를 수행합니다. 이 메서드는 Contact 클래스의 instance 매개 변수로 허용합니다. ASP.NET MVC 프레임워크는 편집 양식의 양식 필드를 이 클래스에 자동으로 바인딩합니다. 연락처를 편집할 때는 [Bind] 특성이 포함되지 않습니다(Id 속성의 값이 필요함).
Entity Framework는 수정된 연락처를 데이터베이스에 저장하는 데 사용됩니다. 먼저 데이터베이스에서 원래 연락처를 검색해야 합니다. 그런 다음 Entity Framework ApplyPropertyChanges() 메서드를 호출하여 Contact에 대한 변경 내용을 기록합니다. 마지막으로 Entity Framework SaveChanges() 메서드를 호출하여 기본 데이터베이스에 대한 변경 내용을 유지합니다.
Edit() 메서드를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 보기 추가를 선택하여 편집 양식이 포함된 보기를 생성할 수 있습니다. 보기 추가 대화 상자에서 ContactManager.Models.Contact 클래스 및 보기 콘텐츠 편집 을 선택합니다(그림 19 참조).
그림 19: 편집 보기 추가(전체 크기 이미지를 보려면 클릭)
추가 단추를 클릭하면 새 편집 보기가 자동으로 생성됩니다. 생성된 HTML 양식에는 Contact 클래스의 각 속성에 해당하는 필드가 포함되어 있습니다(목록 7 참조).
목록 7 - Views\Home\Edit.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Edit</h2>
<%=Html.ValidationSummary()%>
<% Using Html.BeginForm() %>
<fieldset>
<legend>Fields</legend>
<p>
<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">LastName:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Phone">Phone:</label>
<%= Html.TextBox("Phone") %>
<%= Html.ValidationMessage("Phone", "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.TextBox("Email") %>
<%= Html.ValidationMessage("Email", "*") %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
연락처 삭제
연락처를 삭제하려면 홈 컨트롤러 클래스에 두 개의 Delete() 작업을 추가해야 합니다. 첫 번째 Delete() 작업은 삭제 확인 양식을 표시합니다. 두 번째 Delete() 작업은 실제 삭제를 수행합니다.
참고
나중에 반복 #7에서 한 단계 Ajax 삭제를 지원하게 연락처 관리자를 수정합니다.
두 개의 새 Delete() 메서드가 목록 8에 포함되어 있습니다.
목록 8 - Controllers\HomeController.vb(삭제 방법)
'
' GET: /Home/Delete/5
Function Delete(ByVal id As Integer) As ActionResult
Dim contactToDelete = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToDelete)
End Function
'
' POST: /Home/Delete/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Delete(ByVal contactToDelete As Contact) As ActionResult
Try
Dim originalContact = (from c in _entities.ContactSet _
where c.Id = contactToDelete.Id _
select c).FirstOrDefault()
_entities.DeleteObject(originalContact)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
첫 번째 Delete() 메서드는 데이터베이스에서 연락처 레코드를 삭제하기 위한 확인 양식을 반환합니다(그림20 참조). 두 번째 Delete() 메서드는 데이터베이스에 대해 실제 삭제 작업을 수행합니다. 데이터베이스에서 원래 연락처를 검색한 후에는 데이터베이스 삭제를 수행하기 위해 Entity Framework DeleteObject() 및 SaveChanges() 메서드가 호출됩니다.
그림 20: 삭제 확인 보기(전체 크기 이미지를 보려면 클릭)
연락처 레코드를 삭제하기 위한 링크가 포함되도록 인덱스 보기를 수정해야 합니다(그림 21 참조). 편집 링크가 포함된 동일한 테이블 셀에 다음 코드를 추가해야 합니다.
{.id = item. Id})%>
그림 21: 편집 링크가 있는 인덱스 보기(전체 크기 이미지를 보려면 클릭)
다음으로 삭제 확인 보기를 만들어야 합니다. 홈 컨트롤러 클래스에서 Delete() 메서드를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 보기 추가를 선택합니다. 보기 추가 대화 상자가 나타납니다(그림 22 참조).
목록, 만들기 및 편집 보기의 경우와 달리 보기 추가 대화 상자에는 삭제 보기를 만드는 옵션이 없습니다. 대신 ContactManager.Models.Contact 데이터 클래스 및 빈 보기 콘텐츠를 선택합니다. 빈 보기 콘텐츠 옵션을 선택하려면 뷰를 직접 만들어야 합니다.
그림 22: 삭제 확인 보기 추가(전체 크기 이미지를 보려면 클릭)
삭제 보기의 콘텐츠는 목록 9에 포함되어 있습니다. 이 보기에는 특정 연락처를 삭제해야 하는지 여부를 확인하는 양식이 포함되어 있습니다(그림 21 참조).
목록 9 - Views\Home\Delete.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Delete</h2>
<p>
Are you sure that you want to delete the entry for
<%= Model.FirstName %> <%= Model.LastName %>?
</p>
<% Using Html.BeginForm(New With { .Id = Model.Id }) %>
<p>
<input type="submit" value="Delete" />
</p>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
기본 컨트롤러의 이름 변경
연락처 작업을 위한 컨트롤러 클래스의 이름이 HomeController 클래스로 지정되는 것을 귀찮게 할 수 있습니다. 컨트롤러의 이름을 ContactController로 지정하지 않아야 하나요?
이 문제는 해결할 수 있을 만큼 쉽습니다. 먼저 홈 컨트롤러의 이름을 리팩터링해야 합니다. Visual Studio Code 편집기 HomeController 클래스를 열고 클래스 이름을 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 이름 바꾸기를 선택합니다. 이 메뉴 옵션을 선택하면 이름 바꾸기 대화 상자가 열립니다.
그림 23: 컨트롤러 이름 리팩터링(전체 크기 이미지를 보려면 클릭)
그림 24: 이름 바꾸기 대화 상자 사용(전체 크기 이미지를 보려면 클릭)
컨트롤러 클래스의 이름을 바꾸면 Visual Studio는 Views 폴더에 있는 폴더의 이름도 업데이트합니다. Visual Studio는 \Views\Home 폴더의 이름을 \Views\Contact 폴더로 바꿉니다.
이렇게 변경하면 애플리케이션에 더 이상 홈 컨트롤러가 없습니다. 애플리케이션을 실행하면 그림 25의 오류 페이지가 표시됩니다.
그림 25: 기본 컨트롤러 없음(전체 크기 이미지를 보려면 클릭)
Home 컨트롤러 대신 Contact 컨트롤러를 사용하려면 Global.asax 파일의 기본 경로를 업데이트해야 합니다. Global.asax 파일을 열고 기본 경로에서 사용하는 기본 컨트롤러를 수정합니다(목록 10 참조).
목록 10 - Global.asax.vb
Public Class MvcApplication
Inherits System.Web.HttpApplication
Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
' MapRoute takes the following parameters, in order:
' (1) Route name
' (2) URL with parameters
' (3) Parameter defaults
routes.MapRoute( _
"Default", _
"{controller}/{action}/{id}", _
New With {.controller = "Home", .action = "Index", .id = ""} _
)
End Sub
Sub Application_Start()
RegisterRoutes(RouteTable.Routes)
End Sub
End Class
이러한 변경이 완료되면 연락처 관리자가 올바르게 실행됩니다. 이제 Contact 컨트롤러 클래스를 기본 컨트롤러로 사용합니다.
요약
이 첫 번째 반복에서는 가능한 가장 빠른 방법으로 기본 Contact Manager 애플리케이션을 만들었습니다. Visual Studio를 활용하여 컨트롤러 및 뷰에 대한 초기 코드를 자동으로 생성했습니다. 또한 Entity Framework를 활용하여 데이터베이스 모델 클래스를 자동으로 생성했습니다.
현재 Contact Manager 애플리케이션을 사용하여 연락처 레코드를 나열, 만들기, 편집 및 삭제할 수 있습니다. 즉, 데이터베이스 기반 웹 애플리케이션에 필요한 모든 기본 데이터베이스 작업을 수행할 수 있습니다.
아쉽게도 애플리케이션에 몇 가지 문제가 있습니다. 첫째, 나는 이것을 인정 주저, 연락처 관리자 응용 프로그램은 가장 매력적인 응용 프로그램이 아니다. 몇 가지 디자인 작업이 필요합니다. 다음 반복에서는 애플리케이션의 모양을 개선하기 위해 기본 보기 master 페이지 및 계단식 스타일시트를 변경하는 방법을 살펴보겠습니다.
둘째, 양식 유효성 검사를 구현하지 않았습니다. 예를 들어 양식 필드의 값을 입력하지 않고 연락처 만들기 양식을 제출하는 것을 막을 수 있는 것은 없습니다. 또한 잘못된 전화 번호와 전자 메일 주소를 입력할 수 있습니다. 반복 #3에서 양식 유효성 검사 문제를 해결하기 시작합니다.
마지막으로, 가장 중요한 것은 Contact Manager 애플리케이션의 현재 반복을 쉽게 수정하거나 유지 관리할 수 없다는 것입니다. 예를 들어 데이터베이스 액세스 논리는 컨트롤러 작업에 바로 적용됩니다. 즉, 컨트롤러를 수정하지 않고는 데이터 액세스 코드를 수정할 수 없습니다. 이후 반복에서는 Contact Manager의 변경 복원력을 높일 수 있도록 구현할 수 있는 소프트웨어 디자인 패턴을 살펴봅니다.