10부: 탐색 및 사이트 디자인에 대한 최종 업데이트, 결론

아티클
07/13/2023

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

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

이 자습서 시리즈에서는 ASP.NET MVC Music Store 샘플 애플리케이션을 빌드하기 위해 수행된 모든 단계를 자세히 설명합니다. 10부에서는 탐색 및 사이트 디자인, 결론에 대한 최종 업데이트 다룹니다.

사이트의 모든 주요 기능을 완료했지만 사이트 탐색, 홈 페이지 및 스토어 찾아보기 페이지에 추가할 수 있는 몇 가지 기능이 있습니다.

쇼핑 카트 요약 부분 보기 만들기

전체 사이트에서 사용자의 쇼핑 카트에 있는 항목 수를 공개하려고 합니다.

장바구니 요약 스크린샷은 장르, 아티스트 및 가격과 같은 관련 정보가 포함된 카트의 항목을 보여 주는 스크린샷입니다.

사이트에 추가되는 부분 보기를 만들어 이를 쉽게 구현할 수 있습니다. master.

앞에서 설명한 것처럼 ShoppingCart 컨트롤러에는 부분 보기를 반환하는 CartSummary 작업 메서드가 포함되어 있습니다.

//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
 public ActionResult CartSummary()
{
    var cart = ShoppingCart.GetCart(this.HttpContext);
 
    ViewData["CartCount"] = cart.GetCount();
    return PartialView("CartSummary");
}

CartSummary 부분 보기를 만들려면 Views/ShoppingCart 폴더를 마우스 오른쪽 단추로 클릭하고 보기 추가를 선택합니다. 보기 이름을 CartSummary로 지정하고 아래와 같이 "부분 보기 만들기" 확인란을 검사.

쇼핑 카트의 부분 보기를 만들기 위한 메뉴 모음 선택 및 옵션의 스크린샷.

CartSummary 부분 보기는 매우 간단합니다. 카트의 항목 수를 보여 주는 쇼핑카트 인덱스 보기에 대한 링크일 뿐입니다. CartSummary.cshtml의 전체 코드는 다음과 같습니다.

@Html.ActionLink("Cart
(" + ViewData["CartCount"] + ")",
    "Index",
    "ShoppingCart",
    new { id = "cart-status" })

Html.RenderAction 메서드를 사용하여 사이트 master 포함한 사이트의 모든 페이지에 부분 보기를 포함할 수 있습니다. RenderAction을 사용하려면 작업 이름("CartSummary") 및 컨트롤러 이름("ShoppingCart")을 아래와 같이 지정해야 합니다.

@Html.RenderAction("CartSummary",
"ShoppingCart")

사이트 레이아웃에 추가하기 전에 모든 사이트를 만들 수 있도록 장르 메뉴도 만듭니다. 한 번에 업데이트를 master.

스토어에서 사용할 수 있는 모든 장르를 나열하는 장르 메뉴를 추가하여 사용자가 스토어를 탐색하는 것이 훨씬 쉬워질 수 있습니다.

쇼핑 카트 창의 왼쪽에 표시되는 부분 보기 장르 메뉴의 스크린샷.

동일한 단계에 따라 GenreMenu 부분 보기도 만든 다음 사이트 master 둘 다 추가할 수 있습니다. 먼저 StoreController에 다음 GenreMenu 컨트롤러 작업을 추가합니다.

//
// GET: /Store/GenreMenu
[ChildActionOnly]
 public ActionResult GenreMenu()
{
    var genres = storeDB.Genres.ToList();
    return PartialView(genres);
 }

이 작업은 부분 보기에 의해 표시되는 장르 목록을 반환하며, 다음에 만들 것입니다.

참고: 이 컨트롤러 작업에 [ChildActionOnly] 특성을 추가했습니다. 이는 부분 보기에서만 이 작업을 사용하려고 했음을 나타냅니다. 이 특성은 /Store/GenreMenu로 이동하여 컨트롤러 작업이 실행되지 않도록 합니다. 부분 보기에는 필요하지 않지만 컨트롤러 작업이 의도한 대로 사용되는지 확인하려고 하므로 좋은 방법입니다. 또한 뷰가 아닌 PartialView를 반환하여 보기 엔진이 다른 보기에 포함되므로 이 보기에 레이아웃을 사용하면 안 된다는 것을 알 수 있습니다.

GenreMenu 컨트롤러 작업을 마우스 오른쪽 단추로 클릭하고 아래와 같이 Genre view 데이터 클래스를 사용하여 강력한 형식의 GenreMenu라는 부분 보기를 만듭니다.

장르 메뉴를 나열하는 부분 보기를 만드는 데 사용되는 컨트롤러 작업 메뉴의 스크린샷

다음과 같이 순서가 지정되지 않은 목록을 사용하여 항목을 표시하도록 GenreMenu 부분 보기에 대한 보기 코드를 업데이트합니다.

@model IEnumerable<MvcMusicStore.Models.Genre>
<ul id="categories">
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name,
                "Browse", "Store", 
                new { Genre = genre.Name }, null)
        </li>
    }
</ul>

부분 보기를 표시하도록 사이트 레이아웃 업데이트

Html.RenderAction()을 호출하여 사이트 레이아웃(/Views/Shared/_Layout.cshtml)에 부분 보기를 추가할 수 있습니다. 아래와 같이 표시할 몇 가지 추가 태그뿐만 아니라 두 태그를 모두 에 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" 
        type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
        type="text/javascript"></script>
</head>
<body>
    <div id="header">
        <h1><a href="/">ASP.NET MVC MUSIC
STORE</a></h1>
        <ul id="navlist">
            <li class="first">
                <a href="@Url.Content("~")" id="current">
                    Home</a></li>
            <li><a href="@Url.Content("~/Store/")">Store</a></li>
            <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
            <li><a href="@Url.Content("~/StoreManager/")">
                    Admin</a></li>
        </ul>        
    </div>
    @{Html.RenderAction("GenreMenu", "Store");}
    <div id="main">
        @RenderBody()
    </div>
    <div id="footer">
        built with <a href="http://asp.net/mvc">ASP.NET MVC 3</a>
    </div>
</body>
</html>

이제 애플리케이션을 실행할 때 왼쪽 탐색 영역에 장르가 표시되고 맨 위에 카트 요약이 표시됩니다.

스토어 찾아보기 페이지로 업데이트

스토어 찾아보기 페이지가 작동하지만 잘 보이지는 않습니다. 다음과 같이 보기 코드(/Views/Store/Browse.cshtml에 있음)를 업데이트하여 더 나은 레이아웃으로 앨범을 표시하도록 페이지를 업데이트할 수 있습니다.

@model MvcMusicStore.Models.Genre
 
@{
    ViewBag.Title = "Browse Albums";
}
 
<div class="genre">
    <h3><em>@Model.Name</em> Albums</h3>
 
    <ul id="album-list">
        @foreach (var album in Model.Albums)
        {
            <li>
                <a href="@Url.Action("Details", 
                    new { id = album.AlbumId })">
                    <img alt="@album.Title" 
                        src="@album.AlbumArtUrl" />
                    <span>@album.Title</span>
                </a>
            </li>
        }
    </ul>
</div>

여기서는 Html.ActionLink 대신 Url.Action을 사용하여 앨범 아트워크를 포함하도록 링크에 특수 서식을 적용할 수 있습니다.

참고: 이 앨범의 일반 앨범 커버를 표시하고 있습니다. 이 정보는 데이터베이스에 저장되며 Store Manager를 통해 편집할 수 있습니다. 자신만의 아트워크를 추가할 수 있습니다.

이제 장르로 이동하면 앨범 아트워크가 있는 그리드에 표시된 앨범이 표시됩니다.

한 장르 내 앨범의 그리드 보기와 모든 장르를 표시하기 위해 창 왼쪽에 만들어진 부분 목록 보기를 보여 주는 음악 저장소 스크린샷.

상위 판매 앨범을 표시하도록 홈페이지 업데이트

우리는 판매를 증가하기 위해 홈페이지에 우리의 최고 판매 앨범을 특징으로하고 싶습니다. 이를 처리하기 위해 HomeController를 몇 가지 업데이트하고 일부 추가 그래픽도 추가하겠습니다.

먼저 EntityFramework가 연결되어 있음을 알 수 있도록 Album 클래스에 탐색 속성을 추가합니다. 이제 Album 클래스의 마지막 몇 줄은 다음과 같이 표시됩니다.

public virtual Genre  Genre                  { get; set; }
public virtual Artist Artist                 { get; set; }
public virtual List<OrderDetail>OrderDetails { get; set; }
    }
}

참고: System.Collections.Generic 네임스페이스를 가져오려면 using 문을 추가해야 합니다.

먼저 다른 컨트롤러와 마찬가지로 문을 사용하여 storeDB 필드와 MvcMusicStore.Models를 추가합니다. 다음으로, OrderDetails에 따라 상위 판매 앨범을 찾기 위해 데이터베이스를 쿼리하는 HomeController에 다음 메서드를 추가합니다.

private List<Album> GetTopSellingAlbums(int count)
 {
    // Group the order details by album and return
    // the albums with the highest count
    return storeDB.Albums
        .OrderByDescending(a => a.OrderDetails.Count())
        .Take(count)
        .ToList();
}

컨트롤러 작업으로 사용할 수 있도록 하고 싶지 않기 때문에 프라이빗 메서드입니다. 간단히 하기 위해 HomeController에 포함하지만 비즈니스 논리를 적절하게 별도의 서비스 클래스로 이동하는 것이 좋습니다.

이를 통해 인덱스 컨트롤러 작업을 업데이트하여 상위 5개 판매 앨범을 쿼리하고 보기로 반환할 수 있습니다.

public ActionResult Index()
{
    // Get most popular albums
    var albums = GetTopSellingAlbums(5);
 
    return View(albums);
 }

업데이트된 HomeController에 대한 전체 코드는 아래와 같습니다.

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        MusicStoreEntities storeDB = new MusicStoreEntities();
        public ActionResult Index()
        {
            // Get most popular albums
            var albums = GetTopSellingAlbums(5);
 
            return View(albums);
        }
        private List<Album> GetTopSellingAlbums(int count)
        {
            // Group the order details by album and return
            // the albums with the highest count
            return storeDB.Albums
                .OrderByDescending(a => a.OrderDetails.Count())
                .Take(count)
                .ToList();
        }
    }
}

마지막으로 모델 유형을 업데이트하고 앨범 목록을 아래쪽에 추가하여 앨범 목록을 표시할 수 있도록 홈 인덱스 보기를 업데이트해야 합니다. 이 기회를 통해 페이지에 제목 및 프로모션 섹션도 추가할 수 있습니다.

@model List<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "ASP.NET MVC Music Store";
}
<div id="promotion">
</div>
<h3><em>Fresh</em> off the grill</h3>
<ul id="album-list">
    @foreach (var album in Model)
    {
        <li><a href="@Url.Action("Details", "Store",
                new { id = album.AlbumId })">
            <img alt="@album.Title" src="@album.AlbumArtUrl" />
            <span>@album.Title</span>
</a>
        </li>
    }
</ul>

이제 애플리케이션을 실행할 때 가장 많이 팔린 앨범과 홍보 메시지가 포함된 업데이트된 홈페이지가 표시됩니다.

왼쪽 부분 보기에서 장르 목록을 보여 주는 음악 저장소 홈페이지 스크린샷, 맨 아래에 있는 앨범 선택, 페이지 중앙에 큰 홍보 메시지 등이 있습니다.

결론

ASP.NET MVC를 사용하면 데이터베이스 액세스, 멤버 자격, AJAX 등을 사용하여 정교한 웹 사이트를 쉽게 만들 수 있습니다. 꽤 빨리. 이 자습서에서는 고유한 ASP.NET MVC 애플리케이션 빌드를 시작하는 데 필요한 도구를 제공해 주셨으면 합니다.

다음을 통해 공유

10부: 탐색 및 사이트 디자인 최종 업데이트, 결론

쇼핑 카트 요약 부분 보기 만들기

장르 메뉴 부분 보기 만들기

부분 보기를 표시하도록 사이트 레이아웃 업데이트

스토어 찾아보기 페이지로 업데이트

상위 판매 앨범을 표시하도록 홈페이지 업데이트

결론

피드백

추가 리소스