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

웹 캠프 팀By Web Camps Team

웹 캠프 교육 키트 다운로드Download Web Camps Training Kit

ASP.NET MVC 4 모델 및 데이터 액세스 실습 랩에서는 데이터베이스의 데이터를 로드 하 고 표시 합니다.In ASP.NET MVC 4 Models and Data Access Hands-on Lab, you have been loading and displaying data from the database. 이 실습 랩에서는 음악 스토어 응용 프로그램에 해당 데이터를 편집 하는 기능을 추가 합니다.In this Hands-on Lab, you will add to the Music Store application the ability to edit that data.

이러한 목표를 염두에 두면 먼저 앨범의 만들기, 읽기, 업데이트 및 삭제 (CRUD) 작업을 지 원하는 컨트롤러를 만듭니다.With that goal in mind, you will first create the controller that will support the Create, Read, Update and Delete (CRUD) actions of albums. ASP.NET MVC의 스 캐 폴딩 기능을 활용 하 여 HTML 테이블에 앨범 속성을 표시 하는 인덱스 뷰 템플릿을 생성 합니다.You will generate an Index View template taking advantage of ASP.NET MVC's scaffolding feature to display the albums' properties in an HTML table. 이 보기를 향상 시키려면 긴 설명을 잘라내는 사용자 지정 HTML 도우미를 추가 합니다.To enhance that view, you will add a custom HTML helper that will truncate long descriptions.

그런 다음 드롭다운과 같은 폼 요소를 사용 하 여 데이터베이스의 앨범을 변경할 수 있는 편집 및 만들기 뷰를 추가 합니다.Afterwards, you will add the Edit and Create Views that will let you alter the albums in the database, with the help of form elements like dropdowns.

마지막으로 사용자가 앨범을 삭제 하 고 입력의 유효성을 검사 하 여 잘못 된 데이터를 입력 하는 것을 방지할 수 있습니다.Lastly, you will let users delete an album and also you will prevent them from entering wrong data by validating their input.

이 실습 랩에서는 ASP.NET MVC에 대 한 기본 지식이 있다고 가정 합니다.This Hands-on Lab assumes you have basic knowledge of ASP.NET MVC. 이전에 ASP.NET mvc 를 사용 하지 않은 경우 ASP.NET mvc 기본 실습 실습을 사용 하는 것이 좋습니다.If you have not used ASP.NET MVC before, we recommend you to go over ASP.NET MVC Fundamentals Hands-on Lab.

이 랩에서는 원본 폴더에 제공 된 샘플 웹 응용 프로그램에 사소한 변경 사항을 적용 하 여 앞에서 설명한 향상 된 기능 및 새로운 기능을 안내 합니다.This lab walks you through the enhancements and new features previously described by applying minor changes to a sample Web application provided in the Source folder.

Note

모든 샘플 코드와 코드 조각은 Microsoft 웹/WebCampTrainingKit 릴리스에서제공 되는 웹 캠프 교육 키트에 포함 되어 있습니다.All sample code and snippets are included in the Web Camps Training Kit, available at Microsoft-Web/WebCampTrainingKit Releases. 이 랩에서 관련 된 프로젝트는 ASP.NET MVC 4 도우미, 폼 및 유효성 검사에서 사용할 수 있습니다.The project specific to this lab is available at ASP.NET MVC 4 Helpers, Forms and Validation.

목표Objectives

이 실습 랩에서는 다음 방법에 대해 알아봅니다.In this Hands-On Lab, you will learn how to:

  • CRUD 작업을 지 원하는 컨트롤러 만들기Create a controller to support CRUD operations
  • HTML 테이블에 엔터티 속성을 표시 하는 인덱스 뷰 생성Generate an Index View to display entity properties in an HTML table
  • 사용자 지정 HTML 도우미 추가Add a custom HTML helper
  • 편집 보기 만들기 및 사용자 지정Create and customize an Edit View
  • HTTP GET 또는 HTTP POST 호출에 반응 하는 동작 메서드를 구분 합니다.Differentiate between action methods that react to either HTTP-GET or HTTP-POST calls
  • 만들기 보기 추가 및 사용자 지정Add and customize a Create View
  • 엔터티 삭제를 처리 합니다.Handle the deletion of an entity
  • 사용자 입력 유효성 검사Validate user input

사전 요구 사항Prerequisites

이 랩을 완료 하려면 다음 항목이 있어야 합니다.You must have the following items to complete this lab:

설치 프로그램Setup

코드 조각 설치Installing Code Snippets

편의를 위해이 랩에서 관리 하는 대부분의 코드는 Visual Studio 코드 조각으로 사용할 수 있습니다.For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. 코드 조각을 설치 하려면 .\Source\Setup\CodeSnippets.vsi 파일을 실행 합니다.To install the code snippets run .\Source\Setup\CodeSnippets.vsi file.

Visual Studio Code 코드 조각을 잘 모르는 경우이를 사용 하는 방법을 알아보려면이 문서의 부록 B: 코드 조각"사용 "부록을 참조 하세요.If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the appendix from this document "Appendix B: Using Code Snippets".


실습Exercises

다음 연습은이 실습 랩을 구성 합니다.The following exercises make up this Hands-On Lab:

  1. 저장소 관리자 컨트롤러 및 해당 인덱스 뷰 만들기Creating the Store Manager controller and its Index view
  2. HTML 도우미 추가Adding an HTML Helper
  3. 편집 뷰 만들기Creating the Edit View
  4. Create View 추가Adding a Create View
  5. 삭제 처리Handling Deletion
  6. 유효성 검사 추가Adding Validation
  7. 클라이언트 쪽에서에이 없는 jQuery 사용Using Unobtrusive jQuery at Client Side

Note

각 연습에는 연습을 완료 한 후 얻게 되는 결과 솔루션을 포함 하는 폴더가 함께 제공 됩니다.Each exercise is accompanied by an End folder containing the resulting solution you should obtain after completing the exercises. 연습을 진행 하는 데 도움이 필요한 경우이 솔루션을 지침으로 사용할 수 있습니다.You can use this solution as a guide if you need additional help working through the exercises.

이 랩을 완료 하는 데 소요 되는 예상 시간: 60 분Estimated time to complete this lab: 60 minutes

연습 1: Store Manager 컨트롤러 및 해당 인덱스 보기 만들기Exercise 1: Creating the Store Manager controller and its Index view

이 연습에서는 CRUD 작업을 지원 하기 위해 새 컨트롤러를 만드는 방법, 데이터베이스에서 앨범 목록을 반환 하도록 인덱스 작업 메서드를 사용자 지정 하 고, 마지막으로 ASP.NET MVC의 스 캐 폴딩을 활용 하 여 인덱스 뷰 템플릿을 생성 하는 방법에 대해 설명 합니다. HTML 테이블에 앨범 속성을 표시 하는 기능입니다.In this exercise, you will learn how to create a new controller to support CRUD operations, customize its Index action method to return a list of albums from the database and finally generating an Index View template taking advantage of ASP.NET MVC's scaffolding feature to display the albums' properties in an HTML table.

작업 1-StoreManagerController 만들기Task 1 - Creating the StoreManagerController

이 작업에서는 CRUD 작업을 지원 하기 위해 StoreManagerController 라는 새 컨트롤러를 만듭니다.In this task, you will create a new controller called StoreManagerController to support CRUD operations.

  1. Source/Ex1-CreatingTheStoreManagerController/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex1-CreatingTheStoreManagerController/Begin/ folder.

    1. 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.You will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. 새 컨트롤러를 추가 합니다.Add a new controller. 이렇게 하려면 솔루션 탐색기 내의 Controllers 폴더를 마우스 오른쪽 단추로 클릭 하 고 추가 를 선택한 다음 컨트롤러 명령을 클릭 합니다.To do this, right-click the Controllers folder within the Solution Explorer, select Add and then the Controller command. 컨트롤러 이름을 StoreManagerController 로 변경 하 고 빈 읽기/쓰기 동작이 포함 된 MVC 컨트롤러 옵션을 선택 했는지 확인 합니다.Change the Controller Name to StoreManagerController and make sure the option MVC controller with empty read/write actions is selected. 추가를 클릭합니다.Click Add.

    컨트롤러 추가 대화 상자Add controller dialog

    컨트롤러 추가 대화 상자Add Controller Dialog

    새 컨트롤러 클래스가 생성 됩니다.A new Controller class is generated. 읽기/쓰기에 대 한 작업을 추가 하도록 지정 했으므로 이러한 작업에 대해 스텁 메서드를 사용 하 여 일반적인 CRUD 작업을 수행 하 고 응용 프로그램 관련 논리를 포함 하 라는 메시지를 표시 하 여 일반적인 CRUD 작업을 만듭니다.Since you indicated to add actions for read/write, stub methods for those, common CRUD actions are created with TODO comments filled in, prompting to include the application specific logic.

작업 2-StoreManager 인덱스 사용자 지정Task 2 - Customizing the StoreManager Index

이 태스크에서는 StoreManager Index 동작 메서드를 사용자 지정 하 여 데이터베이스의 앨범 목록과 함께 뷰를 반환 합니다.In this task, you will customize the StoreManager Index action method to return a View with the list of albums from the database.

  1. StoreManagerController 클래스에서 다음 using 지시문을 추가 합니다.In the StoreManagerController class, add the following using directives.

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-MvcMusicStore를 사용 하 여 Ex1)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex1 using MvcMusicStore)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. MusicStoreEntities의 인스턴스를 보유할 필드를 StoreManagerController 에 추가 합니다 .Add a field to the StoreManagerController to hold an instance of MusicStoreEntities.

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex1 MusicStoreEntities)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex1 MusicStoreEntities)

    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();
    
  3. StoreManagerController Index 작업을 구현 하 여 앨범 목록이 포함 된 뷰를 반환 합니다.Implement the StoreManagerController Index action to return a View with the list of albums.

    컨트롤러 작업 논리는 앞에서 작성 한 StoreController의 인덱스 작업과 매우 비슷합니다.The Controller action logic will be very similar to the StoreController's Index action written earlier. LINQ를 사용 하 여 표시할 장르 및 음악가 정보를 비롯 한 모든 앨범을 검색 합니다.Use LINQ to retrieve all albums, including Genre and Artist information for display.

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex1 StoreManagerController Index)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex1 StoreManagerController Index)

    //
    // 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-인덱스 뷰 만들기Task 3 - Creating the Index View

이 태스크에서는 Storemanager 컨트롤러에서 반환 된 앨범 목록을 표시 하는 인덱스 뷰 템플릿을 만듭니다.In this task, you will create the Index View template to display the list of albums returned by the StoreManager Controller.

  1. 새 뷰 템플릿을 만들기 전에 보기 추가 대화 상자 에서 사용할 앨범 클래스에 대해 알 수 있도록 프로젝트를 빌드해야 합니다.Before creating the new View template, you should build the project so that the Add View Dialog knows about the Album class to use. 빌드 선택 | MvcMusicStore를 빌드하여 프로젝트를 빌드합니다.Select Build | Build MvcMusicStore to build the project.

  2. 인덱스 동작 메서드 내부를 마우스 오른쪽 단추로 클릭 하 고 뷰 추가를 선택 합니다.Right-click inside the Index action method and select Add View. 그러면 보기 추가 대화 상자가 표시 됩니다.This will bring up the Add View dialog.

    뷰 추가Add view

    Index 메서드 내에서 뷰 추가Adding a View from within the Index method

  3. 보기 추가 대화 상자에서 뷰 이름이 Index인지 확인 합니다.In the Add View dialog, verify that the View Name is Index. 강력한 형식의 뷰 만들기 옵션을 선택 하 고 모델 클래스 드롭다운에서 앨범 (MvcMusicStore) 을 선택 합니다.Select the Create a strongly-typed view option, and select Album (MvcMusicStore.Models) from the Model class drop-down. 스 캐 폴드 템플릿 드롭다운에서 목록 을 선택 합니다.Select List from the Scaffold template drop-down. 뷰 엔진Razor 로 두고 다른 필드는 기본값으로 유지 한 다음 추가를 클릭 합니다.Leave the View engine to Razor and the other fields with their default value and then click Add.

    인덱스 뷰 추가Adding an index view

    인덱스 뷰 추가Adding an Index View

작업 4-인덱스 뷰의 스 캐 폴드 사용자 지정Task 4 - Customizing the scaffold of the Index View

이 작업에서는 ASP.NET MVC 스 캐 폴딩 기능을 사용 하 여 만든 단순 보기 템플릿을 조정 하 여 원하는 필드를 표시 하도록 합니다.In this task, you will adjust the simple View template created with ASP.NET MVC scaffolding feature to have it display the fields you want.

Note

ASP.NET MVC 내에서 스 캐 폴딩 지원은 앨범 모델의 모든 필드를 나열 하는 간단한 뷰 템플릿을 생성 합니다.The scaffolding support within ASP.NET MVC generates a simple View template which lists all fields in the Album model. 스 캐 폴딩 은 강력한 형식의 뷰를 시작 하는 빠른 방법을 제공 합니다. 즉, 뷰 템플릿을 수동으로 작성 하지 않고 스 캐 폴딩을 빠르게 기본 템플릿을 생성 한 다음 생성 된 코드를 수정할 수 있습니다.Scaffolding provides a quick way to get started on a strongly typed view: rather than having to write the View template manually, scaffolding quickly generates a default template and then you can modify the generated code.

  1. 만든 코드를 검토 합니다.Review the code created. 생성 된 필드 목록은 스 캐 폴딩 이 표 형식 데이터를 표시 하는 데 사용 하는 다음 HTML 테이블에 포함 됩니다.The generated list of fields will be part of the following HTML table that Scaffolding is using for displaying tabular data.

    @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>
    
  2. <테이블> 코드를 다음 코드로 바꿔 장르, 음악가, 앨범 제목가격 필드만 표시 합니다.Replace the <table> code with the following code to display only the Genre, Artist, Album Title, and Price fields. 그러면 AlbumId앨범 아트 URL 열이 삭제 됩니다.This deletes the AlbumId and Album Art URL columns. 또한 GenreId 및 ArtistId 열을 변경 하 여 Artist.NameGenre.Name의 연결 된 클래스 속성을 표시 하 고 세부 정보 링크를 제거 합니다.Also, it changes GenreId and ArtistId columns to display their linked class properties of Artist.Name and Genre.Name, and removes the Details link.

    <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>
    
  3. 다음 설명을 변경 합니다.Change the following descriptions.

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

작업 5-응용 프로그램 실행Task 5 - Running the Application

이 태스크에서는 Storemanager 인덱스 뷰 템플릿이 이전 단계의 디자인에 따라 앨범 목록을 표시 하는지 테스트 합니다.In this task, you will test that the StoreManager Index View template displays a list of albums according to the design of the previous steps.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /Storemanager 로 변경 하 여 앨범 목록이 표시 되는지 확인 하 고 제목, 음악가장르를 표시 합니다.Change the URL to /StoreManager to verify that a list of albums is displayed, showing their Title, Artist and Genre.

    앨범 목록 찾아보기Browsing the list of albums

    앨범 목록 찾아보기Browsing the list of albums

연습 2: HTML 도우미 추가Exercise 2: Adding an HTML Helper

StoreManager 인덱스 페이지에는 한 가지 잠재적인 문제가 있습니다. Title 및 음악가 이름 속성은 모두 테이블 서식 지정을 throw 할 수 있을 정도로 길어질 수 있습니다.The StoreManager Index page has one potential issue: Title and Artist Name properties can both be long enough to throw off the table formatting. 이 연습에서는 해당 텍스트를 잘라내는 사용자 지정 HTML 도우미를 추가 하는 방법에 대해 설명 합니다.In this exercise you will learn how to add a custom HTML helper to truncate that text.

다음 그림에서는 작은 브라우저 크기를 사용할 때 텍스트의 길이 때문에 형식이 수정 되는 방법을 확인할 수 있습니다.In the following figure, you can see how the format is modified because of the length of the text when you use a small browser size.

잘리지 않은 텍스트를 사용 하 여 앨범 목록 찾아보기Browsing the list of Albums with not truncated text

잘리지 않은 텍스트를 사용 하 여 앨범 목록 찾아보기Browsing the list of Albums with not truncated text

작업 1-HTML 도우미 확장Task 1 - Extending the HTML Helper

이 작업에서는 ASP.NET MVC 뷰 내에서 노출 되는 HTML 개체에 새 메서드 Truncate 를 추가 합니다.In this task, you will add a new method Truncate to the HTML object exposed within ASP.NET MVC Views. 이렇게 하려면 ASP.NET MVC에서 제공 하는 기본 제공 system.string 도우미 클래스에 대 한 확장 메서드 를 구현 합니다.To do this, you will implement an extension method to the built-in System.Web.Mvc.HtmlHelper class provided by ASP.NET MVC.

Note

확장 메서드에대 한 자세한 내용은이 msdn 문서를 참조 하세요.To read more about Extension Methods, please visit this msdn article. https://msdn.microsoft.com/library/bb383977.aspx를 참조하세요.https://msdn.microsoft.com/library/bb383977.aspx.

  1. Source/Ex2-AddingAnHTMLHelper/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex2-AddingAnHTMLHelper/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. StoreManager의 인덱스 뷰를 엽니다.Open StoreManager's Index View. 이렇게 하려면 솔루션 탐색기에서 Views 폴더를 확장 하 고 storemanager 를 확장 한 다음 Index. cshtml 파일을 엽니다.To do this, in the Solution Explorer expand the Views folder, then the StoreManager and open the Index.cshtml file.

  3. 자르기 도우미 메서드를 정의 하려면 @model 지시문 아래에 다음 코드를 추가 합니다.Add the following code below the @model directive to define the Truncate helper method.

    @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-페이지에서 텍스트 잘라내기Task 2 - Truncating Text in the Page

이 태스크에서는 truncate 메서드를 사용 하 여 뷰 템플릿의 텍스트를 자릅니다.In this task, you will use the Truncate method to truncate the text in the View template.

  1. StoreManager의 인덱스 뷰를 엽니다.Open StoreManager's Index View. 이렇게 하려면 솔루션 탐색기에서 Views 폴더를 확장 하 고 storemanager 를 확장 한 다음 Index. cshtml 파일을 엽니다.To do this, in the Solution Explorer expand the Views folder, then the StoreManager and open the Index.cshtml file.

  2. 음악가 이름 및 앨범의 제목을표시 하는 줄을 바꿉니다.Replace the lines that show the Artist Name and Album's Title. 이렇게 하려면 다음 줄을 바꿉니다.To do this, replace the following lines.

    <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-응용 프로그램 실행Task 3 - Running the Application

이 태스크에서는 Storemanager 인덱스 뷰 템플릿이 앨범의 제목 및 음악가 이름을 잘라내는 지 테스트 합니다.In this task, you will test that the StoreManager Index View template truncates the Album's Title and Artist Name.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /Storemanager 로 변경 하 여 제목음악가 열의 긴 텍스트가 잘리는 지 확인 합니다.Change the URL to /StoreManager to verify that long texts in the Title and Artist column are truncated.

    잘린 제목 및 음악가 이름Truncated titles and artists names

    잘린 제목 및 음악가 이름Truncated Titles and Artist Names

연습 3: 편집 뷰 만들기Exercise 3: Creating the Edit View

이 연습에서는 상점 관리자가 앨범을 편집할 수 있도록 하는 양식을 만드는 방법을 배웁니다.In this exercise, you will learn how to create a form to allow store managers to edit an Album. /StoreManager/Edit/id URL (id 를 편집할 앨범의 고유 id)을 탐색 하므로 서버에 대 한 HTTP GET 호출을 수행 합니다.They will browse the /StoreManager/Edit/id URL (id being the unique id of the album to edit), thus making an HTTP-GET call to the server.

컨트롤러 편집 작업 메서드는 데이터베이스에서 적절 한 앨범을 검색 하 고,이를 캡슐화 하는 StoreManagerViewModel 개체를 만든 다음,이를 보기 템플릿에 전달 하 여 HTML 페이지를 사용자에 게 다시 렌더링 합니다.The Controller Edit action method will retrieve the appropriate Album from the database, create a StoreManagerViewModel object to encapsulate it (along with a list of Artists and Genres), and then pass it off to a View template to render the HTML page back to the user. 이 페이지에는 앨범 속성을 편집할 수 있는 텍스트 상자 및 드롭다운이 있는 <폼> 요소가 포함 됩니다.This page will contain a <form> element with textboxes and dropdowns for editing the Album properties.

사용자가 앨범 양식 값을 업데이트 하 고 저장 단추를 클릭 하면 HTTP POST 호출을 통해 변경 내용이 /StoreManager/Edit/id로 다시 전송 됩니다. URL은 마지막 호출에서와 동일 하 게 유지 되지만, ASP.NET MVC는이 시간을 HTTP POST로 식별 하므로 다른 편집 작업 메서드 ( [HttpPost] 를 사용 하 여 데코레이팅된 항목)를 실행 합니다.Once the user updates the Album form values and clicks the Save button, the changes are submitted via an HTTP-POST call back to /StoreManager/Edit/id. Although the URL remains the same as in the last call, ASP.NET MVC identifies that this time it is an HTTP-POST and therefore executes a different Edit action method (one decorated with [HttpPost]).

작업 1-HTTP-GET 편집 작업 메서드 구현Task 1 - Implementing the HTTP-GET Edit Action Method

이 태스크에서는 편집 작업 메서드의 HTTP GET 버전을 구현 하 여 데이터베이스에서 적절 한 앨범을 검색 하 고 모든 장르 및 음악가의 목록도 검색 합니다.In this task, you will implement the HTTP-GET version of the Edit action method to retrieve the appropriate Album from the database, as well as a list of all Genres and Artists. 마지막 단계에서 정의 된 StoreManagerViewModel 개체에이 데이터를 패키지 합니다. 그러면 응답을 렌더링 하기 위해 뷰 템플릿에 전달 됩니다.It will package this data up into the StoreManagerViewModel object defined in the last step, which will then be passed to a View template to render the response with.

  1. 원본/Ex3-만들기 에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex3-CreatingTheEditView/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. StoreManagerController 클래스를 엽니다.Open the StoreManagerController class. 이렇게 하려면 Controllers 폴더를 확장 하 고 StoreManagerController.cs를 두 번 클릭 합니다.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  3. HTTP-GET Edit 작업 메서드를 다음 코드로 바꾸어 해당 하는 앨범 뿐만 아니라 장르음악가 목록을 검색 합니다.Replace the HTTP-GET Edit action method with the following code to retrieve the appropriate Album as well as the Genres and Artists lists.

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex3 STOREMANAGERCONTROLLER HTTP-편집 작업 가져오기)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-GET Edit action)

    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);
    }
    

    Note

    Collections 및 장르에 대해 system.object를 사용 하 는 대신 system.web을 사용 합니다.You are using System.Web.Mvc SelectList for Artists and Genres instead of the System.Collections.Generic List.

    Selectlist 는 HTML 드롭다운을 채우고 현재 선택 등의 작업을 관리 하는 클리너 방법입니다.SelectList is a cleaner way to populate HTML dropdowns and manage things like current selection. 컨트롤러 작업에서 이러한 ViewModel 개체를 인스턴스화하고 나중에 설정 하면 편집 양식 시나리오가 더 명확 하 게 됩니다.Instantiating and later setting up these ViewModel objects in the controller action will make the Edit form scenario cleaner.

작업 2-편집 보기 만들기Task 2 - Creating the Edit View

이 태스크에서는 나중에 앨범 속성을 표시 하는 편집 보기 템플릿을 만듭니다.In this task, you will create an Edit View template that will later display the album properties.

  1. 편집 뷰를 만듭니다.Create the Edit View. 이렇게 하려면 편집 동작 메서드 내부를 마우스 오른쪽 단추로 클릭 하 고 뷰 추가를 선택 합니다.To do this, right-click inside the Edit action method and select Add View.

  2. 보기 추가 대화 상자에서 뷰 이름이 편집인지 확인 합니다.In the Add View dialog, verify that the View Name is Edit. 강력한 형식의 뷰 만들기 확인란을 선택 하 고 데이터 클래스 보기 드롭다운에서 앨범 (MvcMusicStore) 을 선택 합니다.Check the Create a strongly-typed view checkbox and select Album (MvcMusicStore.Models) from the View data class drop-down. 스 캐 폴드 템플릿 드롭다운에서 편집 을 선택 합니다.Select Edit from the Scaffold template drop-down. 다른 필드의 기본값을 그대로 두고 추가를 클릭 합니다.Leave the other fields with their default value and then click Add.

    편집 뷰 추가Adding an Edit view

    편집 뷰 추가Adding an Edit view

작업 3-응용 프로그램 실행Task 3 - Running the Application

이 태스크에서는 Storemanager 편집 뷰 페이지에 매개 변수로 전달 된 앨범의 속성 값이 표시 되는 것을 테스트 합니다.In this task, you will test that the StoreManager Edit View page displays the properties' values for the album passed as parameter.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Edit/1 로 변경 하 여 전달 된 앨범의 속성 값이 표시 되는지 확인 합니다.Change the URL to /StoreManager/Edit/1 to verify that the properties' values for the album passed are displayed.

    탐색 앨범의 편집 보기Browsing Album's Edit View

    탐색 앨범의 편집 보기Browsing Album's Edit view

작업 4-앨범 편집기 템플릿에서 드롭다운 구현Task 4 - Implementing drop-downs on the Album Editor Template

이 태스크에서는 사용자가 음악가와 장르 목록에서 선택할 수 있도록 마지막 태스크에서 만든 보기 템플릿에 드롭다운을 추가 합니다.In this task, you will add drop-downs to the View template created in the last task, so that the user can select from a list of Artists and Genres.

  1. 모든 앨범 필드 집합 코드를 다음으로 바꿉니다.Replace all the Album fieldset code with the following:

    <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>
    

    Note

    아티스트와 장르를 선택 하기 위한 드롭다운을 렌더링 하기 위한 Html DropDownList 도우미가 추가 되었습니다.An Html.DropDownList helper has been added to render drop-downs for choosing Artists and Genres. Html. DropDownList 에 전달 된 매개 변수는 다음과 같습니다.The parameters passed to Html.DropDownList are:

    1. 폼 필드의 이름 ( "ArtistId" )입니다.The name of the form field ("ArtistId").
    2. 드롭다운의 값 목록 입니다.The SelectList of values for the drop-down.

작업 5-응용 프로그램 실행Task 5 - Running the Application

이 태스크에서는 Storemanager 편집 뷰 페이지에서 음악가 및 장르 ID 텍스트 필드 대신 드롭다운을 표시 하는지 테스트 합니다.In this task, you will test that the StoreManager Edit View page displays drop-downs instead of Artist and Genre ID text fields.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Edit/1 로 변경 하 여 음악가 및 장르 ID 텍스트 필드가 아닌 드롭다운이 표시 되는지 확인 합니다.Change the URL to /StoreManager/Edit/1 to verify that it displays drop-downs instead of Artist and Genre ID text fields.

    드롭다운을 사용 하 여 앨범의 편집 뷰 찾아보기Browsing Album's Edit View with drop downs

    이번에는 드롭다운을 사용 하 여 앨범의 편집 보기를 검색 합니다.Browsing Album's Edit view, this time with dropdowns

작업 6-HTTP-사후 편집 작업 메서드 구현Task 6 - Implementing the HTTP-POST Edit action method

이제 편집 뷰가 예상 대로 표시 되므로, 앨범에 대 한 변경 내용을 저장 하기 위해 HTTP POST 편집 작업 메서드를 구현 해야 합니다.Now that the Edit View displays as expected, you need to implement the HTTP-POST Edit Action method to save the changes made to the Album.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다.Close the browser if needed, to return to the Visual Studio window. Controllers 폴더에서 StoreManagerController 을 엽니다.Open StoreManagerController from the Controllers folder.

  2. HTTP-POST 편집 작업 메서드 코드를 다음으로 바꿉니다 (교체 해야 하는 메서드는 두 개의 매개 변수를 받는 오버 로드 된 버전).Replace HTTP-POST Edit action method code with the following (note that the method that must be replaced is overloaded version that receives two parameters):

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex3 STOREMANAGERCONTROLLER HTTP-사후 편집 작업)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-POST Edit action)

    [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);
    }
    

    Note

    이 메서드는 사용자가 뷰의 저장 단추를 클릭 하 고 폼 값의 HTTP POST를 서버에 다시 실행 하 여 데이터베이스에 보관 하는 경우 실행 됩니다.This method will be executed when the user clicks the Save button of the View and performs an HTTP-POST of the form values back to the server to persist them in the database. 데코레이터 [HttpPost] 는 메서드를 이러한 HTTP 게시 시나리오에 사용 해야 함을 나타냅니다.The decorator [HttpPost] indicates that the method should be used for those HTTP-POST scenarios. 메서드는 앨범 개체를 사용 합니다.The method takes an Album object. ASP.NET MVC는 게시 된 <양식> 값에서 앨범 개체를 자동으로 만듭니다.ASP.NET MVC will automatically create the Album object from the posted <form> values.

    이 메서드는 다음 단계를 수행 합니다.The method will perform these steps:

    1. Model이 올바르면 다음을 수행 합니다.If model is valid:

      1. 컨텍스트에서 앨범 항목을 업데이트 하 여 수정 된 개체로 표시 합니다.Update the album entry in the context to mark it as a modified object.
      2. 변경 내용을 저장 하 고 인덱스 뷰로 리디렉션합니다.Save the changes and redirect to the index view.
    2. 모델이 유효 하지 않으면 ViewBag을 GenreIdArtistId로 채운 다음 수신 된 앨범 개체가 있는 뷰를 반환 하 여 사용자가 필요한 업데이트를 수행할 수 있도록 합니다.If the model is not valid, it will populate the ViewBag with the GenreId and ArtistId, then it will return the view with the received Album object to allow the user perform any required update.

작업 7-응용 프로그램 실행Task 7 - Running the Application

이 태스크에서는 Storemanager 편집 뷰 페이지가 실제로 업데이트 된 앨범 데이터를 데이터베이스에 저장 하는지 테스트 합니다.In this task, you will test that the StoreManager Edit View page actually saves the updated Album data in the database.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Edit/1로 변경 합니다.Change the URL to /StoreManager/Edit/1. 앨범 제목을 로드 로 변경 하 고 저장을 클릭 합니다.Change the Album title to Load and click on Save. 앨범의 제목이 실제로 앨범 목록에서 변경 되었는지 확인 합니다.Verify that album's title actually changed in the list of albums.

    앨범 업데이트Updating an album

    앨범 업데이트Updating an Album

연습 4: Create View 추가Exercise 4: Adding a Create View

이제 StoreManagerController 편집 기능을 지원 하기 때문에이 연습에서는 저장소 관리자가 새 앨범을 응용 프로그램에 추가할 수 있도록 뷰 만들기 템플릿을 추가 하는 방법에 대해 알아봅니다.Now that the StoreManagerController supports the Edit ability, in this exercise you will learn how to add a Create View template to let store managers add new Albums to the application.

편집 기능을 사용 하는 것 처럼 StoreManagerController 클래스 내에서 두 개의 별도 메서드를 사용 하 여 Create 시나리오를 구현 합니다.Like you did with the Edit functionality, you will implement the Create scenario using two separate methods within the StoreManagerController class:

  1. 상점 관리자가 먼저 /StoreManager/Create URL을 방문 하는 경우 하나의 작업 메서드가 빈 폼을 표시 합니다.One action method will display an empty form when store managers first visit the /StoreManager/Create URL.
  2. 두 번째 작업 메서드는 저장소 관리자가 양식 내에서 저장 단추를 클릭 하 고 값을 다시 /STOREMANAGER/CREATE URL에 HTTP POST로 전송 하는 시나리오를 처리 합니다.A second action method will handle the scenario where the store manager clicks the Save button within the form and submits the values back to the /StoreManager/Create URL as an HTTP-POST.

작업 1-HTTP-GET 작업 메서드 구현Task 1 - Implementing the HTTP-GET Create action method

이 작업에서는 Create action 메서드의 HTTP GET 버전을 구현 하 여 모든 장르 및 음악가 목록을 검색 하 고,이 데이터를 StoreManagerViewModel 개체에 패키지 하 고,이 데이터를 뷰 템플릿으로 전달 합니다.In this task, you will implement the HTTP-GET version of the Create action method to retrieve a list of all Genres and Artists, package this data up into a StoreManagerViewModel object, which will then be passed to a View template.

  1. Source/Ex4-AddingACreateView/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex4-AddingACreateView/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. StoreManagerController 클래스를 엽니다.Open StoreManagerController class. 이렇게 하려면 Controllers 폴더를 확장 하 고 StoreManagerController.cs를 두 번 클릭 합니다.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  3. 만들기 작업 메서드 코드를 다음으로 바꿉니다.Replace the Create action method code with the following:

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex4 STOREMANAGERCONTROLLER HTTP-GET 만들기 작업)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP-GET Create action)

    //
    // 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-만들기 뷰 추가Task 2 - Adding the Create View

이 태스크에서는 새 (비어 있음) 앨범 양식을 표시 하는 뷰 만들기 템플릿을 추가 합니다.In this task, you will add the Create View template that will display a new (empty) Album form.

  1. 만들기 동작 메서드 내부를 마우스 오른쪽 단추로 클릭 하 고 뷰 추가를 선택 합니다.Right-click inside the Create action method and select Add View. 그러면 보기 추가 대화 상자가 표시 됩니다.This will bring up the Add View dialog.

  2. 보기 추가 대화 상자에서 보기 이름이 생성인지 확인 합니다.In the Add View dialog, verify that the View Name is Create. 강력한 형식의 뷰 만들기 옵션을 선택 하 고 모델 클래스 드롭다운에서 앨범 (MvcMusicStore) 을 선택 하 고 스 캐 폴드 템플릿 드롭다운에서 만들기 를 선택 합니다.Select the Create a strongly-typed view option and select Album (MvcMusicStore.Models) from the Model class drop-down and Create from the Scaffold template drop-down. 다른 필드의 기본값을 그대로 두고 추가를 클릭 합니다.Leave the other fields with their default value and then click Add.

    Create view 추가Adding a create view

    Create View 추가Adding the Create View

  3. 아래와 같이 드롭다운 목록을 사용 하도록 GenreIdArtistId 필드를 업데이트 합니다.Update the GenreId and ArtistId fields to use a drop-down list as shown below:

    ...
    <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-응용 프로그램 실행Task 3 - Running the Application

이 태스크에서는 Storemanager만들기 페이지에 빈 앨범 양식이 표시 되는 것을 테스트 합니다.In this task, you will test that the StoreManager Create View page displays an empty Album form.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Create로 변경 합니다.Change the URL to /StoreManager/Create. 새 앨범 속성을 채우도록 빈 양식이 표시 되는지 확인 합니다.Verify that an empty form is displayed for filling the new Album properties.

    빈 폼을 사용 하 여 뷰 만들기Create View with an empty form

    빈 폼을 사용 하 여 뷰 만들기Create View with an empty form

작업 4-HTTP POST 만들기 작업 메서드 구현Task 4 - Implementing the HTTP-POST Create Action Method

이 작업에서는 사용자가 저장 단추를 클릭할 때 호출 되는 Create ACTION 메서드의 HTTP POST 버전을 구현 합니다.In this task, you will implement the HTTP-POST version of the Create action method that will be invoked when a user clicks the Save button. 메서드는 데이터베이스에 새 앨범을 저장 해야 합니다.The method should save the new album in the database.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다.Close the browser if needed, to return to the Visual Studio window. StoreManagerController 클래스를 엽니다.Open StoreManagerController class. 이렇게 하려면 Controllers 폴더를 확장 하 고 StoreManagerController.cs를 두 번 클릭 합니다.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  2. HTTP-POST 만들기 작업 메서드 코드를 다음으로 바꿉니다.Replace HTTP-POST Create action method code with the following:

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex4 STOREMANAGERCONTROLLER HTTP-사후 만들기 작업)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP- POST Create action)

    [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);
    }
    

    Note

    만들기 작업은 이전 편집 작업 메서드와 비슷하지만 개체를 수정 된 것으로 설정 하는 대신 컨텍스트에 추가 됩니다.The Create action is pretty similar to the previous Edit action method but instead of setting the object as modified, it is being added to the context.

작업 5-응용 프로그램 실행Task 5 - Running the Application

이 태스크에서는 storemanager 뷰 만들기 페이지에서 새 앨범을 만든 다음 Storemanager 인덱스 뷰로 리디렉션하는 테스트를 수행할 수 있습니다.In this task, you will test that the StoreManager Create View page lets you create a new Album and then redirects to the StoreManager Index View.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Create로 변경 합니다.Change the URL to /StoreManager/Create. 다음 그림에 나와 있는 것 처럼 모든 양식 필드를 새 앨범의 데이터로 채웁니다.Fill all the form fields with data for a new Album, like the one in the following figure:

    앨범 만들기Creating an Album

    앨범 만들기Creating an Album

  3. 방금 만든 새 앨범이 포함 된 StoreManager 인덱스 뷰로 리디렉션되도록 합니다.Verify that you get redirected to the StoreManager Index View that includes the new Album just created.

    새 앨범 만듦New Album Created

    새 앨범 만듦New Album Created

연습 5: 삭제 처리Exercise 5: Handling Deletion

앨범을 삭제 하는 기능은 아직 구현 되지 않았습니다.The ability to delete albums is not yet implemented. 이 연습을 수행 합니다.This is what this exercise will be about. 이전과 마찬가지로 StoreManagerController 클래스 내에서 두 개의 개별 메서드를 사용 하 여 삭제 시나리오를 구현 합니다.Like before, you will implement the Delete scenario using two separate methods within the StoreManagerController class:

  1. 하나의 작업 메서드가 확인 폼을 표시 합니다.One action method will display a confirmation form
  2. 두 번째 작업 메서드는 폼 제출을 처리 합니다.A second action method will handle the form submission

작업 1-HTTP-GET 삭제 작업 메서드 구현Task 1 - Implementing the HTTP-GET Delete Action Method

이 작업에서는 삭제 작업 메서드의 HTTP-GET 버전을 구현 하 여 앨범 정보를 검색 합니다.In this task, you will implement the HTTP-GET version of the Delete action method to retrieve the album's information.

  1. Source/Ex5-HandlingDeletion/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex5-HandlingDeletion/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. StoreManagerController 클래스를 엽니다.Open StoreManagerController class. 이렇게 하려면 Controllers 폴더를 확장 하 고 StoreManagerController.cs를 두 번 클릭 합니다.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  3. 컨트롤러 삭제 작업은 이전 저장소 정보 컨트롤러 작업과 동일 합니다. URL에 제공 된 id 를 사용 하 여 데이터베이스에서 앨범 개체를 쿼리하고 적절 한 를 반환 합니다.The Delete controller action is exactly the same as the previous Store Details controller action: it queries the album object from the database using the id provided in the URL and returns the appropriate View. 이렇게 하려면 HTTP-GET Delete 작업 메서드 코드를 다음 코드로 바꿉니다.To do this, replace the HTTP-GET Delete action method code with the following:

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex5 처리 삭제 HTTP-삭제 작업 가져오기)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Deletion HTTP-GET Delete action)

    //
    // 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);
    }
    
  4. Delete 동작 메서드 내부를 마우스 오른쪽 단추로 클릭 하 고 뷰 추가를 선택 합니다.Right-click inside the Delete action method and select Add View. 그러면 보기 추가 대화 상자가 표시 됩니다.This will bring up the Add View dialog.

  5. 보기 추가 대화 상자에서 뷰 이름이 삭제인지 확인 합니다.In the Add View dialog, verify that the View name is Delete. 강력한 형식의 뷰 만들기 옵션을 선택 하 고 모델 클래스 드롭다운에서 앨범 (MvcMusicStore) 을 선택 합니다.Select the Create a strongly-typed view option and select Album (MvcMusicStore.Models) from the Model class drop-down. 스 캐 폴드 템플릿 드롭다운에서 삭제 를 선택 합니다.Select Delete from the Scaffold template drop-down. 다른 필드의 기본값을 그대로 두고 추가를 클릭 합니다.Leave the other fields with their default value and then click Add.

    삭제 뷰 추가Adding a Delete View

    삭제 뷰 추가Adding a Delete View

  6. 삭제 템플릿은 모델의 모든 필드를 표시 합니다.The Delete template shows all the fields from the model. 앨범의 제목만 표시 됩니다.You will show only the album's title. 이렇게 하려면 뷰의 내용을 다음 코드로 바꿉니다.To do this, replace the content of the view with the following code:

    @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-응용 프로그램 실행Task 2 - Running the Application

이 태스크에서는 Storemanager삭제 페이지에 확인 삭제 양식이 표시 되는 것을 테스트 합니다.In this task, you will test that the StoreManager Delete View page displays a confirmation deletion form.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /Storemanager로 변경 합니다.Change the URL to /StoreManager. 삭제 를 클릭 하 여 삭제할 앨범을 하나 선택 하 고 새 보기가 업로드 되었는지 확인 합니다.Select one album to delete by clicking Delete and verify that the new view is uploaded.

    앨범 삭제Deleting an Album

    앨범 삭제Deleting an Album

작업 3-HTTP-사후 삭제 작업 메서드 구현Task 3- Implementing the HTTP-POST Delete Action Method

이 작업에서는 사용자가 삭제 단추를 클릭할 때 호출 되는 delete 동작 메서드의 HTTP POST 버전을 구현 합니다.In this task, you will implement the HTTP-POST version of the Delete action method that will be invoked when a user clicks the Delete button. 메서드는 데이터베이스의 앨범을 삭제 해야 합니다.The method should delete the album in the database.

  1. 필요한 경우 브라우저를 닫고 Visual Studio 창으로 돌아갑니다.Close the browser if needed, to return to the Visual Studio window. StoreManagerController 클래스를 엽니다.Open StoreManagerController class. 이렇게 하려면 Controllers 폴더를 확장 하 고 StoreManagerController.cs를 두 번 클릭 합니다.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  2. HTTP-사후 삭제 작업 메서드 코드를 다음 코드로 바꿉니다.Replace HTTP-POST Delete action method code with the following:

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex5 처리 삭제 HTTP-사후 삭제 작업)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Deletion HTTP-POST Delete action)

    //
    // 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-응용 프로그램 실행Task 4 - Running the Application

이 태스크에서는 storemanager 뷰 삭제 페이지를 사용 하 여 앨범을 삭제 한 다음 Storemanager 인덱스 뷰로 리디렉션하는 것을 테스트 합니다.In this task, you will test that the StoreManager Delete View page lets you delete an Album and then redirects to the StoreManager Index View.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /Storemanager로 변경 합니다.Change the URL to /StoreManager. 삭제를 클릭 하 여 삭제할 앨범 하나를 선택 합니다.Select one album to delete by clicking Delete. 삭제 단추를 클릭 하 여 삭제를 확인 합니다.Confirm the deletion by clicking Delete button:

    앨범 삭제Deleting an Album

    앨범 삭제Deleting an Album

  3. 앨범이 인덱스 페이지에 나타나지 않으므로 삭제 되었는지 확인 합니다.Verify that the album was deleted since it does not appear in the Index page.

연습 6: 유효성 검사 추가Exercise 6: Adding Validation

현재 보유 하 고 있는 양식 만들기 및 편집은 어떤 종류의 유효성 검사도 수행 하지 않습니다.Currently, the Create and Edit forms you have in place do not perform any kind of validation. 사용자가 필수 필드를 비워 두고 price 필드에 문자를 입력 하는 경우 첫 번째 오류는 데이터베이스에서 가져옵니다.If the user leaves a required field blank or type letters in the price field, the first error you will get will be from the database.

모델 클래스에 데이터 주석을 추가 하 여 응용 프로그램에 유효성 검사를 추가할 수 있습니다.You can add validation to the application by adding Data Annotations to your model class. 데이터 주석을 사용 하면 모델 속성에 적용 하려는 규칙을 설명할 수 있으며, ASP.NET MVC는 사용자에 게 적절 한 메시지를 적용 하 고 표시 합니다.Data Annotations allow describing the rules you want applied to your model properties, and ASP.NET MVC will take care of enforcing and displaying appropriate message to users.

작업 1-데이터 주석 추가Task 1 - Adding Data Annotations

이 태스크에서는 적절 한 경우 만들기 및 편집 페이지 표시 유효성 검사 메시지를 만드는 앨범 모델에 데이터 주석을 추가 합니다.In this task, you will add Data Annotations to the Album Model that will make the Create and Edit page display validation messages when appropriate.

간단한 모델 클래스의 경우에는 system.componentmodel에 대 한 using 문을 추가 하 고 적절 한 속성에 [Required] 특성을 배치 하 여 데이터 주석을 추가 하기만 하면 됩니다.For a simple Model class, adding a Data Annotation is just handled by adding a using statement for System.ComponentModel.DataAnnotation, then placing a [Required] attribute on the appropriate properties. 다음 예에서는 이름 속성을 뷰의 필수 필드로 설정 합니다.The following example would make the Name property a required field in the View.

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

        public bool WearsCape { get; set; }
    }
}

이 응용 프로그램이 엔터티 데이터 모델를 생성 하는 경우에는이 응용 프로그램이 좀 더 복잡 합니다.This is a little more complex in cases like this application where the Entity Data Model is generated. 모델 클래스에 직접 데이터 주석을 추가한 경우 데이터베이스에서 모델을 업데이트 하면 덮어씁니다.If you added Data Annotations directly to the model classes, they would be overwritten if you update the model from the database. 대신 주석을 보유 하기 위해 존재 하 고 [MetadataType] 특성을 사용 하 여 모델 클래스와 연결 된 메타 데이터 부분 클래스를 사용할 수 있습니다.Instead, you can make use of metadata partial classes which will exist to hold the annotations and are associated with the model classes using the [MetadataType] attribute.

  1. Source/Ex6-AddingValidation/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex6-AddingValidation/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. 모델 폴더에서 Album.cs 을 엽니다.Open the Album.cs from the Models folder.

  3. Album.cs 콘텐츠를 강조 표시 된 코드로 대체 하 여 다음과 같이 표시 되도록 합니다.Replace Album.cs content with the highlighted code, so that it looks like the following:

    Note

    [Displayformat (ConvertEmptyStringToNull = false)] 줄은 데이터 원본에서 데이터 필드가 업데이트 될 때 모델의 빈 문자열이 null로 변환 되지 않음을 나타냅니다.The line [DisplayFormat(ConvertEmptyStringToNull=false)] indicates that empty strings from the model won't be converted to null when the data field is updated in the data source. 이 설정은 데이터 주석이 필드의 유효성을 검사 하기 전에 Entity Framework에서 모델에 null 값을 할당 하는 경우 예외를 방지 합니다.This setting will avoid an exception when the Entity Framework assigns null values to the model before Data Annotation validates the fields.

    (코드 조각- ASP.NET MVC 4 도우미 및 폼 및 유효성 검사-Ex6 앨범 메타 데이터 partial 클래스)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex6 Album metadata partial class)

    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; }
        }
    }
    

    Note

    앨범 부분 클래스에는 데이터 주석의 AlbumMetaData 클래스를 가리키는 MetadataType 특성이 있습니다.This Album partial class has a MetadataType attribute which points to the AlbumMetaData class for the Data Annotations. 앨범 모델에 주석을 추가 하는 데 사용 하는 데이터 주석 특성은 다음과 같습니다.These are some of the Data Annotation attributes you are using to annotate the Album model:

    • 필수-속성이 필수 필드 임을 나타냅니다.Required - Indicates that the property is a required field
    • DisplayName-양식 필드 및 유효성 검사 메시지에 사용할 텍스트를 정의 합니다.DisplayName - Defines the text to be used on form fields and validation messages
    • DisplayFormat-데이터 필드를 표시 하 고 서식을 지정 하는 방법을 지정 합니다.DisplayFormat - Specifies how data fields are displayed and formatted.
    • StringLength-문자열 필드의 최대 길이를 정의 합니다.StringLength - Defines a maximum length for a string field
    • 범위-숫자 필드에 대 한 최대값 및 최소값을 제공 합니다.Range - Gives a maximum and minimum value for a numeric field
    • ScaffoldColumn-편집기 양식에서 필드를 숨길 수 있습니다.ScaffoldColumn - Allows hiding fields from editor forms

작업 2-응용 프로그램 실행Task 2 - Running the Application

이 태스크에서는 마지막 작업에서 선택한 표시 이름을 사용 하 여 페이지 만들기 및 편집 페이지의 유효성을 검사 하는 방법을 테스트 합니다.In this task, you will test that the Create and Edit pages validate fields, using the display names chosen in the last task.

  1. F5 키를 눌러 응용 프로그램을 실행 합니다.Press F5 to run the Application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. URL을 /StoreManager/Create로 변경 합니다.Change the URL to /StoreManager/Create. 표시 이름이 partial 클래스의 이름과 일치 하는지 확인 합니다 (예: AlbumArtUrl대신 앨범 아트 URL ).Verify that the display names match the ones in the partial class (like Album Art URL instead of AlbumArtUrl)

  3. 양식을 채우지 않고 만들기를 클릭 합니다.Click Create, without filling the form. 해당 유효성 검사 메시지가 있는지 확인 합니다.Verify that you get the corresponding validation messages.

    만들기 페이지의 유효성을 검사 한 필드Validated fields in the Create page

    만들기 페이지의 유효성을 검사 한 필드Validated fields in the Create page

  4. 편집 페이지에서 동일한가 발생 하는지 확인할 수 있습니다.You can verify that the same occurs with the Edit page. URL을 /StoreManager/Edit/1 로 변경 하 고 표시 이름이 부분 클래스 (예: AlbumArtUrl대신 앨범 아트 URL )의 이름과 일치 하는지 확인 합니다.Change the URL to /StoreManager/Edit/1 and verify that the display names match the ones in the partial class (like Album Art URL instead of AlbumArtUrl). 제목가격 필드를 비운 후 저장을 클릭 합니다.Empty the Title and Price fields and click Save. 해당 유효성 검사 메시지가 있는지 확인 합니다.Verify that you get the corresponding validation messages.

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

    편집 페이지의 유효성을 검사 한 필드Validated fields in the Edit page

연습 7: 클라이언트 쪽에서 조심 스럽게 jQuery 사용Exercise 7: Using Unobtrusive jQuery at Client Side

이 연습에서는 클라이언트 쪽에서 MVC 4를 사용 하지 않는 jQuery 유효성 검사를 사용 하도록 설정 하는 방법을 배웁니다.In this exercise, you will learn how to enable MVC 4 Unobtrusive jQuery validation at client side.

Note

조심 스럽게 jQuery는 데이터 ajax 접두사 JavaScript를 사용 하 여 인라인 클라이언트 스크립트를 intrusively 내보내는 대신 서버에서 작업 메서드를 호출 합니다.The Unobtrusive jQuery uses data-ajax prefix JavaScript to invoke action methods on the server rather than intrusively emitting inline client scripts.

작업 1-방해 하지 않는 jQuery를 사용 하도록 설정 하기 전에 응용 프로그램 실행Task 1 - Running the Application before Enabling Unobtrusive jQuery

이 태스크에서는 jQuery를 포함 하기 전에 응용 프로그램을 실행 하 여 두 유효성 검사 모델을 비교 합니다.In this task, you will run the application before including jQuery in order to compare both validation models.

  1. Source/Ex7-UnobtrusivejQueryValidation/begin/ 폴더에 있는 시작 솔루션을 엽니다.Open the Begin solution located at Source/Ex7-UnobtrusivejQueryValidation/Begin/ folder. 그렇지 않으면 이전 연습을 완료 하 여 얻은 종료 솔루션을 계속 사용할 수 있습니다.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. 제공 된 시작 솔루션을 연 경우 계속 하기 전에 일부 누락 된 NuGet 패키지를 다운로드 해야 합니다.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. 이렇게 하려면 프로젝트 메뉴를 클릭 하 고 NuGet 패키지 관리를 선택 합니다.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet 패키지 관리 대화 상자에서 복원 을 클릭 하 여 누락 된 패키지를 다운로드 합니다.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. 마지막으로 빌드 | 솔루션 빌드를 클릭 하 여 솔루션을 빌드합니다.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet을 사용 하는 경우의 장점 중 하나는 프로젝트의 모든 라이브러리를 제공 하 여 프로젝트 크기를 줄이는 것이 없다는 것입니다.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet 파워 도구를 사용 하 여 패키지 .config 파일에 패키지 버전을 지정 하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. 이 경우이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행 해야 합니다.This is why you will have to run these steps after you open an existing solution from this lab.

  2. F5 키를 눌러 애플리케이션을 실행합니다.Press F5 to run the application.

  3. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. /StoreManager/Create 를 찾아보고 폼을 채우지 않고 만들기 를 클릭 하 여 유효성 검사 메시지를 수신 하는지 확인 합니다.Browse /StoreManager/Create and click Create without filling the form to verify that you get validation messages:

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

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

  4. 브라우저에서 HTML 소스 코드를 엽니다.In the browser, open the HTML source code:

    ...
              <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-비 클라이언트 유효성 검사 사용Task 2 - Enabling Unobtrusive Client Validation

이 태스크에서는 web.config 파일에서 jQuery를 사용 하지 않는 클라이언트 유효성 검사 를 사용 하도록 설정 합니다 .이는 기본적으로 모든 새 ASP.NET MVC 4 프로젝트에서 false로 설정 됩니다.In this task, you will enable jQuery unobtrusive client validation from Web.config file, which is by default set to false in all new ASP.NET MVC 4 projects. 또한 jQuery를 사용 하지 않는 클라이언트 유효성 검사 작업을 수행 하는 데 필요한 스크립트 참조를 추가 합니다.Additionally, you will add the necessary scripts references to make jQuery Unobtrusive Client Validation work.

  1. 프로젝트 루트에서 web.config 파일을 열고 clientvalidationenabledUnobtrusiveJavaScriptEnabled keys 값이 true로 설정 되어 있는지 확인 합니다.Open Web.Config file at project root, and make sure that the ClientValidationEnabled and UnobtrusiveJavaScriptEnabled keys values are set to 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>
    ...
    

    Note

    Global.asax.cs에서 코드에의 한 클라이언트 유효성 검사를 사용 하도록 설정 하 여 동일한 결과를 얻을 수도 있습니다.You can also enable client validation by code at Global.asax.cs to get the same results:

    HtmlHelper. ClientValidationEnabled = true;HtmlHelper.ClientValidationEnabled = true;

    또한 모든 컨트롤러에 ClientValidationEnabled 특성을 할당 하 여 사용자 지정 동작을 수행할 수 있습니다.Additionally, you can assign ClientValidationEnabled attribute into any controller to have a custom behavior.

  2. Views\StoreManager에서 Create. cshtml 를 엽니다.Open Create.cshtml at Views\StoreManager.

  3. 다음 스크립트 파일 jquery. validatejquery. /bundles/jqueryval" 번들을 "통해 뷰에서 참조 되는지 확인 합니다.Make sure the following script files, jquery.validate and jquery.validate.unobtrusive, are referenced in the view through the "~/bundles/jqueryval" bundle.

    ...
    @section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
    }
    

    Note

    이러한 모든 jQuery 라이브러리는 MVC 4 새 프로젝트에 포함 되어 있습니다.All these jQuery libraries are included in MVC 4 new projects. 프로젝트의 /Scripts 폴더에서 더 많은 라이브러리를 찾을 수 있습니다.You can find more libraries in the /Scripts folder of you project.

    이 유효성 검사 라이브러리를 작동 시키려면 jQuery 프레임 워크 라이브러리에 대 한 참조를 추가 해야 합니다.In order to make this validation libraries work, you need to add a reference to the jQuery framework library. 이 참조는 이미 _레이아웃. cshtml 파일에 추가 되었으므로이 특정 뷰에 추가할 필요가 없습니다.Since this reference is already added in the _Layout.cshtml file, you do not need to add it in this particular view.

작업 3-방해 되지 않는 jQuery 유효성 검사를 사용 하 여 응용 프로그램 실행Task 3 - Running the Application Using Unobtrusive jQuery Validation

이 태스크에서는 사용자가 새 앨범을 만들 때 Storemanager create View 템플릿이 jQuery 라이브러리를 사용 하 여 클라이언트 쪽 유효성 검사를 수행 하는지 테스트 합니다.In this task, you will test that the StoreManager create view template performs client side validation using jQuery libraries when the user creates a new album.

  1. F5 키를 눌러 애플리케이션을 실행합니다.Press F5 to run the application.

  2. 프로젝트가 홈 페이지에서 시작 됩니다.The project starts in the Home page. /StoreManager/Create 를 찾아보고 폼을 채우지 않고 만들기 를 클릭 하 여 유효성 검사 메시지를 수신 하는지 확인 합니다.Browse /StoreManager/Create and click Create without filling the form to verify that you get validation messages:

    JQuery를 사용 하 여 클라이언트 유효성 검사 사용Client validation with jQuery enabled

    JQuery를 사용 하 여 클라이언트 유효성 검사 사용Client validation with jQuery enabled

  3. 브라우저에서 뷰 만들기에 대 한 소스 코드를 엽니다.In the browser, open the source code for Create view:

    ...
    <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>        
    ...
    

    Note

    각 클라이언트 유효성 검사 규칙에 대해rulename="메시지"특성이 있는 특성을 추가 합니다.For each client validation rule, Unobtrusive jQuery adds an attribute with data-val-rulename="message". 다음은 클라이언트 유효성 검사를 수행 하기 위해 html 입력 필드에 삽입 하지 않는 태그의 목록입니다.Below is a list of tags that Unobtrusive jQuery inserts into the html input field to perform client validation:

    • 데이터-valData-val
    • Data-val-numberData-val-number
    • 데이터-val 범위Data-val-range
    • 데이터-val 범위-min/Data-val-range-maxData-val-range-min / Data-val-range-max
    • Data-val-필수Data-val-required
    • 데이터-val 길이Data-val-length
    • Data-val-length-max/Data-val-length-minData-val-length-max / Data-val-length-min

    모든 데이터 값은 모델 데이터 주석으로 채워집니다.All the data values are filled with model Data Annotation. 그런 다음 서버 쪽에서 작동 하는 모든 논리를 클라이언트 쪽에서 실행할 수 있습니다.Then, all the logic that works at server side can be run at client side. 예를 들어 Price 특성은 모델에 다음과 같은 데이터 주석을 포함 합니다.For example, Price attribute has the following data annotation in the model:

    [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를 사용한 후 생성 된 코드는 다음과 같습니다.After using Unobtrusive jQuery, the generated code is:

    <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" />
    

요약Summary

이 실습 실습을 완료 하면 다음을 사용 하 여 사용자가 데이터베이스에 저장 된 데이터를 변경할 수 있도록 하는 방법을 배웠습니다.By completing this Hands-On Lab you have learned how to enable users to change the data stored in the database with the use of the following:

  • 인덱스, 만들기, 편집, 삭제 등의 컨트롤러 작업Controller actions like Index, Create, Edit, Delete
  • HTML 테이블에 속성을 표시 하기 위한 ASP.NET MVC의 스 캐 폴딩 기능ASP.NET MVC's scaffolding feature for displaying properties in an HTML table
  • 사용자 환경을 개선 하기 위한 사용자 지정 HTML 도우미Custom HTML helpers to improve user experience
  • HTTP GET 또는 HTTP POST 호출에 반응 하는 작업 메서드Action methods that react to either HTTP-GET or HTTP-POST calls
  • 만들기 및 편집 같은 유사한 보기 템플릿에 대 한 공유 편집기 템플릿A shared editor template for similar View templates like Create and Edit
  • 드롭다운 같은 폼 요소Form elements like drop-downs
  • 모델 유효성 검사에 대 한 데이터 주석Data annotations for Model validation
  • JQuery를 사용 하지 않는 라이브러리를 사용 하 여 클라이언트 쪽 유효성 검사Client Side Validation using jQuery Unobtrusive library

부록 A: 웹에 대 한 Visual Studio Express 2012 설치Appendix A: Installing Visual Studio Express 2012 for Web

Microsoft 웹 플랫폼 설치 관리자 를 사용 하 여 웹 또는 다른 "Express" 버전 에 대해 Microsoft Visual Studio Express 2012 를 설치할 수 있습니다.You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. 다음 지침에서는 Microsoft 웹 플랫폼 설치 관리자를 사용 하 여 Visual studio Express 2012 for Web 을 설치 하는 데 필요한 단계를 안내 합니다.The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)로 이동 합니다.Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우에는 웹 플랫폼 설치 관리자를 열고 Microsoft AZURE SDK"를 사용 하 여 웹 용 2012 Visual Studio Express "제품을 검색할 수 있습니다.Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Windows Azure SDK".

  2. 지금 설치를 클릭 합니다.Click on Install Now. 웹 플랫폼 설치 관리자 가 없으면 먼저이를 다운로드 하 여 설치 하도록 리디렉션됩니다.If you do not have Web Platform Installer you will be redirected to download and install it first.

  3. 웹 플랫폼 설치 관리자 가 열리면 설치 를 클릭 하 여 설치를 시작 합니다.Once Web Platform Installer is open, click Install to start the setup.

    Visual Studio Express 설치Install Visual Studio Express

    Visual Studio Express 설치Install Visual Studio Express

  4. 모든 제품의 라이선스 및 사용 조건을 읽고 동의 함을 클릭 하 여 계속 합니다.Read all the products' licenses and terms and click I Accept to continue.

    사용 조건 동의

    사용 조건 동의Accepting the license terms

  5. 다운로드 및 설치 프로세스가 완료 될 때까지 기다립니다.Wait until the downloading and installation process completes.

    설치 진행률

    설치 진행률Installation progress

  6. 설치가 완료 되 면 마침을 클릭 합니다.When the installation completes, click Finish.

    설치 완료

    설치 완료Installation completed

  7. 끝내기 를 클릭 하 여 웹 플랫폼 설치 관리자를 닫습니다.Click Exit to close Web Platform Installer.

  8. 웹에 대 한 Visual Studio Express를 열려면 시작 화면으로 이동 하 "VS Express"작성을 시작한 후 VS Express for Web 타일을 클릭 합니다.To open Visual Studio Express for Web, go to the Start screen and start writing "VS Express", then click on the VS Express for Web tile.

    VS Express for Web 타일

    VS Express for Web 타일VS Express for Web tile

부록 B: 코드 조각 사용Appendix B: Using Code Snippets

코드 조각을 사용 하면 필요한 모든 코드를 편리 하 게 사용할 수 있습니다.With code snippets, you have all the code you need at your fingertips. 랩 문서는 다음 그림에 표시 된 것 처럼 사용자가 사용할 수 있는 경우를 정확 하 게 알려줍니다.The lab document will tell you exactly when you can use them, as shown in the following figure.

Visual Studio 코드 조각을 사용 하 여 프로젝트에 코드 삽입Using Visual Studio code snippets to insert code into your project

Visual Studio 코드 조각을 사용 하 여 프로젝트에 코드 삽입Using Visual Studio code snippets to insert code into your project

키보드를 사용 하 여 코드 조각을 추가 하려면C# (만 해당)To add a code snippet using the keyboard (C# only)

  1. 코드를 삽입할 위치에 커서를 놓습니다.Place the cursor where you would like to insert the code.
  2. 조각 이름 (공백 또는 하이픈 제외)을 입력 하기 시작 합니다.Start typing the snippet name (without spaces or hyphens).
  3. IntelliSense는 일치 하는 코드 조각의 이름을 표시 합니다.Watch as IntelliSense displays matching snippets' names.
  4. 올바른 코드 조각을 선택 하거나 전체 코드 조각 이름이 선택 될 때까지 계속 입력 합니다.Select the correct snippet (or keep typing until the entire snippet's name is selected).
  5. Tab 키를 두 번 눌러 커서 위치에 코드 조각을 삽입 합니다.Press the Tab key twice to insert the snippet at the cursor location.

코드 조각 이름 입력 시작Start typing the snippet name

코드 조각 이름 입력 시작Start typing the snippet name

Tab 키를 눌러 강조 표시 된 코드 조각을 선택 합니다.Press Tab to select the highlighted snippet

Tab 키를 눌러 강조 표시 된 코드 조각을 선택 합니다.Press Tab to select the highlighted snippet

Tab 키를 다시 누르면 코드 조각이 확장 됩니다.Press Tab again and the snippet will expand

Tab 키를 다시 누르면 코드 조각이 확장 됩니다.Press Tab again and the snippet will expand

마우스C#(, Visual Basic 및 XML)를 사용 하 여 코드 조각을 추가 하려면 1(sp1).To add a code snippet using the mouse (C#, Visual Basic and XML) 1. 코드 조각을 삽입 하려는 위치를 마우스 오른쪽 단추로 클릭 합니다.Right-click where you want to insert the code snippet.

  1. 코드 조각 삽입 을 선택한 다음 내 코드 조각을선택 합니다.Select Insert Snippet followed by My Code Snippets.
  2. 목록에서 관련 코드 조각을 클릭 하 여 선택 합니다.Pick the relevant snippet from the list, by clicking on it.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭 하 고 코드 조각 삽입을 선택 합니다.Right-click where you want to insert the code snippet and select Insert Snippet

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭 하 고 코드 조각 삽입을 선택 합니다.Right-click where you want to insert the code snippet and select Insert Snippet

목록에서 관련 코드 조각을 클릭 하 여 선택 합니다.Pick the relevant snippet from the list, by clicking on it

목록에서 관련 코드 조각을 클릭 하 여 선택 합니다.Pick the relevant snippet from the list, by clicking on it