Bagian 10: Updates Akhir untuk Navigasi dan Desain Situs, Kesimpulan

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas kedai belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 10 mencakup Updates Akhir untuk Navigasi dan Desain Situs, Kesimpulan.

Kami telah menyelesaikan semua fungsi utama untuk situs kami, tetapi kami masih memiliki beberapa fitur untuk ditambahkan ke navigasi situs, halaman beranda, dan halaman Telusuri Toko.

Membuat Tampilan Parsial Ringkasan Kedai Belanja

Kami ingin mengekspos jumlah item di keranjang belanja pengguna di seluruh situs.

Kami dapat dengan mudah menerapkan ini dengan membuat tampilan parsial yang ditambahkan ke Site.master kami.

Seperti yang ditunjukkan sebelumnya, pengontrol ShoppingCart menyertakan metode tindakan CartSummary yang mengembalikan tampilan parsial:

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

Untuk membuat tampilan parsial CartSummary, klik kanan pada folder Views/ShoppingCart dan pilih Tambahkan Tampilan. Beri nama tampilan CartSummary dan centang kotak centang "Buat tampilan parsial" seperti yang ditunjukkan di bawah ini.

Tampilan parsial CartSummary sangat sederhana - hanya tautan ke tampilan Indeks ShoppingCart yang menunjukkan jumlah item di keranjang. Kode lengkap untuk CartSummary.cshtml adalah sebagai berikut:

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

Kita dapat menyertakan tampilan parsial di halaman mana pun di situs, termasuk master Situs, dengan menggunakan metode Html.RenderAction. RenderAction mengharuskan kami menentukan Nama Tindakan ("CartSummary") dan Nama Pengontrol ("ShoppingCart") seperti di bawah ini.

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

Sebelum menambahkan ini ke Tata Letak situs, kami juga akan membuat Menu Genre sehingga kami dapat membuat semua pembaruan Site.master kami sekaligus.

Membuat Tampilan Parsial Menu Genre

Kami dapat mempermudah pengguna kami untuk menavigasi melalui toko dengan menambahkan Menu Genre yang mencantumkan semua Genre yang tersedia di toko kami.

Kita akan mengikuti langkah-langkah yang sama juga membuat tampilan parsial GenreMenu, dan kemudian kita dapat menambahkan keduanya ke master Situs. Pertama, tambahkan tindakan pengontrol GenreMenu berikut ke StoreController:

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

Tindakan ini mengembalikan daftar Genre yang akan ditampilkan oleh tampilan parsial, yang akan kita buat berikutnya.

Catatan: Kami telah menambahkan atribut [ChildActionOnly] ke tindakan pengontrol ini, yang menunjukkan bahwa kami hanya ingin tindakan ini digunakan dari Tampilan Parsial. Atribut ini akan mencegah tindakan pengontrol dijalankan dengan menelusuri ke /Store/GenreMenu. Ini tidak diperlukan untuk tampilan parsial, tetapi ini adalah praktik yang baik, karena kita ingin memastikan tindakan pengontrol kita digunakan seperti yang kita inginkan. Kami juga mengembalikan PartialView daripada Tampilan, yang memungkinkan mesin tampilan tahu bahwa itu tidak boleh menggunakan Tata Letak untuk tampilan ini, karena sedang disertakan dalam tampilan lain.

Klik kanan pada tindakan pengontrol GenreMenu dan buat tampilan parsial bernama GenreMenu yang sangat diketik menggunakan kelas data tampilan Genre seperti yang ditunjukkan di bawah ini.

Perbarui kode tampilan untuk tampilan parsial GenreMenu untuk menampilkan item menggunakan daftar yang tidak diurutkan sebagai berikut.

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

Memperbarui Tata Letak Situs untuk menampilkan Tampilan Parsial kami

Kita dapat menambahkan tampilan parsial kita ke Tata Letak Situs (/Views/Shared/_Layout.cshtml) dengan memanggil Html.RenderAction(). Kami akan menambahkan keduanya di, serta beberapa markup tambahan untuk menampilkannya, seperti yang ditunjukkan di bawah ini:

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

Sekarang ketika kita menjalankan aplikasi, kita akan melihat Genre di area navigasi kiri dan Ringkasan Kelima di bagian atas.

Perbarui ke halaman Telusuri Toko

Halaman Telusuri Toko berfungsi, tetapi tidak terlihat sangat bagus. Kita dapat memperbarui halaman untuk menampilkan album dalam tata letak yang lebih baik dengan memperbarui kode tampilan (ditemukan di /Views/Store/Browse.cshtml) sebagai berikut:

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

Di sini kita menggunakan Url.Action daripada Html.ActionLink sehingga kita dapat menerapkan pemformatan khusus ke tautan untuk menyertakan karya seni album.

Catatan: Kami menampilkan sampul album generik untuk album ini. Informasi ini disimpan dalam database dan dapat diedit melalui Store Manager. Anda dipersilakan untuk menambahkan karya seni Anda sendiri.

Sekarang ketika kita menelusuri ke Genre, kita akan melihat album yang ditampilkan dalam grid dengan karya seni album.

Memperbarui Halaman Beranda untuk menampilkan Album Penjualan Teratas

Kami ingin menampilkan album terjual teratas kami di beranda untuk meningkatkan penjualan. Kami akan membuat beberapa pembaruan untuk HomeController kami untuk menanganinya, dan menambahkan beberapa grafik tambahan juga.

Pertama, kita akan menambahkan properti navigasi ke kelas Album kita sehingga EntityFramework tahu bahwa mereka terkait. Beberapa baris terakhir dari kelas Album kita sekarang akan terlihat seperti ini:

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

Catatan: Ini akan mengharuskan penambahan pernyataan penggunaan untuk membawa namespace System.Collections.Generic.

Pertama, kita akan menambahkan bidang storeDB dan MvcMusicStore.Models menggunakan pernyataan, seperti di pengontrol kita yang lain. Selanjutnya, kita akan menambahkan metode berikut ke HomeController yang meminta database kita untuk menemukan album terjual teratas sesuai dengan OrderDetails.

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

Ini adalah metode privat, karena kami tidak ingin membuatnya tersedia sebagai tindakan pengontrol. Kami menyertakannya di HomeController untuk kesederhanaan, tetapi Anda dianjurkan untuk memindahkan logika bisnis Anda ke kelas layanan terpisah sebagaimana merujuknya.

Dengan itu, kita dapat memperbarui tindakan Pengontrol indeks untuk mengkueri 5 album penjualan teratas dan mengembalikannya ke tampilan.

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

Kode lengkap untuk HomeController yang diperbarui adalah seperti yang ditunjukkan di bawah ini.

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

Terakhir, kita harus memperbarui tampilan Indeks Rumah sehingga dapat menampilkan daftar album dengan memperbarui jenis Model dan menambahkan daftar album ke bagian bawah. Kami akan mengambil kesempatan ini untuk juga menambahkan judul dan bagian promosi ke halaman.

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

Sekarang ketika kita menjalankan aplikasi, kita akan melihat halaman beranda yang diperbarui dengan album penjualan teratas dan pesan promosi kita.

Kesimpulan

Kami telah melihat bahwa ASP.NET MVC memudahkan untuk membuat situs web canggih dengan akses database, keanggotaan, AJAX, dll. cukup cepat. Semoga tutorial ini telah memberi Anda alat yang Anda butuhkan untuk mulai membangun aplikasi MVC ASP.NET Anda sendiri!

Sebelumnya