ASP.NET MVC 4 도우미, 폼 및 유효성 검사

아티클
07/13/2023

ASP.NET MVC 4 모델 및 데이터 액세스 실습 랩에서는 데이터베이스의 데이터를 로드하고 표시했습니다. 이 실습 랩에서는 Music Store 애플리케이션에 해당 데이터를 편집하는 기능을 추가합니다.

이 목표를 염두에 두고 먼저 앨범의 CRUD(만들기, 읽기, 업데이트 및 삭제) 작업을 지원하는 컨트롤러를 만듭니다. ASP.NET MVC의 스캐폴딩 기능을 활용하여 HTML 테이블에 앨범의 속성을 표시하는 인덱스 뷰 템플릿을 생성합니다. 해당 보기를 향상시키기 위해 긴 설명을 자르는 사용자 지정 HTML 도우미를 추가합니다.

그런 다음 드롭다운과 같은 양식 요소의 도움을 받아 데이터베이스의 앨범을 변경할 수 있는 보기 편집 및 만들기를 추가합니다.

마지막으로 사용자가 앨범을 삭제하도록 허용하고 입력의 유효성을 검사하여 잘못된 데이터를 입력하지 못하게 합니다.

이 실습 랩에서는 ASP.NET MVC에 대한 기본 지식이 있다고 가정합니다. 이전에 ASP.NET MVC를 사용하지 않은 경우 MVC 기본 사항 실습 랩을 ASP.NET 것이 좋습니다.

이 랩에서는 원본 폴더에 제공된 샘플 웹 애플리케이션에 사소한 변경 내용을 적용하여 이전에 설명한 향상된 기능과 새로운 기능을 안내합니다.

참고

모든 샘플 코드 및 코드 조각은 Microsoft-Web/WebCampTrainingKit 릴리스에서 사용할 수 있는 웹 캠프 교육 키트에 포함되어 있습니다. 이 랩과 관련된 프로젝트는 ASP.NET MVC 4 도우미, 양식 및 유효성 검사에서 사용할 수 있습니다.

목표

이 Hands-On 랩에서는 다음 방법을 알아봅니다.

CRUD 작업을 지원하는 컨트롤러 만들기
HTML 테이블에 엔터티 속성을 표시하는 인덱스 뷰 생성
사용자 지정 HTML 도우미 추가
편집 보기 만들기 및 사용자 지정
HTTP-GET 또는 HTTP-POST 호출에 반응하는 작업 메서드를 구분합니다.
보기 만들기 추가 및 사용자 지정
엔터티 삭제 처리
사용자 입력 유효성 검사

사전 요구 사항

이 랩을 완료하려면 다음 항목이 있어야 합니다.

Microsoft Visual Studio Express 2012 for Web 또는 superior(부록 A를 설치하는 방법에 대한 지침 참조).

설치 프로그램

코드 조각 설치

편의를 위해 이 랩을 따라 관리할 대부분의 코드를 Visual Studio 코드 조각으로 사용할 수 있습니다. 코드 조각을 설치하려면 .\Source\Setup\CodeSnippets.vsi 파일을 실행합니다.

Visual Studio Code 코드 조각에 익숙하지 않고 사용하는 방법을 알아보려면 이 문서 "부록 B: 코드 조각 사용"의 부록을 참조할 수 있습니다.

연습

다음 연습에서는 이 Hands-On 랩을 구성합니다.

Store Manager 컨트롤러 및 해당 인덱스 보기 만들기
HTML 도우미 추가
편집 보기 만들기
보기 만들기 추가
삭제 처리
유효성 검사 추가
클라이언트 쪽에서 눈에 거슬리지 않는 jQuery 사용

참고

각 연습에는 연습을 완료한 후 가져와야 하는 결과 솔루션이 포함된 End 폴더가 함께 제공됩니다. 연습을 통해 작업하는 데 추가 도움이 필요한 경우 이 솔루션을 가이드로 사용할 수 있습니다.

이 랩을 완료하는 예상 시간: 60분

연습 1: Store Manager 컨트롤러 및 해당 인덱스 보기 만들기

이 연습에서는 CRUD 작업을 지원하는 새 컨트롤러를 만들고, 데이터베이스에서 앨범 목록을 반환하도록 인덱스 작업 메서드를 사용자 지정하고, 마지막으로 ASP.NET MVC의 스캐폴딩 기능을 활용하여 HTML 테이블에 앨범의 속성을 표시하는 인덱스 뷰 템플릿을 생성하는 방법을 알아봅니다.

작업 1 - StoreManagerController 만들기

이 작업에서는 CRUD 작업을 지원하는 StoreManagerController 라는 새 컨트롤러를 만듭니다.

Source/Ex1-CreatingTheStoreManagerController/Begin/ 폴더에 있는 Begin 솔루션을 엽니다.
1. 계속하려면 일부 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
새 컨트롤러를 추가합니다. 이렇게 하려면 솔루션 탐색기 내의 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 컨트롤러 명령을 선택합니다. 컨트롤러이름을StoreManagerController로 변경하고 빈 읽기/쓰기 작업이 있는 MVC 컨트롤러 옵션이 선택되어 있는지 확인합니다. 추가를 클릭합니다.

컨트롤러 추가 대화 상자

새 컨트롤러 클래스가 생성됩니다. 읽기/쓰기에 대한 작업을 추가하도록 표시했기 때문에 이에 대한 스텁 메서드는 TODO 주석이 채워져 애플리케이션 특정 논리를 포함하라는 메시지를 표시하여 일반적인 CRUD 작업이 만들어집니다.

작업 2 - StoreManager 인덱스 사용자 지정

이 작업에서는 데이터베이스의 앨범 목록이 포함된 View를 반환하도록 StoreManager 인덱스 작업 메서드를 사용자 지정합니다.

StoreManagerController 클래스에서 다음 using 지시문을 추가합니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - MvcMusicStore를 사용하는 Ex1)
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
StoreManagerController에 필드를 추가하여 MusicStoreEntities의 instance 저장합니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex1 MusicStoreEntities)
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
StoreManagerController 인덱스 작업을 구현하여 앨범 목록이 포함된 보기를 반환합니다.

컨트롤러 작업 논리는 이전에 작성된 StoreController의 인덱스 작업과 매우 유사합니다. LINQ를 사용하여 표시할 장르 및 아티스트 정보를 비롯한 모든 앨범을 검색합니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex1 StoreManagerController 인덱스)
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

작업 3 - 인덱스 뷰 만들기

이 작업에서는 인덱스 보기 템플릿을 만들어 StoreManager 컨트롤러에서 반환한 앨범 목록을 표시합니다.

새 보기 템플릿을 만들기 전에 보기 추가 대화 상자 에서 사용할 앨범 클래스에 대해 알 수 있도록 프로젝트를 빌드해야 합니다. 빌드 | 선택 MvcMusicStore를 빌드하여 프로젝트를 빌드합니다.
인덱스 작업 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.

Index 메서드 내에서 View 추가
보기 추가 대화 상자에서 보기 이름이 인덱스인지 확인합니다. 강력한 형식의 보기 만들기 옵션을 선택하고 모델 클래스 드롭다운에서 앨범(MvcMusicStore.Models)을 선택합니다. 스캐폴드 템플릿 드롭다운에서 목록을 선택합니다. 보기 엔진을 Razor 및 다른 필드에 기본값으로 두고 추가를 클릭합니다.

인덱스 뷰 추가

작업 4 - 인덱스 뷰의 스캐폴드 사용자 지정

이 작업에서는 ASP.NET MVC 스캐폴딩 기능을 사용하여 만든 간단한 보기 템플릿을 조정하여 원하는 필드를 표시합니다.

참고

ASP.NET MVC 내 의 스캐폴딩 지원은 앨범 모델의 모든 필드를 나열하는 간단한 보기 템플릿을 생성합니다. 스캐폴딩 은 강력한 형식의 보기에서 시작하는 빠른 방법을 제공합니다. 보기 템플릿을 수동으로 작성하지 않고 스캐폴딩하면 기본 템플릿이 빠르게 생성되고 생성된 코드를 수정할 수 있습니다.

만든 코드를 검토합니다. 생성된 필드 목록은 스캐폴딩 이 테이블 형식 데이터를 표시하는 데 사용하는 다음 HTML 테이블의 일부가 됩니다.

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

<테이블> 코드를 다음 코드로 바꿔 장르, 아티스트, 앨범 제목 및 가격 필드만 표시합니다. 이렇게 하면 AlbumId 및 Album Art URL 열이 삭제됩니다. 또한 GenreId 및 ArtistId 열을 변경하여 Artist.Name 및 Genre.Name 연결된 클래스 속성을 표시하고 세부 정보 링크를 제거합니다.

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

다음 설명을 변경합니다.

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

작업 5 - 애플리케이션 실행

이 작업에서는 StoreManager인덱 스 보기 템플릿이 이전 단계의 디자인에 따라 앨범 목록을 표시하는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager 로 변경하여 타이틀, 아티스트 및 장르를 표시하는 앨범 목록이 표시되는지 확인합니다.

앨범 목록 찾아보기

연습 2: HTML 도우미 추가

StoreManager 인덱스 페이지에는 한 가지 잠재적인 문제가 있습니다. 제목 및 아티스트 이름 속성은 모두 테이블 서식을 해제할 수 있을 만큼 길 수 있습니다. 이 연습에서는 사용자 지정 HTML 도우미를 추가하여 해당 텍스트를 자르는 방법을 알아봅니다.

다음 그림에서는 작은 브라우저 크기를 사용할 때 텍스트 길이 때문에 형식이 수정되는 방식을 확인할 수 있습니다.

리지 않은 텍스트가 있는 앨범 목록 찾아보 잘기 잘리지

잘리지 않은 텍스트가 있는 앨범 목록 찾아보기

작업 1 - HTML 도우미 확장

이 작업에서는 ASP.NET MVC 뷰 내에 노출된 HTML 개체에 새 메서드 Truncate를 추가합니다. 이렇게 하려면 ASP.NET MVC에서 제공하는 기본 제공 System.Web.Mvc.HtmlHelper 클래스에 대한 확장 메서드를 구현합니다.

참고

확장 메서드에 대한 자세한 내용은 이 msdn 문서를 참조하세요. https://msdn.microsoft.com/library/bb383977.aspx.

Source/Ex2-AddingAnHTMLHelper/Begin/ 폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
StoreManager의 인덱스 뷰를 엽니다. 이렇게 하려면 솔루션 탐색기 Views 폴더를 확장한 다음 StoreManager를 확장하고 Index.cshtml 파일을 엽니다.

truncate 도우미 메서드를 정의하려면 @model 지시문 아래에 다음 코드를 추가합니다.

@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

작업 2 - 페이지에서 텍스트 잘림

이 작업에서는 Truncate 메서드를 사용하여 보기 템플릿의 텍스트를 자립니다.

StoreManager의 인덱스 뷰를 엽니다. 이렇게 하려면 솔루션 탐색기 Views 폴더를 확장한 다음 StoreManager를 확장하고 Index.cshtml 파일을 엽니다.

아티스트 이름 및 앨범 제목을 표시하는 줄을 바꿉 있습니다. 이렇게 하려면 다음 줄을 바꿉다.

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

작업 3 - 애플리케이션 실행

이 작업에서는 StoreManager인덱 스 뷰 템플릿이 앨범의 제목 및 아티스트 이름을 잘리는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager 로 변경하여 제목 및 아티스트 열의 긴 텍스트가 잘리는지 확인합니다.

잘린 제목 및 아티스트 이름

연습 3: 편집 보기 만들기

이 연습에서는 매장 관리자가 앨범을 편집할 수 있도록 양식을 만드는 방법을 알아봅니다. /StoreManager/Edit/id URL(ID는 편집할 앨범의 고유 ID)을 찾아 서버에 HTTP-GET을 호출합니다.

컨트롤러 편집 작업 메서드는 데이터베이스에서 적절한 Album을 검색하고 StoreManagerViewModel 개체를 만들어 캡슐화한 다음(아티스트 및 장르 목록과 함께) 보기 템플릿에 전달하여 HTML 페이지를 사용자에게 다시 렌더링합니다. 이 페이지에는 Album 속성을 편집하기 위한 텍스트 상자와 드롭다운이 있는 양식> 요소가 포함<됩니다.

사용자가 앨범 양식 값을 업데이트하고 저장 단추를 클릭하면 /StoreManager/Edit/id에 대한 HTTP-POST 호출을 통해 변경 내용이 제출됩니다. URL은 마지막 호출에서와 동일하게 유지되지만 ASP.NET MVC는 이번에는 HTTP-POST임을 식별하므로 다른 편집 작업 메서드( [HttpPost]로 데코레이트된 메서드)를 실행합니다.

작업 1 - HTTP-GET 편집 작업 메서드 구현

이 작업에서는 편집 작업 메서드의 HTTP-GET 버전을 구현하여 데이터베이스에서 적절한 앨범을 검색하고 모든 장르 및 아티스트 목록을 검색합니다. 이 데이터를 마지막 단계에서 정의된 StoreManagerViewModel 개체로 패키지합니다. 그러면 응답을 렌더링하기 위해 보기 템플릿에 전달됩니다.

Source/Ex3-CreatingTheEditView/Begin/ 폴더에 있는 Begin솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
StoreManagerController 클래스를 엽니다. 이렇게 하려면 Controllers 폴더를 확장하고 StoreManagerController.cs를 두 번 클릭합니다.
HTTP-GET 편집 작업 메서드를 다음 코드로 바꿔 적절한 앨범과 장르 및 아티스트 목록을 검색합니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex3 StoreManagerController HTTP-GET 편집 작업)
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
참고

System.Collections.Generic 목록 대신 아티스트 및 장르용 System.Web.MvcSelectList를 사용하고 있습니다.

SelectList 는 HTML 드롭다운을 채우고 현재 선택 영역과 같은 항목을 관리하는 보다 깔끔한 방법입니다. 컨트롤러 작업에서 이러한 ViewModel 개체를 인스턴스화하고 나중에 설정하면 양식 편집 시나리오가 더 명확해집니다.

작업 2 - 편집 보기 만들기

이 작업에서는 나중에 앨범 속성을 표시하는 보기 편집 템플릿을 만듭니다.

편집 보기를 만듭니다. 이렇게 하려면 편집 작업 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다.
보기 추가 대화 상자에서 보기 이름이 편집인지 확인합니다. 강력한 형식의 보기 만들기 확인란을 선택하고 데이터 클래스 보기 드롭다운에서 앨범(MvcMusicStore.Models)을 선택합니다. 스캐폴드 템플릿 드롭다운에서 편집을 선택합니다. 다른 필드는 기본값으로 두고 추가를 클릭합니다.

편집 보기 추가

작업 3 - 애플리케이션 실행

이 작업에서는 StoreManager보기 편집 페이지에 매개 변수로 전달된 앨범에 대한 속성 값이 표시되는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Edit/1 로 변경하여 전달된 앨범에 대한 속성 값이 표시되는지 확인합니다.

앨범 편집 보기 찾아보기

작업 4 - 앨범 편집기 템플릿에서 드롭다운 구현

이 작업에서는 사용자가 아티스트 및 장르 목록에서 선택할 수 있도록 마지막 작업에서 만든 보기 템플릿에 드롭다운을 추가합니다.

모든 앨범 필드 세트 코드를 다음으로 바꿉니다.

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

참고

아티스트 및 장르를 선택하기 위한 드롭다운을 렌더링하기 위해 Html.DropDownList 도우미가 추가되었습니다. Html.DropDownList에 전달된 매개 변수는 다음과 같습니다.

양식 필드의 이름("ArtistId")입니다.
드롭다운에 대한 값의 SelectList 입니다.

작업 5 - 애플리케이션 실행

이 작업에서는 StoreManager편집 보기 페이지에 아티스트 및 장르 ID 텍스트 필드 대신 드롭다운이 표시되는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Edit/1 로 변경하여 아티스트 및 장르 ID 텍스트 필드 대신 드롭다운이 표시되는지 확인합니다.

검색

앨범 편집 보기 찾아보기, 이번에는 드롭다운

작업 6 - HTTP-POST 편집 작업 메서드 구현

보기 편집이 예상대로 표시되었으므로 이제 HTTP-POST 편집 작업 메서드를 구현하여 앨범에 대한 변경 내용을 저장해야 합니다.

필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. Controllers 폴더에서 StoreManagerController를 엽니다.
HTTP-POST 편집 작업 메서드 코드를 다음으로 바꿉니다(대체해야 하는 메서드는 두 매개 변수를 수신하는 오버로드된 버전임).

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex3 StoreManagerController HTTP-POST 편집 작업)
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
참고

이 메서드는 사용자가 보기의 저장 단추를 클릭하고 양식 값의 HTTP-POST를 서버에 다시 수행하여 데이터베이스에 유지할 때 실행됩니다. 데코레이터 [HttpPost] 는 해당 HTTP-POST 시나리오에 메서드를 사용해야 했음을 나타냅니다. 메서드는 Album 개체를 사용합니다. ASP.NET MVC는 게시된 <양식> 값에서 Album 개체를 자동으로 만듭니다.

메서드는 다음 단계를 수행합니다.
1. 모델이 유효한 경우:
  1. 컨텍스트에서 앨범 항목을 업데이트하여 수정된 개체로 표시합니다.
  2. 변경 내용을 저장하고 인덱스 보기로 리디렉션합니다.
2. 모델이 유효하지 않으면 ViewBag을 GenreId 및 ArtistId로 채운 다음, 사용자가 필요한 업데이트를 수행할 수 있도록 받은 Album 개체가 있는 뷰를 반환합니다.

작업 7 - 애플리케이션 실행

이 작업에서는 StoreManager 편집 보기 페이지에서 실제로 업데이트된 앨범 데이터를 데이터베이스에 저장하는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Edit/1로 변경합니다. 앨범 제목을 로드 로 변경하고 저장을 클릭합니다. 앨범 목록에서 앨범의 제목이 실제로 변경되었는지 확인합니다.

앨범 업데이트

연습 4: 보기 만들기 추가

이제 StoreManagerController에서 편집 기능을 지원했으므로 이 연습에서는 보기 만들기 템플릿을 추가하여 저장소 관리자가 새 앨범을 애플리케이션에 추가할 수 있도록 하는 방법을 알아봅니다.

편집 기능과 마찬가지로 StoreManagerController 클래스 내에서 두 개의 별도 메서드를 사용하여 만들기 시나리오를 구현합니다.

한 작업 방법은 저장소 관리자가 /StoreManager/Create URL을 처음 방문할 때 빈 양식을 표시합니다.
두 번째 작업 메서드는 저장소 관리자가 양식 내에서 저장 단추를 클릭하고 값을 /StoreManager/CREATE URL에 HTTP-POST로 다시 제출하는 시나리오를 처리합니다.

작업 1 - HTTP-GET 만들기 작업 메서드 구현

이 작업에서는 Create 작업 메서드의 HTTP-GET 버전을 구현하여 모든 장르 및 아티스트 목록을 검색하고 이 데이터를 StoreManagerViewModel 개체에 패키지한 다음 보기 템플릿으로 전달합니다.

Source/Ex4-AddingACreateView/Begin/ 폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 따라서 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
StoreManagerController 클래스를 엽니다. 이렇게 하려면 Controllers 폴더를 확장하고 StoreManagerController.cs를 두 번 클릭합니다.

Create action 메서드 코드를 다음으로 바꿉다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex4 StoreManagerController HTTP-GET 만들기 작업)

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

작업 2 - 보기 만들기 추가

이 작업에서는 새(비어 있는) 앨범 양식을 표시하는 보기 만들기 템플릿을 추가합니다.

만들기 작업 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.
보기 추가 대화 상자에서 보기 이름이 만들기인지 확인 합니다. 강력한 형식의 보기 만들기 옵션을 선택하고 모델 클래스 드롭다운에서 앨범(MvcMusicStore.Models)을 선택하고 스캐폴드 템플릿 드롭다운에서 만들기를 선택합니다. 다른 필드는 기본값으로 두고 추가를 클릭합니다.

추가

만들기 뷰 추가

아래와 같이 드롭다운 목록을 사용하도록 GenreId 및 ArtistId 필드를 업데이트합니다.

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

작업 3 - 애플리케이션 실행

이 작업에서는 StoreManager보기 만들기 페이지에 빈 앨범 양식이 표시되는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Create로 변경합니다. 새 앨범 속성을 채우기 위해 빈 양식이 표시되는지 확인합니다.

빈 양식으로 보기 만들기

작업 4 - HTTP-POST 만들기 작업 메서드 구현

이 작업에서는 사용자가 저장 단추를 클릭할 때 호출되는 만들기 작업 메서드의 HTTP-POST 버전을 구현합니다. 메서드는 새 앨범을 데이터베이스에 저장해야 합니다.

필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. StoreManagerController 클래스를 엽니다. 이렇게 하려면 Controllers 폴더를 확장하고 StoreManagerController.cs를 두 번 클릭합니다.

HTTP-POST 작업 메서드 코드 만들기를 다음으로 바꿉다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex4 StoreManagerController HTTP- POST 만들기 작업)

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

참고

만들기 작업은 이전 편집 작업 메서드와 매우 유사하지만 개체를 수정된 것으로 설정하는 대신 컨텍스트에 추가됩니다.

작업 5 - 애플리케이션 실행

이 작업에서는 StoreManager 보기 만들기 페이지에서 새 앨범을 만든 다음 StoreManager 인덱스 보기로 리디렉션할 수 있는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Create로 변경합니다. 다음 그림과 같이 모든 양식 필드를 새 앨범에 대한 데이터로 채웁니다.

앨범 만들기
방금 만든 새 앨범이 포함된 StoreManager 인덱스 뷰로 리디렉션되는지 확인합니다.

새 앨범 생성됨

연습 5: 삭제 처리

앨범을 삭제하는 기능은 아직 구현되지 않았습니다. 이 연습이 될 것입니다. 이전과 마찬가지로 StoreManagerController 클래스 내에서 두 개의 별도 메서드를 사용하여 Delete 시나리오를 구현합니다.

하나의 작업 메서드가 확인 양식을 표시합니다.
두 번째 작업 메서드는 양식 제출을 처리합니다.

작업 1 - HTTP-GET 삭제 작업 메서드 구현

이 작업에서는 삭제 작업 메서드의 HTTP-GET 버전을 구현하여 앨범의 정보를 검색합니다.

Source/Ex5-HandlingDeletion/Begin/ 폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
StoreManagerController 클래스를 엽니다. 이렇게 하려면 Controllers 폴더를 확장하고 StoreManagerController.cs를 두 번 클릭합니다.
컨트롤러 삭제 작업은 이전 Store Details 컨트롤러 작업과 정확히 동일합니다. URL에 제공된 ID를 사용하여 데이터베이스에서 앨범 개체를 쿼리하고 적절한 보기를 반환합니다. 이렇게 하려면 HTTP-GET 삭제 작업 메서드 코드를 다음으로 바꿉 있습니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex5 삭제 처리 HTTP-GET 삭제 작업)
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
Delete 작업 메서드 내부를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 그러면 보기 추가 대화 상자가 표시됩니다.
보기 추가 대화 상자에서 보기 이름이 삭제인지 확인 합니다. 강력한 형식의 보기 만들기 옵션을 선택하고 모델 클래스 드롭다운에서 앨범(MvcMusicStore.Models)을 선택합니다. 스캐폴드 템플릿 드롭다운에서 삭제를 선택합니다. 다른 필드는 기본값으로 두고 추가를 클릭합니다.

삭제

삭제 보기 추가

삭제 템플릿은 모델의 모든 필드를 표시합니다. 앨범 제목만 표시합니다. 이렇게 하려면 보기의 내용을 다음 코드로 바꿉니다.

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

작업 2 - 애플리케이션 실행

이 작업에서는 StoreManager보기 삭제 페이지에 확인 삭제 양식이 표시되는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager로 변경합니다. 삭제를 클릭하여 삭제할 앨범 하나를 선택하고 새 보기가 업로드되었는지 확인합니다.

앨범 삭제

작업 3- HTTP-POST 삭제 작업 메서드 구현

이 작업에서는 사용자가 삭제 단추를 클릭할 때 호출되는 삭제 작업 메서드의 HTTP-POST 버전을 구현합니다. 메서드는 데이터베이스에서 앨범을 삭제해야 합니다.

필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다. StoreManagerController 클래스를 엽니다. 이렇게 하려면 Controllers 폴더를 확장하고 StoreManagerController.cs를 두 번 클릭합니다.

HTTP-POST 삭제 작업 메서드 코드를 다음으로 바꿉다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex5 삭제 처리 HTTP-POST 삭제 작업)

//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

작업 4 - 애플리케이션 실행

이 작업에서는 StoreManager 보기 삭제 페이지에서 앨범을 삭제한 다음 StoreManager 인덱스 보기로 리디렉션할 수 있는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager로 변경합니다. 삭제를 클릭하여 삭제할 앨범 하나를 선택합니다 .삭제 단추를 클릭하여 삭제를 확인합니다.

앨범 삭제
앨범이 인덱스 페이지에 표시되지 않으므로 삭제되었는지 확인합니다.

연습 6: 유효성 검사 추가

현재 있는 양식 만들기 및 편집은 어떤 종류의 유효성 검사도 수행하지 않습니다. 사용자가 필수 필드를 비워 두거나 가격 필드에 문자를 입력하면 첫 번째 오류가 데이터베이스에서 발생합니다.

모델 클래스에 데이터 주석을 추가하여 애플리케이션에 유효성 검사를 추가할 수 있습니다. 데이터 주석을 사용하면 모델 속성에 적용하려는 규칙을 설명할 수 있으며, ASP.NET MVC는 사용자에게 적절한 메시지를 적용하고 표시할 수 있습니다.

작업 1 - 데이터 주석 추가

이 작업에서는 앨범 모델에 데이터 주석을 추가하여 적절한 경우 만들기 및 편집 페이지에 유효성 검사 메시지를 표시합니다.

간단한 Model 클래스의 경우 Data Annotation 추가는 System.ComponentModel.DataAnnotation에 대한 using 문을 추가한 다음 적절한 속성에 [필수] 특성을 배치하여 처리됩니다. 다음 예제에서는 Name 속성을 보기의 필수 필드로 만듭니다.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

엔터티 데이터 모델이 생성되는 이 애플리케이션과 같은 경우 좀 더 복잡합니다. 모델 클래스에 직접 데이터 주석을 추가한 경우 데이터베이스에서 모델을 업데이트하면 덮어씁니다. 대신 메타데이터 부분 클래스를 사용하여 주석을 저장하고 [MetadataType] 특성을 사용하여 모델 클래스와 연결할 수 있습니다.

Source/Ex6-AddingValidation/Begin/ 폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
Models 폴더에서 Album.cs를 엽니다.
Album.cs 콘텐츠를 강조 표시된 코드로 바꿔 다음과 같이 표시합니다.

참고

[DisplayFormat(ConvertEmptyStringToNull=false) 줄은 데이터 원본에서 데이터 필드가 업데이트될 때 모델의 빈 문자열이 null로 변환되지 않음을 나타냅니다. 이 설정은 데이터 주석이 필드의 유효성을 검사하기 전에 Entity Framework가 모델에 null 값을 할당할 때 예외를 방지합니다.

(코드 조각 - MVC 4 도우미 및 양식 및 유효성 검사 ASP.NET - Ex6 Album 메타데이터 부분 클래스)
```
namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}
```
참고

이 Album partial 클래스에는 데이터 주석에 대한 AlbumMetaData 클래스를 가리키는 MetadataType 특성이 있습니다. 다음은 앨범 모델에 주석을 추가하는 데 사용하는 데이터 주석 특성 중 일부입니다.
- 필수 - 속성이 필수 필드임을 나타냅니다.
- DisplayName - 양식 필드 및 유효성 검사 메시지에 사용할 텍스트를 정의합니다.
- DisplayFormat - 데이터 필드를 표시하고 서식을 지정하는 방법을 지정합니다.
- StringLength - 문자열 필드의 최대 길이를 정의합니다.
- 범위 - 숫자 필드의 최대값과 최솟값을 제공합니다.
- ScaffoldColumn - 편집기 양식에서 필드를 숨길 수 있습니다.

작업 2 - 애플리케이션 실행

이 작업에서는 마지막 작업에서 선택한 표시 이름을 사용하여 페이지 만들기 및 편집에서 필드의 유효성을 검사하는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. URL을 /StoreManager/Create로 변경합니다. 표시 이름이 partial 클래스의 이름과 일치하는지 확인합니다(예: AlbumArtUrl 대신 앨범 아트 URL).
양식을 채우지 않고 만들기를 클릭합니다. 해당 유효성 검사 메시지를 가져오는지 확인합니다.

만들기 페이지의 유효성이 검사된 필드
편집 페이지에서도 동일한 상황이 발생하는지 확인할 수 있습니다. URL을 /StoreManager/Edit/1로 변경하고 표시 이름이 Partial 클래스의 이름(예: AlbumArtUrl 대신 앨범 아트 URL)과 일치하는지 확인합니다. 제목 및 가격 필드를 비우고 저장을 클릭합니다. 해당 유효성 검사 메시지를 가져오는지 확인합니다.

편집 페이지의 유효성이 검사된 필드

연습 7: 클라이언트 쪽에서 눈에 거슬리지 않는 jQuery 사용

이 연습에서는 클라이언트 쪽에서 MVC 4 눈에 거슬리지 않는 jQuery 유효성 검사를 사용하도록 설정하는 방법을 알아봅니다.

참고

눈에 거슬리지 않는 jQuery는 데이터-ajax 접두사 JavaScript를 사용하여 인라인 클라이언트 스크립트를 침입적으로 내보내는 대신 서버에서 작업 메서드를 호출합니다.

작업 1 - 눈에 거슬리지 않는 jQuery를 사용하도록 설정하기 전에 애플리케이션 실행

이 작업에서는 두 유효성 검사 모델을 비교하기 위해 jQuery를 포함하기 전에 애플리케이션을 실행합니다.

Source/Ex7-UnobtrusivejQueryValidation/Begin/ 폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 End 솔루션을 계속 사용할 수 있습니다.
1. 제공된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여솔루션을 빌드 | 합니다.
  
  참고
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 따라서 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. /StoreManager/Create를 찾아보고 양식을 채우지 않고 만들기를 클릭하여 유효성 검사 메시지가 표시되는지 확인합니다.

클라이언트 유효성 검사 사용 안 함

브라우저에서 HTML 소스 코드를 엽니다.

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

작업 2 - 눈에 거슬리지 않는 클라이언트 유효성 검사 사용

이 작업에서는 모든 새 ASP.NET MVC 4 프로젝트에서 기본적으로 false로 설정된Web.config파일에서 jQuery 눈에 거슬리지 않는 클라이언트 유효성 검사를 사용하도록 설정합니다. 또한 jQuery 눈에 거슬리지 않는 클라이언트 유효성 검사가 작동하도록 하는 데 필요한 스크립트 참조를 추가합니다.

프로젝트 루트에서 Web.Config 파일을 열고 ClientValidationEnabled 및 UnobtrusiveJavaScriptEnabled 키 값이 true로 설정되어 있는지 확인합니다.
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
참고

Global.asax.cs에서 코드별로 클라이언트 유효성 검사를 사용하도록 설정하여 동일한 결과를 얻을 수도 있습니다.

HtmlHelper.ClientValidationEnabled = true;

또한 ClientValidationEnabled 특성을 모든 컨트롤러에 할당하여 사용자 지정 동작을 수행할 수 있습니다.
Views\StoreManager에서 Create.cshtml을 엽니다.
다음 스크립트 파일 인 jquery.validate 및 jquery.validate.unobtrusive가 "~/bundles/jqueryval" 번들을 통해 보기에서 참조되는지 확인합니다.
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
참고

이러한 모든 jQuery 라이브러리는 MVC 4 새 프로젝트에 포함되어 있습니다. 프로젝트의 /Scripts 폴더에서 더 많은 라이브러리를 찾을 수 있습니다.

이 유효성 검사 라이브러리가 작동하도록 하려면 jQuery 프레임워크 라이브러리에 대한 참조를 추가해야 합니다. 이 참조는 _Layout.cshtml 파일에 이미 추가되어 있으므로 이 특정 보기에 추가할 필요가 없습니다.

작업 3 - 눈에 거슬리지 않는 jQuery 유효성 검사를 사용하여 애플리케이션 실행

이 작업에서는 사용자가 새 앨범을 만들 때 StoreManager 만들기 뷰 템플릿이 jQuery 라이브러리를 사용하여 클라이언트 쪽 유효성 검사를 수행하는지 테스트합니다.

F5 키를 눌러 애플리케이션을 실행합니다.
프로젝트는 홈페이지에서 시작됩니다. /StoreManager/Create를 찾아보고 양식을 채우지 않고 만들기를 클릭하여 유효성 검사 메시지가 표시되는지 확인합니다.

jQuery를 사용하도록 설정된 클라이언트 유효성 검사

브라우저에서 보기 만들기에 대한 소스 코드를 엽니다.

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

참고

각 클라이언트 유효성 검사 규칙에 대해 눈에 거슬리지 않는 jQuery는 data-val-rulename="message"를 사용하여 특성을 추가합니다. 다음은 눈에 띄지 않는 jQuery가 클라이언트 유효성 검사를 수행하기 위해 html 입력 필드에 삽입하는 태그 목록입니다.

Data-val
Data-val-number
Data-val-range
Data-val-range-min / Data-val-range-max
Data-val-required
Data-val-length
Data-val-length-max / Data-val-length-min

모든 데이터 값은 모델 데이터 주석으로 채워집니다. 그런 다음 서버 쪽에서 작동하는 모든 논리를 클라이언트 쪽에서 실행할 수 있습니다. 예를 들어 Price 특성에는 모델에 다음과 같은 데이터 주석이 있습니다.

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

눈에 거슬리지 않는 jQuery를 사용한 후 생성된 코드는 다음과 같습니다.

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

요약

이 Hands-On 랩을 완료하면 사용자가 다음을 사용하여 데이터베이스에 저장된 데이터를 변경할 수 있도록 하는 방법을 알아보았습니다.

인덱스, 만들기, 편집, 삭제와 같은 컨트롤러 작업
HTML 테이블에 속성을 표시하기 위한 MVC의 스캐폴딩 기능 ASP.NET
사용자 환경을 개선하기 위한 사용자 지정 HTML 도우미
HTTP-GET 또는 HTTP-POST 호출에 반응하는 작업 메서드
만들기 및 편집과 같은 유사한 보기 템플릿에 대한 공유 편집기 템플릿
드롭다운과 같은 양식 요소
모델 유효성 검사에 대한 데이터 주석
jQuery 눈에 거슬리지 않는 라이브러리를 사용한 클라이언트 쪽 유효성 검사

부록 A: 웹용 Visual Studio Express 2012 설치

Microsoft 웹 플랫폼 설치 관리자 사용하여 웹용 Microsoft Visual Studio Express 2012 또는 다른 "Express" 버전을 설치할 수 있습니다. 다음 지침은 Microsoft 웹 플랫폼 설치 관리자 사용하여 Visual Studio Express 2012 for Web을 설치하는 데 필요한 단계를 안내합니다.

[https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 이를 열고 "Windows Azure SDK를 사용하는 웹용 Visual Studio Express 2012" 제품을 검색할 수 있습니다.
지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.
웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

설치 Visual Studio Express
모든 제품의 라이선스 및 약관을 읽고 동의 를 클릭하여 계속합니다.

사용 조건 동의
다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

설치 진행률
설치가 완료되면 마침을 클릭합니다.

설치 완료됨
종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.
웹용 Visual Studio Express 열려면 시작 화면으로 이동하여 "VS Express" 쓰기를 시작한 다음 웹용 VS Express 타일을 클릭합니다.

웹용 VS Express 타일

부록 B: 코드 조각 사용

코드 조각을 사용하면 필요한 모든 코드를 손쉽게 사용할 수 있습니다. 랩 문서에서는 다음 그림과 같이 언제 사용할 수 있는지 정확히 알려줍니다.

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

키보드를 사용하여 코드 조각을 추가하려면(C#에만 해당)

코드를 삽입할 위치에 커서를 놓습니다.
공백이나 하이픈 없이 코드 조각 이름을 입력하기 시작합니다.
IntelliSense가 일치하는 코드 조각의 이름을 표시하는지 확인합니다.
올바른 코드 조각을 선택하거나 전체 코드 조각의 이름이 선택될 때까지 계속 입력합니다.
Tab 키를 두 번 눌러 커서 위치에 코드 조각을 삽입합니다.

코드 조각 이름 입력 시작 코드 조각

코드 조각 이름 입력 시작

Tab 키를 눌러 강조 표시된 코드 조각을 선택 .

Tab 키를 눌러 강조 표시된 코드 조각을 선택합니다.

Tab 키를 다시 누르면 코드 조각이 .

Tab 키를 다시 누르면 코드 조각이 확장됩니다.

마우스를 사용하여 코드 조각을 추가하려면(C#, Visual Basic 및 XML) 1. 코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭합니다.

코드 조각 삽입, 내 코드 조각을 차례로 선택합니다.
목록에서 관련 조각을 클릭하여 선택합니다.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 마우스 .

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 선택합니다.

목록에서 관련 코드 조각을 선택하고 목록에서 관련 코드 선택합니다.

목록에서 관련 코드 조각을 클릭하여 선택합니다.

ASP.NET MVC 4 도우미, 폼 및 유효성 검사

목표

사전 요구 사항

설치 프로그램

연습

연습 1: Store Manager 컨트롤러 및 해당 인덱스 보기 만들기

작업 1 - StoreManagerController 만들기

작업 2 - StoreManager 인덱스 사용자 지정

작업 3 - 인덱스 뷰 만들기

작업 4 - 인덱스 뷰의 스캐폴드 사용자 지정

작업 5 - 애플리케이션 실행

연습 2: HTML 도우미 추가

작업 1 - HTML 도우미 확장

작업 2 - 페이지에서 텍스트 잘림

작업 3 - 애플리케이션 실행

연습 3: 편집 보기 만들기

작업 1 - HTTP-GET 편집 작업 메서드 구현

작업 2 - 편집 보기 만들기

작업 3 - 애플리케이션 실행

작업 4 - 앨범 편집기 템플릿에서 드롭다운 구현

작업 5 - 애플리케이션 실행

작업 6 - HTTP-POST 편집 작업 메서드 구현

작업 7 - 애플리케이션 실행

연습 4: 보기 만들기 추가

작업 1 - HTTP-GET 만들기 작업 메서드 구현

작업 2 - 보기 만들기 추가

작업 3 - 애플리케이션 실행

작업 4 - HTTP-POST 만들기 작업 메서드 구현

작업 5 - 애플리케이션 실행

연습 5: 삭제 처리

작업 1 - HTTP-GET 삭제 작업 메서드 구현

작업 2 - 애플리케이션 실행

작업 3- HTTP-POST 삭제 작업 메서드 구현

작업 4 - 애플리케이션 실행

연습 6: 유효성 검사 추가

작업 1 - 데이터 주석 추가

작업 2 - 애플리케이션 실행

연습 7: 클라이언트 쪽에서 눈에 거슬리지 않는 jQuery 사용

작업 1 - 눈에 거슬리지 않는 jQuery를 사용하도록 설정하기 전에 애플리케이션 실행

작업 2 - 눈에 거슬리지 않는 클라이언트 유효성 검사 사용

작업 3 - 눈에 거슬리지 않는 jQuery 유효성 검사를 사용하여 애플리케이션 실행

요약

부록 A: 웹용 Visual Studio Express 2012 설치

부록 B: 코드 조각 사용

피드백

피드백

추가 리소스