5부: 폼 편집 및 템플릿 서식 지정

아티클
07/13/2023

MVC Music Store는 웹 개발을 위해 ASP.NET MVC 및 Visual Studio를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션입니다.

MVC Music Store는 온라인으로 음악 앨범을 판매하고 기본 사이트 관리, 사용자 로그인 및 쇼핑 카트 기능을 구현하는 간단한 샘플 저장소 구현입니다.

이 자습서 시리즈에서는 ASP.NET MVC Music Store 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 5부에서는 양식 편집 및 템플릿을 다룹니다.

지난 챕터에서는 데이터베이스에서 데이터를 로드하고 표시했습니다. 이 챕터에서는 데이터 편집도 사용하도록 설정합니다.

StoreManagerController 만들기

먼저 StoreManagerController라는 새 컨트롤러를 만듭니다. 이 컨트롤러의 경우 ASP.NET MVC 3 도구 업데이트에서 사용할 수 있는 스캐폴딩 기능을 활용합니다. 아래와 같이 컨트롤러 추가 대화 상자의 옵션을 설정합니다.

컨트롤러 상자와 템플릿, 모델 클래스 및 데이터 컨텍스트 클래스 드롭다운이 강조 표시된 컨트롤러 추가 대화 상자의 스크린샷.

추가 단추를 클릭하면 ASP.NET MVC 3 스캐폴딩 메커니즘이 많은 작업을 수행하는 것을 볼 수 있습니다.

로컬 Entity Framework 변수를 사용하여 새 StoreManagerController를 만듭니다.
프로젝트의 Views 폴더에 StoreManager 폴더를 추가합니다.
Album 클래스에 강력한 형식의 Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml 및 Index.cshtml 뷰를 추가합니다.

만든 후 Microsoft Visual Web Developer 2010 Express에서 열린 Store Manager 컨트롤러 창의 스크린샷

새 StoreManager 컨트롤러 클래스에는 앨범 모델 클래스로 작업하고 데이터베이스 액세스를 위해 Entity Framework 컨텍스트를 사용하는 방법을 알고 있는 CRUD(만들기, 읽기, 업데이트, 삭제) 컨트롤러 작업이 포함됩니다.

스캐폴드된 뷰 수정

이 코드는 우리를 위해 생성되었지만 이 자습서 전체에서 작성한 것처럼 표준 ASP.NET MVC 코드라는 점을 기억해야 합니다. 상용구 컨트롤러 코드를 작성하고 강력한 형식의 뷰를 수동으로 만드는 데 소요되는 시간을 절약하기 위한 것이지만, 코드를 변경해서는 안 되는 방법에 대한 댓글에 끔찍한 경고가 앞에 표시되었을 수 있는 생성된 코드의 종류는 아닙니다. 이 코드는 코드이며 변경해야 합니다.

먼저 StoreManager 인덱스 보기(/Views/StoreManager/Index.cshtml)를 빠르게 편집해 보겠습니다. 이 보기는 편집/세부 정보/삭제 링크가 있는 Microsoft Store의 앨범을 나열하고 앨범의 공용 속성을 포함하는 테이블을 표시합니다. 이 디스플레이에서는 유용하지 않으므로 AlbumArtUrl 필드를 제거합니다. <뷰 코드의 테이블> 섹션에서 아래 강조 표시된 줄에 표시된 대로 AlbumArtUrl 참조를 둘러싼 th> 및 <td> 요소를 제거<합니다.

<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th>
            AlbumArtUrl
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <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>
        <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>

수정된 뷰 코드는 다음과 같이 표시됩니다.

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <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>
        <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>

스토어 관리자를 먼저 살펴보기

이제 애플리케이션을 실행하고 /StoreManager/로 이동합니다. 이렇게 하면 방금 수정한 Store 관리자 인덱스가 표시되고 편집, 세부 정보 및 삭제에 대한 링크가 있는 저장소의 앨범 목록이 표시됩니다.

편집, 세부 정보 및 삭제에 대한 링크가 있는 저장소의 앨범 목록을 보여 주는 Store Manager 인덱스의 스크린샷.

편집 링크를 클릭하면 장르 및 아티스트에 대한 드롭다운을 포함하여 앨범에 대한 필드가 있는 편집 양식이 표시됩니다.

장르 및 아티스트에 대한 드롭다운 필드와 아티스트, 제목, 가격 및 앨범 아트 URL의 텍스트 상자를 보여 주는 편집 대화 상자의 스크린샷.

아래쪽에서 "목록으로 돌아가기" 링크를 클릭한 다음 앨범에 대한 세부 정보 링크를 클릭합니다. 그러면 개별 앨범에 대한 세부 정보가 표시됩니다.

장르, 아티스트, 타이틀, 가격 및 앨범 아트 URL의 설정 값을 보여 주는 세부 정보 대화 상자의 스크린샷

다시 목록으로 돌아가기 링크를 클릭한 다음 삭제 링크를 클릭합니다. 그러면 앨범 세부 정보를 표시하고 삭제할 것인지 묻는 확인 대화 상자가 표시됩니다.

앨범 세부 정보를 보여 주는 삭제 대화 상자의 스크린샷과 선택한 앨범의 삭제를 확인하라는 메시지가 사용자에게 표시됩니다.

아래쪽에서 삭제 단추를 클릭하면 앨범이 삭제되고 삭제된 앨범이 표시된 인덱스 페이지로 돌아갑니다.

Microsoft는 Store Manager를 사용하여 완료되지 않았지만 CRUD 작업을 시작할 수 있는 작업 컨트롤러 및 보기 코드가 있습니다.

Store Manager 컨트롤러 코드 살펴보기

Store Manager 컨트롤러에는 많은 양의 코드가 포함되어 있습니다. 이를 위에서 아래로 살펴보겠습니다. 컨트롤러에는 MVC 컨트롤러에 대한 몇 가지 표준 네임스페이스뿐만 아니라 Models 네임스페이스에 대한 참조도 포함됩니다. 컨트롤러에는 데이터 액세스를 위해 각 컨트롤러 작업에서 사용하는 MusicStoreEntities의 프라이빗 instance 있습니다.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{ 
    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();

Store Manager 인덱스 및 세부 정보 작업

인덱스 보기는 Microsoft Store Browse 메서드에서 작업할 때 이전에 확인한 것처럼 각 앨범의 참조된 장르 및 아티스트 정보를 포함하여 앨범 목록을 검색합니다. 인덱스 보기는 각 앨범의 장르 이름과 아티스트 이름을 표시할 수 있도록 연결된 개체에 대한 참조를 따르므로 컨트롤러가 효율적이고 원래 요청에서 이 정보를 쿼리하고 있습니다.

//
// GET: /StoreManager/
public ViewResult Index()
{
    var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist);
    return View(albums.ToList());
}

StoreManager 컨트롤러의 세부 정보 컨트롤러 작업은 이전에 작성한 Store 컨트롤러 세부 정보 작업과 정확히 동일하게 작동합니다. Find() 메서드를 사용하여 Id별 앨범을 쿼리한 다음 보기로 반환합니다.

//
// GET: /StoreManager/Details/5
public ViewResult Details(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

만들기 작업 메서드

Create 작업 메서드는 양식 입력을 처리하기 때문에 지금까지 본 것과 약간 다릅니다. 사용자가 /StoreManager/Create/를 처음 방문하면 빈 양식이 표시됩니다. 이 HTML 페이지에는 앨범의 세부 정보를 입력할 수 있는 드롭다운 및 텍스트 상자 입력 요소가 포함된 양식> 요소가 포함<됩니다.

사용자가 앨범 양식 값을 채운 후 "저장" 단추를 눌러 이러한 변경 내용을 애플리케이션에 다시 제출하여 데이터베이스 내에 저장할 수 있습니다. 사용자가 "저장" 단추를 누르면 양식이 <HTTP-POST를 /StoreManager/Create/ URL로 다시 수행하고 HTTP-POST의 일부로 양식> 값을 제출 <> 합니다.

ASP.NET MVC를 사용하면 Microsoft StoreManagerController 클래스 내에서 두 개의 개별 "만들기" 작업 메서드를 구현할 수 있으므로 이러한 두 URL 호출 시나리오의 논리를 쉽게 분할할 수 있습니다. 하나는 /StoreManager/Create/ URL로의 초기 HTTP-GET 찾아보기를 처리하고 다른 하나는 제출된 변경 내용의 HTTP-POST를 처리할 수 있습니다.

ViewBag을 사용하여 보기에 정보 전달

이 자습서의 앞부분에서 ViewBag을 사용했지만 이에 대해 많이 이야기하지는 않았습니다. ViewBag을 사용하면 강력한 형식의 모델 개체를 사용하지 않고도 뷰에 정보를 전달할 수 있습니다. 이 경우 HTTP-GET 컨트롤러 편집 작업은 드롭다운을 채우기 위해 장르 및 아티스트 목록을 양식에 모두 전달해야 하며, 이를 수행하는 가장 간단한 방법은 ViewBag 항목으로 반환하는 것입니다.

ViewBag은 동적 개체입니다. 즉, 이러한 속성을 정의하는 코드를 작성하지 않고 ViewBag.Foo 또는 ViewBag.YourNameHere를 입력할 수 있습니다. 이 경우 컨트롤러 코드는 ViewBag.GenreId 및 ViewBag.ArtistId를 사용하여 양식과 함께 제출된 드롭다운 값이 GenreId 및 ArtistId가 되도록 설정됩니다.

이러한 드롭다운 값은 해당 용도로만 작성된 SelectList 개체를 사용하여 양식에 반환됩니다. 이 작업은 다음과 같은 코드를 사용하여 수행됩니다.

ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");

작업 메서드 코드에서 볼 수 있듯이 다음 세 개의 매개 변수를 사용하여 이 개체를 만듭니다.

드롭다운이 표시될 항목 목록입니다. 이것은 단지 문자열이 아니라 장르 목록을 전달합니다.
SelectList에 전달되는 다음 매개 변수는 Selected Value입니다. SelectList가 목록에서 항목을 미리 선택하는 방법을 알고 있는 방법입니다. 편집 폼을 보면 이 방법을 더 쉽게 이해할 수 있습니다. 이는 매우 유사합니다.
최종 매개 변수는 표시할 속성입니다. 이 경우 Genre.Name 속성이 사용자에게 표시될 것임을 나타냅니다.

이 점을 염두에 두고 HTTP-GET 만들기 작업은 매우 간단합니다. 두 개의 SelectList가 ViewBag에 추가되고 모델 개체가 양식에 전달되지 않습니다(아직 생성되지 않았기 때문에).

//
// GET: /StoreManager/Create
public ActionResult Create()
{
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name");
    return View();
}

보기 만들기에 드롭다운을 표시하는 HTML 도우미

드롭다운 값이 보기에 전달되는 방법에 대해 설명했으므로 보기를 간단히 살펴보고 해당 값이 표시되는 방식을 살펴보겠습니다. 보기 코드(/Views/StoreManager/Create.cshtml)에서 장르 드롭다운을 표시하기 위해 다음 호출이 수행되는 것을 볼 수 있습니다.

@Html.DropDownList("GenreId",
String.Empty)

이를 일반적인 보기 작업을 수행하는 유틸리티 메서드인 HTML 도우미라고 합니다. HTML 도우미는 보기 코드를 간결하고 읽을 수 있도록 유지하는 데 매우 유용합니다. Html.DropDownList 도우미는 ASP.NET MVC에서 제공되지만 나중에 볼 수 있듯이 애플리케이션에서 다시 사용할 보기 코드에 대한 자체 도우미를 만들 수 있습니다.

Html.DropDownList 호출은 목록을 표시할 위치와 미리 선택해야 하는 값(있는 경우)의 두 가지 사항을 알려주면 됩니다. 첫 번째 매개 변수인 GenreId는 DropDownList에 모델 또는 ViewBag에서 GenreId라는 값을 찾도록 지시합니다. 두 번째 매개 변수는 드롭다운 목록에서 처음에 선택된 대로 표시할 값을 나타내는 데 사용됩니다. 이 양식은 Create 양식이므로 미리 선택해야 하는 값이 없으며 String.Empty가 전달됩니다.

게시된 양식 값 처리

앞에서 설명한 것처럼 각 양식과 연결된 두 가지 작업 메서드가 있습니다. 첫 번째 는 HTTP-GET 요청을 처리하고 양식을 표시합니다. 두 번째는 제출된 양식 값이 포함된 HTTP-POST 요청을 처리합니다. 컨트롤러 작업에는 HTTP-POST 요청에만 응답해야 한다는 것을 ASP.NET MVC에 알리는 [HttpPost] 특성이 있습니다.

//
// POST: /StoreManager/Create
[HttpPost]
public ActionResult Create(Album album)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(album);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

이 작업에는 다음 네 가지 책임이 있습니다.

1. 양식 값 읽기
1. 양식 값이 유효성 검사 규칙을 통과하는지 확인합니다.
1. 양식 제출이 유효한 경우 데이터를 저장하고 업데이트된 목록을 표시합니다.
1. 양식 제출이 유효하지 않으면 유효성 검사 오류로 양식을 다시 표시합니다.

모델 바인딩을 사용하여 양식 값 읽기

컨트롤러 작업은 GenreId 및 ArtistId에 대한 값(드롭다운 목록에서)과 Title, Price 및 AlbumArtUrl의 텍스트 상자 값을 포함하는 양식 제출을 처리합니다. 양식 값에 직접 액세스할 수 있지만 더 나은 방법은 ASP.NET MVC에 기본 제공되는 모델 바인딩 기능을 사용하는 것입니다. 컨트롤러 작업이 모델 형식을 매개 변수로 사용하는 경우 ASP.NET MVC는 양식 입력(경로 및 쿼리 문자열 값)을 사용하여 해당 형식의 개체를 채웁니다. 이렇게 하려면 이름이 모델 개체의 속성과 일치하는 값을 찾습니다. 예를 들어 새 Album 개체의 GenreId 값을 설정할 때 GenreId라는 이름의 입력을 찾습니다. ASP.NET MVC에서 표준 메서드를 사용하여 보기를 만들 때 양식은 항상 속성 이름을 입력 필드 이름으로 사용하여 렌더링되므로 필드 이름이 일치합니다.

모델 유효성 검사

ModelState.IsValid에 대한 간단한 호출을 사용하여 모델의 유효성을 검사합니다. 아직 Album 클래스에 유효성 검사 규칙을 추가하지 않았으므로 조금씩 그렇게 할 것이므로 지금은 이 검사 할 일이 별로 없습니다. 중요한 것은 이 ModelStat.IsValid 검사 모델에 적용된 유효성 검사 규칙에 맞게 조정되므로 나중에 유효성 검사 규칙을 변경해도 컨트롤러 작업 코드에 대한 업데이트가 필요하지 않습니다.

제출된 값 저장

양식 제출이 유효성 검사를 통과하면 데이터베이스에 값을 저장해야 합니다. Entity Framework를 사용하면 모델을 Albums 컬렉션에 추가하고 SaveChanges를 호출하기만 하면 됩니다.

db.Albums.Add(album);
db.SaveChanges();

Entity Framework는 값을 유지하기 위해 적절한 SQL 명령을 생성합니다. 데이터를 저장한 후 업데이트를 볼 수 있도록 앨범 목록으로 다시 리디렉션합니다. 이 작업은 표시하려는 컨트롤러 작업의 이름으로 RedirectToAction을 반환하여 수행됩니다. 이 경우 Index 메서드입니다.

유효성 검사 오류가 있는 잘못된 양식 제출 표시

잘못된 양식 입력의 경우 드롭다운 값이 ViewBag에 추가되고(HTTP-GET 사례에서와 같이) 바인딩된 모델 값이 표시를 위해 뷰로 다시 전달됩니다. 유효성 검사 오류는 HTML 도우미를 @Html.ValidationMessageFor 사용하여 자동으로 표시됩니다.

양식 만들기 테스트

이를 테스트하려면 애플리케이션을 실행하고 /StoreManager/Create/로 이동합니다. 그러면 StoreController CREATE HTTP-GET 메서드에서 반환된 빈 양식이 표시됩니다.

일부 값을 입력하고 만들기 단추를 클릭하여 양식을 제출합니다.

장르 및 아티스트 드롭다운 필드와 Title, Price 및 Album Art U R L 텍스트 상자를 보여 주는 양식 만들기 스크린샷

빨간색 화살표가 있는 만들기 양식에서 만든 새 앨범을 강조 표시하는 앨범 목록의 스크린샷.

편집 처리

편집 작업 쌍(HTTP-GET 및 HTTP-POST)은 방금 살펴본 Create 작업 메서드와 매우 유사합니다. 편집 시나리오에는 기존 앨범 작업을 포함하므로 HTTP-GET 편집 메서드는 경로를 통해 전달된 "id" 매개 변수를 기반으로 Album을 로드합니다. AlbumId로 앨범을 검색하기 위한 이 코드는 이전에 세부 정보 컨트롤러 작업에서 살펴본 것과 동일합니다. Create/HTTP-GET 메서드와 마찬가지로 드롭다운 값은 ViewBag을 통해 반환됩니다. 이렇게 하면 ViewBag을 통해 추가 데이터(예: 장르 목록)를 전달하면서 Album을 모델 개체로 뷰(Album 클래스에 강력하게 입력됨)로 반환할 수 있습니다.

//
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
    Album album = db.Albums.Find(id);
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

HTTP-POST 편집 작업은 HTTP-POST 만들기 작업과 매우 유사합니다. 유일한 차이점은 db에 새 앨범을 추가하는 대신에 있다는 것입니다. Albums 컬렉션에서 db를 사용하여 앨범의 현재 instance 찾고 있습니다. Entry(album) 및 해당 상태를 수정됨으로 설정합니다. 이렇게 하면 Entity Framework에서 새 앨범을 만드는 것이 아니라 기존 앨범을 수정하고 있음을 알 수 있습니다.

//
// POST: /StoreManager/Edit/5
[HttpPost]
public ActionResult Edit(Album album)
{
    if (ModelState.IsValid)
    {
        db.Entry(album).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

애플리케이션을 실행하고 /StoreManger/로 이동하여 앨범에 대한 편집 링크를 클릭하여 이를 테스트할 수 있습니다.

빨간색 화살표가 강조 표시된 앨범에 해당하는 편집 옵션이 있는 앨범 목록의 스크린샷

그러면 HTTP-GET 편집 메서드에 표시된 편집 양식이 표시됩니다. 일부 값을 입력하고 저장 단추를 클릭합니다.

장르, 제목 및 가격 텍스트 상자가 빨간색 사각형으로 강조 표시된 편집 양식의 스크린샷

그러면 양식이 게시되고, 값이 저장되고, 값이 업데이트된 것을 보여 주는 앨범 목록으로 돌아갑니다.

빨간색 화살표로 강조 표시된 앨범의 새로 업데이트된 값을 보여 주는 앨범 목록의 스크린샷

삭제 처리

삭제는 편집 및 만들기와 동일한 패턴을 따르며, 하나의 컨트롤러 작업을 사용하여 확인 양식을 표시하고 다른 컨트롤러 작업을 사용하여 양식 제출을 처리합니다.

HTTP-GET 컨트롤러 삭제 작업은 이전 Store 관리자 세부 정보 컨트롤러 작업과 정확히 동일합니다.

//
// GET: /StoreManager/Delete/5
 
public ActionResult Delete(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

보기 콘텐츠 삭제 템플릿을 사용하여 앨범 유형에 강력한 형식의 양식을 표시합니다.

선택한 앨범의 세부 정보를 보여 주는 삭제 양식의 스크린샷과 콘텐츠 보기 삭제 템플릿을 보여 주는 스크린샷.

삭제 템플릿은 모델에 대한 모든 필드를 표시하지만 이를 상당히 간소화할 수 있습니다. /Views/StoreManager/Delete.cshtml의 보기 코드를 다음으로 변경합니다.

@model MvcMusicStore.Models.Album
@{
    ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>
<p>Are you sure you want to delete the album titled 
   <strong>@Model.Title</strong>?
</p>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" />
    </p>
    <p>
        @Html.ActionLink("Back to
List", "Index")
    </p>
}

이렇게 하면 간소화된 삭제 확인이 표시됩니다.

선택한 앨범을 삭제하라는 확인을 요청하는 삭제 확인 양식의 스크린샷.

삭제 단추를 클릭하면 폼이 서버에 다시 게시되고 DeleteConfirmed 작업이 실행됩니다.

//
// POST: /StoreManager/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{            
    Album album = db.Albums.Find(id);
    db.Albums.Remove(album);
    db.SaveChanges();
    return RedirectToAction("Index");
}

HTTP-POST 컨트롤러 삭제 작업은 다음 작업을 수행합니다.

1. ID로 앨범 로드
1. 앨범을 삭제하고 변경 내용을 저장합니다.
1. 목록에서 앨범이 제거되었음을 보여 주는 인덱스로 리디렉션합니다.

이를 테스트하려면 애플리케이션을 실행하고 /StoreManager로 이동합니다. 목록에서 앨범을 선택하고 삭제 링크를 클릭합니다.

빨간색 화살표로 강조 표시된 나열된 앨범과 연결된 삭제 옵션이 있는 앨범 목록의 스크린샷

그러면 삭제 확인 화면이 표시됩니다.

사용자에게 선택 앨범을 삭제하라는 확인을 묻는 확인 삭제 대화 상자의 스크린샷.

삭제 단추를 클릭하면 앨범이 제거되고 앨범이 삭제되었음을 보여 주는 Store Manager 인덱스 페이지로 돌아갑니다.

삭제된 앨범이 더 이상 앨범 목록에 없고 빨간색 화살표로 강조 표시된 앨범 목록 화면의 스크린샷

사용자 지정 HTML 도우미를 사용하여 텍스트 자르기

Microsoft Store 관리자 인덱스 페이지에 한 가지 잠재적인 문제가 있습니다. 앨범 제목 및 아티스트 이름 속성은 모두 테이블 서식을 해제할 수 있을 만큼 길 수 있습니다. 사용자 지정 HTML 도우미를 만들어 보기에서 이러한 속성과 기타 속성을 쉽게 잘라냅니다.

두 개의 긴 아티스트 이름과 두 개의 긴 앨범 이름이 빨간색 사각형으로 강조 표시된 앨범 목록의 스크린샷.

@helper Razor 구문을 사용하면 보기에서 사용할 고유한 도우미 함수를 쉽게 만들 수 있습니다. /Views/StoreManager/Index.cshtml 보기를 열고 줄 바로 다음에 @model 다음 코드를 추가합니다.

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

이 도우미 메서드는 문자열과 최대 길이를 허용합니다. 제공된 텍스트가 지정된 길이보다 짧으면 도우미가 있는 그대로 출력합니다. 더 길면 텍스트가 잘리고 "..."가 렌더링됩니다. 을 선택합니다.

이제 자르기 도우미를 사용하여 앨범 제목 및 아티스트 이름 속성이 모두 25자 미만인지 확인할 수 있습니다. 새 자르기 도우미를 사용하는 전체 보기 코드가 아래에 표시됩니다.

@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 = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <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>
        <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>

이제 /StoreManager/ URL을 검색하면 앨범과 타이틀이 최대 길이 이하로 유지됩니다.

빨간색 사각형으로 강조 표시된 자르기 도우미 프로세스 후 긴 아티스트 이름 두 개와 긴 앨범 이름이 두 개 있는 앨범 목록의 스크린샷

참고: 한 보기에서 도우미를 만들고 사용하는 간단한 사례를 보여줍니다. 사이트 전체에서 사용할 수 있는 도우미를 만드는 방법에 대한 자세한 내용은 내 블로그 게시물을 참조하세요. http://bit.ly/mvc3-helper-options

이전 다음