Bölüm 10: Gezinti ve Site Tasarımına Yönelik Son Güncelleştirmeler, Sonuç

tarafından Jon Galloway

MVC Müzik Deposu, web geliştirme için ASP.NET MVC ve Visual Studio'yu kullanmayı adım adım tanıtır ve açıklar.

MVC Music Store, müzik albümlerini çevrimiçi olarak satan ve temel site yönetimi, kullanıcı oturum açma ve alışveriş sepeti işlevlerini uygulayan basit bir örnek mağaza uygulamasıdır.

Bu öğretici serisi, ASP.NET MVC Müzik Deposu örnek uygulamasını derlemek için atılan tüm adımların ayrıntılarını içerir. Bölüm 10, Gezinti ve Site Tasarımı, Sonuç için Son Güncelleştirmeler kapsar.

Sitemiz için tüm önemli işlevleri tamamladık, ancak yine de site gezintisine, giriş sayfasına ve Mağaza Göz Atma sayfasına eklenecek bazı özelliklerimiz var.

Alışveriş Sepeti Özeti Kısmi Görünümü Oluşturma

Kullanıcının alışveriş sepetindeki öğelerin sayısını sitenin tamamında kullanıma açmak istiyoruz.

Bunu, Site.master'ımıza eklenen kısmi bir görünüm oluşturarak kolayca uygulayabiliriz.

Daha önce gösterildiği gibi ShoppingCart denetleyicisinde kısmi görünüm döndüren bir CartSummary eylem yöntemi bulunur:

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

CartSummary kısmi görünümünü oluşturmak için Views/ShoppingCart klasörüne sağ tıklayın ve Görünüm Ekle'yi seçin. Görünümü CartSummary olarak adlandırın ve aşağıda gösterildiği gibi "Kısmi görünüm oluştur" onay kutusunu işaretleyin.

CartSummary kısmi görünümü gerçekten basittir; yalnızca alışveriş sepetindeki öğelerin sayısını gösteren ShoppingCart Index görünümüne bir bağlantıdır. CartSummary.cshtml dosyasının tam kodu aşağıdaki gibidir:

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

Html.RenderAction yöntemini kullanarak Site yöneticisi de dahil olmak üzere sitedeki herhangi bir sayfaya kısmi görünüm ekleyebilirsiniz. RenderAction, eylem adını ("CartSummary") ve Denetleyici Adını ("ShoppingCart") aşağıda gösterildiği gibi belirtmemizi gerektirir.

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

Bunu site Düzenine eklemeden önce, aynı anda tüm Site.master güncelleştirmelerimizi yapabilmemiz için Tarz Menüsünü de oluşturacağız.

Tür Menüsü Kısmi Görünüm Oluşturma

Mağazamızda bulunan tüm Tarzları listeleyen bir Tarz Menüsü ekleyerek kullanıcılarımızın mağazada gezinmesini çok daha kolay hale getirebiliriz.

Aynı adımları izleyerek bir GenreMenu kısmi görünümü de oluşturacağız ve ardından ikisini de Site yöneticisine ekleyebiliriz. İlk olarak, StoreController'a aşağıdaki GenreMenu denetleyicisi eylemini ekleyin:

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

Bu eylem, kısmi görünüm tarafından görüntülenecek tarzların listesini döndürür ve bundan sonra bunu oluşturacağız.

Not: Bu denetleyici eylemine [ChildActionOnly] özniteliğini ekledik. Bu, bu eylemin yalnızca Kısmi Görünümden kullanılmasını istediğimizi gösterir. Bu öznitelik, /Store/GenreMenu öğesine göz atarak denetleyici eyleminin yürütülmesini engeller. Bu, kısmi görünümler için gerekli değildir, ancak denetleyici eylemlerimizin amaçladığımız şekilde kullanıldığından emin olmak istediğimizden iyi bir uygulamadır. Görünüm altyapısının, diğer görünümlere eklendiğinden bu görünüm için Düzen'i kullanmaması gerektiğini bilmesini sağlayan Görünüm yerine PartialView'ı da döndürüyoruz.

GenreMenu denetleyicisi eylemine sağ tıklayın ve aşağıda gösterildiği gibi Tarz görünümü veri sınıfı kullanılarak kesin olarak yazılan GenreMenu adlı kısmi bir görünüm oluşturun.

Öğeleri sıralanmamış bir liste kullanarak görüntülemek için GenreMenu kısmi görünümünün görünüm kodunu aşağıdaki gibi güncelleştirin.

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

Kısmi Görünümlerimizi görüntülemek için Site Düzenini Güncelleştirme

Html.RenderAction() öğesini çağırarak kısmi görünümlerimizi Site Düzenine (/Views/Shared/_Layout.cshtml) ekleyebiliriz. Aşağıda gösterildiği gibi bunları hem içine hem de görüntülemek için bazı ek işaretlemeler ekleyeceğiz:

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

Şimdi uygulamayı çalıştırdığımızda sol gezinti alanında Tarz'ı ve üst kısımda Sepet Özeti'ni göreceğiz.

Mağaza Gözat sayfasına güncelleştirme

Mağaza Gözat sayfası işlevseldir, ancak pek iyi görünmüyor. Görünüm kodunu (/Views/Store/Browse.cshtml içinde bulunur) aşağıdaki gibi güncelleştirerek sayfayı daha iyi bir düzende gösterecek şekilde güncelleştirebiliriz:

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

Burada, albüm resmini eklemek için bağlantıya özel biçimlendirme uygulayabilmek için Html.ActionLink yerine Url.Action'ı kullanıyoruz.

Not: Bu albümler için genel bir albüm kapağı görüntülüyoruz. Bu bilgiler veritabanında depolanır ve Store Manager aracılığıyla düzenlenebilir. Kendi resminizi ekleyebilirsiniz.

Bir Tarz'a göz attığımızda albümlerin, albüm resmiyle birlikte bir kılavuzda gösterildiğini göreceğiz.

Giriş Sayfasını En Çok Satan Albümleri Gösterecek Şekilde Güncelleştirme

Satışları artırmak için giriş sayfasında en çok satan albümlerimizi öne çıkaracağız. Bunu işlemek için HomeController'ımız için bazı güncelleştirmeler yapacağız ve bazı ek grafikler de ekleyeceğiz.

İlk olarak, EntityFramework'in ilişkilendirildiğini bilmesi için Albüm sınıfımıza bir gezinti özelliği ekleyeceğiz. Albüm sınıfımızın son birkaç satırı şu şekilde görünmelidir:

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

Not: Bunun için System.Collections.Generic ad alanını getirmek için bir using deyimi eklenmesi gerekir.

İlk olarak, diğer denetleyicilerimizde olduğu gibi deyimleri kullanarak bir storeDB alanı ve MvcMusicStore.Models ekleyeceğiz. Ardından Aşağıdaki yöntemi HomeController'a ekleyeceğiz ve bu yöntem veritabanımızı sorgular ve OrderDetails'e göre en çok satan albümleri buluruz.

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

Bu özel bir yöntemdir, çünkü bunu denetleyici eylemi olarak kullanılabilir hale getirmek istemeyiz. Kolaylık olması için bunu HomeController'a dahil ediyoruz, ancak iş mantığınızı uygun şekilde ayrı hizmet sınıflarına taşımanız teşvik edilir.

Bunu yaptığımızda Dizin denetleyicisi eylemini güncelleştirerek en çok satan 5 albümü sorgulayabilir ve bunları görünüme döndürebiliriz.

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

Güncelleştirilmiş HomeController için tam kod aşağıda gösterildiği gibidir.

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

Son olarak, Model türünü güncelleştirerek ve albüm listesini en alta ekleyerek albüm listesini görüntüleyebilmesi için Giriş Dizini görünümümüzü güncelleştirmemiz gerekir. Bu fırsatı kullanarak sayfaya bir başlık ve yükseltme bölümü de ekleyeceğiz.

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

Şimdi uygulamayı çalıştırdığımızda, en çok satan albümlerin ve promosyon mesajımızın yer olduğu güncelleştirilmiş giriş sayfamızı göreceğiz.

Sonuç

ASP.NET MVC'nin veritabanı erişimi, üyelik, AJAX vb. ile gelişmiş bir web sitesi oluşturmayı kolaylaştırdığını gördük. oldukça hızlı. Umarım bu öğreticide kendi ASP.NET MVC uygulamalarınızı oluşturmaya başlamak için ihtiyacınız olan araçlar verilmiştir!

Önceki