Bölüm 3: Görünümler ve Görünüm Modelleri

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çıklayan bir öğretici uygulamasıdır.

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 3, Görünümler ve ViewModel'leri kapsar.

Şimdiye kadar yalnızca denetleyici eylemlerinden dizeler döndürmektedir. Denetleyicilerin nasıl çalıştığı hakkında fikir edinmenin güzel bir yoludur, ancak gerçek bir web uygulaması oluşturmak istediğiniz yöntem bu değildir. Sitemizi ziyaret eden tarayıcılara HTML oluşturmak için daha iyi bir yol istiyoruz. Burada, html içeriğini daha kolay özelleştirmek için şablon dosyalarını kullanabiliriz. Views tam olarak bunu yapar.

Görünüm şablonu ekleme

Bir görünüm şablonu kullanmak için HomeController Index yöntemini bir ActionResult döndürecek ve aşağıdaki gibi View() döndürecek şekilde değiştireceğiz:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Yukarıdaki değişiklik, bir dize döndürmek yerine bir sonuç oluşturmak için "Görünüm" kullanmak istediğimizi gösterir.

Şimdi projemize uygun bir Görünüm şablonu ekleyeceğiz. Bunu yapmak için metin imlecini Dizin eylem yönteminin içinde konumlandıracak, ardından sağ tıklayıp "Görünüm Ekle" seçeneğini belirleyeceğiz. Bu, Görünüm Ekle iletişim kutusunu açar:

"Görünüm Ekle" iletişim kutusu, Görünüm şablon dosyalarını hızlı ve kolay bir şekilde oluşturmamızı sağlar. Varsayılan olarak "Görünüm Ekle" iletişim kutusu, oluşturulacak Görünüm şablonunun adını önceden doldurur; böylece bunu kullanacak eylem yöntemiyle eşleşir. HomeController'ımızın Index() eylem yönteminde "Görünüm Ekle" bağlam menüsünü kullandığımızdan, yukarıdaki "Görünüm Ekle" iletişim kutusunda varsayılan olarak önceden doldurulmuş görünüm adı olarak "Dizin" bulunur. Bu iletişim kutusundaki seçeneklerin hiçbirini değiştirmemiz gerekmez, bu nedenle Ekle düğmesine tıklayın.

Ekle düğmesine tıkladığımızda, Visual Web Developer \Views\Home dizininde bizim için yeni bir Index.cshtml görünüm şablonu oluşturacak ve henüz yoksa klasörü oluşturacak.

"Index.cshtml" dosyasının adı ve klasör konumu önemlidir ve varsayılan ASP.NET MVC adlandırma kurallarına uygundur. \Views\Home dizin adı, HomeController adlı denetleyiciyle eşleşir. Görünüm şablonu adı Olan Dizin, görünümün görüntüleneceği denetleyici eylem yöntemiyle eşleşir.

ASP.NET MVC, bir görünüm döndürmek için bu adlandırma kuralını kullandığımızda bir görünüm şablonunun adını veya konumunu açıkça belirtmek zorunda kalmamamızı sağlar. HomeController içinde aşağıdaki gibi kod yazdığımızda varsayılan olarak \Views\Home\Index.cshtml görünüm şablonunu işler:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Visual Web Developer, "Görünüm Ekle" iletişim kutusundaki "Ekle" düğmesine tıkladıktan sonra "Index.cshtml" görünüm şablonunu oluşturup açtı. Index.cshtml dosyasının içeriği aşağıda gösterilmiştir.

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

Bu görünüm, ASP.NET MVC'nin ASP.NET Web Forms ve önceki sürümlerinde kullanılan Web Forms görünüm altyapısından daha kısa olan Razor söz dizimini kullanır. Web Forms görünüm altyapısı ASP.NET MVC 3'te hala kullanılabilir, ancak birçok geliştirici Razor görünüm altyapısının MVC geliştirme ASP.NET çok uygun olduğunu fark eder.

İlk üç satır, ViewBag.Title kullanarak sayfa başlığını ayarlar. Bunun nasıl çalıştığına yakında daha ayrıntılı bir şekilde bakacağız, ancak önce metin başlığı metnini güncelleştirelim ve sayfayı görüntüleyelim. <Aşağıda gösterildiği gibi h2> etiketini "Bu Giriş Sayfasıdır" şeklinde güncelleştirin.

@{
    ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>

Uygulamayı çalıştırmak, yeni metnimizin giriş sayfasında görünür olduğunu gösterir.

Ortak site öğeleri için Düzen kullanma

Çoğu web sitesi birçok sayfa arasında paylaşılan içeriğe sahiptir: gezinti, alt bilgiler, logo resimleri, stil sayfası başvuruları vb. Razor görünüm altyapısı, /Views/Shared klasöründe bizim için otomatik olarak oluşturulan _Layout.cshtml adlı sayfayı kullanarak yönetmeyi kolaylaştırır.

Aşağıda gösterilen içeriği görüntülemek için bu klasöre çift tıklayın.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"     
            type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
            type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

Tek tek görünümlerimizden gelen içerik komut tarafından @RenderBody() görüntülenir ve bunun dışında görünmesini istediğimiz tüm ortak içerikler _Layout.cshtml işaretlemesine eklenebilir. MVC Müzik Mağazamızın, sitedeki tüm sayfalarda Giriş sayfamızın ve Mağaza alanımızın bağlantılarını içeren ortak bir üst bilgi olmasını istiyoruz, bu nedenle bunu doğrudan bu deyimin üst kısmındaki @RenderBody() şablona 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>
            ASP.NET MVC MUSIC STORE</h1>
        <ul id="navlist">
            <li class="first"><a href="/"
id="current">Home</a></li>
            <li><a
href="/Store/">Store</a></li>
        </ul>
    </div>
    @RenderBody()
</body>
</html>

Stil Sayfasını Güncelleştirme

Boş proje şablonu, doğrulama iletilerini görüntülemek için kullanılan stilleri içeren çok kolaylaştırılmış bir CSS dosyası içerir. Tasarımcımız, sitemizin genel görünümünü tanımlamak için bazı ek CSS ve görüntüler sağladığından, bunları şimdi ekleyeceğiz.

Güncelleştirilmiş CSS dosyası ve Görüntüler, MVC-Music-Store'da bulunan MvcMusicStore-Assets.zip İçerik dizinine eklenir. Her ikisini de Windows Gezgini'nde seçip aşağıda gösterildiği gibi Visual Web Developer'da Çözümümüzün İçerik klasörüne bırakacağız:

Mevcut Site.css dosyasının üzerine yazmak isteyip istemediğinizi onaylamanız istenir. Evet'e tıklayın.

Uygulamanızın İçerik klasörü artık aşağıdaki gibi görünür:

Şimdi uygulamayı çalıştıralım ve değişikliklerimizin Giriş sayfasında nasıl göründüğüne bakalım.

• Şimdi nelerin değiştiğini gözden geçirelim: Görünüm şablonumuz standart adlandırma kuralını izlediğinden, "return View()" adlı kodumuz olsa bile HomeController'ın Dizin eylem yöntemi \Views\Home\Index.cshtmlView şablonunu buldu ve görüntüledi.
• Giriş Sayfası, \Views\Home\Index.cshtml görünüm şablonunda tanımlanan basit bir karşılama iletisi görüntülüyor.
• Giriş Sayfası _Layout.cshtml şablonumuzu kullandığından karşılama iletisi standart site HTML düzeninde yer alır.

Görünümümüze bilgi geçirmek için Model Kullanma

Yalnızca sabit kodlanmış HTML görüntüleyen bir Görünüm şablonu çok ilginç bir web sitesi oluşturmaz. Dinamik bir web sitesi oluşturmak için bunun yerine denetleyici eylemlerimizdeki bilgileri görünüm şablonlarımıza geçirmek istiyoruz.

Model-Görünüm-Denetleyici düzeninde Model terimi, uygulamadaki verileri temsil eden nesnelere başvurur. Model nesneleri genellikle veritabanınızdaki tablolara karşılık gelir, ancak buna gerek yoktur.

ActionResult döndüren denetleyici eylem yöntemleri görünüme bir model nesnesi geçirebilir. Bu, denetleyicinin yanıt oluşturmak için gereken tüm bilgileri temiz bir şekilde paketlemesine ve ardından uygun HTML yanıtını oluşturmak için bu bilgileri bir Görünüm şablonuna geçirmesine olanak tanır. Bunu anlamak en kolay yolu bunu uygulamada görmektir, bu nedenle başlayalım.

İlk olarak mağazamızdaki Tarzları ve Albümleri temsil eden bazı Model sınıfları oluşturacağız. Bir Tarz sınıfı oluşturarak başlayalım. Projenizdeki "Modeller" klasörüne sağ tıklayın, "Sınıf Ekle" seçeneğini belirleyin ve dosyayı "Genre.cs" olarak adlandırın.

Ardından, oluşturulan sınıfa bir ortak dize Adı özelliği ekleyin:

public class Genre
{
    public string Name { get; set; }
}

Not: Merak ediyorsanız, { get; set; } gösterimi C# uygulamasının otomatik olarak uygulanan özellikler özelliğini kullanıyor. Bu, bir yedekleme alanı bildirmemize gerek kalmadan bir özelliğin avantajlarını sağlar.

Ardından, Title ve Genre özelliğine sahip bir Album sınıfı (Album.cs adlı) oluşturmak için aynı adımları izleyin:

public class Album
{
    public string Title { get; set; }
    public Genre Genre { get; set; }
}

Artık StoreController'ı Modelimizin dinamik bilgilerini görüntüleyen Görünümler'i kullanacak şekilde değiştirebiliriz. Şu anda tanıtım amacıyla Albümlerimizi istek kimliğine göre adlandırdıysak, bu bilgileri aşağıdaki görünümde gösterildiği gibi görüntüleyebiliriz.

Tek bir albümün bilgilerini göstermesi için Mağaza Ayrıntıları eylemini değiştirerek başlayacağız. MvcMusicStore.Models ad alanını eklemek için StoreControllers sınıfının en üstüne bir "using" deyimi ekleyin, bu nedenle albüm sınıfını her kullanmak istediğimizde MvcMusicStore.Models.Album yazmamız gerekmez. Bu sınıfın "usings" bölümü artık aşağıdaki gibi görünmelidir.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;

Ardından Details denetleyicisi eylemini güncelleştirerek HomeController'ın Index yönteminde yaptığımız gibi bir dize yerine ActionResult döndürmesini sağlayacağız.

public ActionResult Details(int id)

Artık bir Album nesnesini görünüme döndürmek için mantığı değiştirebiliriz. Bu öğreticinin ilerleyen bölümlerinde verileri veritabanından alacağız; ancak şu anda başlamak için "sahte veriler" kullanacağız.

public ActionResult Details(int id)
 {
    var album = new Album { Title = "Album " + id };
    return View(album);
 }

Not: C# dilini bilmiyorsanız var değerini kullanmanın albüm değişkenimizin geç bağlı olduğu anlamına geldiğini düşünebilirsiniz. Bu doğru değil– C# derleyicisi, değişkene atadığımız tür çıkarımını kullanarak albümün Albüm türünde olduğunu ve yerel albüm değişkenini Albüm türü olarak derlediğini tespit ediyor, bu nedenle derleme zamanı denetimi ve Visual Studio kod düzenleyicisi desteği elde ediyoruz.

Şimdi html yanıtı oluşturmak için Albümümüzü kullanan bir Görünüm şablonu oluşturalım. Bunu yapmadan önce, Görünüm Ekle iletişim kutusunun yeni oluşturulan Albüm sınıfımızı bilmesi için projeyi derlememiz gerekir. Hata Ayıkla⇨MvcMusicStore Oluştur menü öğesini seçerek projeyi oluşturabilirsiniz (ek kredi için projeyi derlemek için Ctrl-Shift-B kısayolunu kullanabilirsiniz).

Artık destekleyici sınıflarımızı ayarladığınıza göre Görünüm şablonumuzu oluşturmaya hazırız. Ayrıntılar yönteminin içine sağ tıklayın ve "Görünüm Ekle..." seçeneğini belirleyin ögesini seçin.

HomeController ile daha önce yaptığımız gibi yeni bir Görünüm şablonu oluşturacağız. StoreController'dan oluşturduğumuz için varsayılan olarak \Views\Store\Index.cshtml dosyasında oluşturulur.

Öncekilerden farklı olarak, "Kesin olarak belirlenmiş bir görünüm oluştur" onay kutusunu denetleyeceğiz. Ardından "Veri sınıfını görüntüle" açılan listesinden "Albüm" sınıfımızı seçeceğiz. Bu, "Görünüm Ekle" iletişim kutusunun, kullanmak üzere bir Albüm nesnesi geçirilmesini bekleyen bir Görünüm şablonu oluşturmasına neden olur.

"Ekle" düğmesine tıkladığımızda aşağıdaki kodu içeren \Views\Store\Details.cshtml View şablonu oluşturulur.

@model MvcMusicStore.Models.Album
@{
    ViewBag.Title = "Details";
}
<h2>Details</h2>

Bu görünümün Albüm sınıfımıza kesin olarak yazıldığını gösteren ilk satıra dikkat edin. Razor görünüm altyapısı bir Albüm nesnesi geçirildiğini anlar, bu nedenle model özelliklerine kolayca erişebilir ve hatta Visual Web Geliştirici düzenleyicisinde IntelliSense'in avantajına sahip olabiliriz.

<H2> etiketini, bu satırı aşağıdaki gibi görünecek şekilde değiştirerek Albüm başlığı özelliğini görüntüleyebilecek şekilde güncelleştirin.

<h2>Album: @Model.Title</h2>

Anahtar sözcüğünden sonraki @Model dönemi girdiğinizde, Album sınıfının desteklediği özellikleri ve yöntemleri göstererek IntelliSense'in tetiklendiğini unutmayın.

Şimdi projemizi yeniden çalıştıralım ve /Store/Details/5 URL'sini ziyaret edelim. Aşağıda olduğu gibi bir Albümün ayrıntılarını göreceğiz.

Şimdi MağazaYa göz atma eylem yöntemi için de benzer bir güncelleştirme yapacağız. Bir ActionResult döndürecek şekilde yöntemini güncelleştirin ve yöntem mantığını değiştirerek yeni bir Genre nesnesi oluşturup Görünüm'e döndürür.

public ActionResult Browse(string genre)
 {
    var genreModel = new Genre { Name = genre };
    return View(genreModel);
 }

Gözat yöntemine sağ tıklayın ve "Görünüm Ekle..." seçeneğini belirleyin bağlam menüsünden, kesin türe sahip bir Görünüm ekleyin ve Tür sınıfına kesin olarak yazılan bir ekleyin.

<Tür bilgilerini görüntülemek için görünüm kodundaki h2> öğesini (/Views/Store/Browse.cshtml içinde) güncelleştirin.

@model MvcMusicStore.Models.Genre
@{
    ViewBag.Title = "Browse";
}
<h2>Browsing Genre: @Model.Name</h2>

Şimdi projemizi yeniden çalıştıralım ve /Store/Gözat?'a göz atalım. Tarz=Disko URL'si. Aşağıda gösterildiği gibi Gözat sayfasını göreceğiz.

Son olarak , Mağaza Dizini eylem yönteminde biraz daha karmaşık bir güncelleştirme yapalım ve mağazamızdaki tüm Tarzların listesini görüntülemek için görüntüleyelim. Bunu yapmak için tek bir Tarz yerine model nesnemiz olarak Bir Tür Listesi kullanacağız.

public ActionResult Index()
{
    var genres = new List<Genre>
    {
        new Genre { Name = "Disco"},
        new Genre { Name = "Jazz"},
        new Genre { Name = "Rock"}
    };
    return View(genres);
 }

Mağaza Dizini eylem yöntemine sağ tıklayın ve daha önce olduğu gibi Görünüm Ekle'yi seçin, Model sınıfı olarak Tarz'ı seçin ve Ekle düğmesine basın.

İlk olarak bildirimi, görünümün yalnızca bir nesne yerine birkaç Tarz nesnesi beklediğini gösterecek şekilde değiştireceğiz @model . /Store/Index.cshtml dosyasının ilk satırını aşağıdaki gibi okuyacak şekilde değiştirin:

@model IEnumerable<MvcMusicStore.Models.Genre>

Bu, Razor görünüm altyapısına birkaç Genre nesnesini barındırabilen bir model nesnesiyle çalışacağını bildirir. Daha genel olduğundan, model türümüzü daha sonra IEnumerable<arabirimini destekleyen herhangi bir nesne türüyle değiştirmemize olanak tanıyacak şekilde Liste<Türü yerine IEnumerable Tarz>> kullanıyoruz.

Ardından, aşağıdaki tamamlanmış görünüm kodunda gösterildiği gibi modeldeki Tarz nesneleri arasında döngü yapacağız.

@model IEnumerable<MvcMusicStore.Models.Genre>
@{
    ViewBag.Title = "Store";
}
<h3>Browse Genres</h3>
<p>
    Select from @Model.Count()
genres:</p>
<ul>
    @foreach (var genre in Model)
    {
        <li>@genre.Name</li>
    }
</ul>

Bu kodu girerken tam IntelliSense desteğine sahip olduğumuza dikkat edin, böylece "@Model" yazdığımızda Tür türünde bir IEnumerable tarafından desteklenen tüm yöntemleri ve özellikleri görürüz.

"foreach" döngümüzde, Visual Web Developer her öğenin Tür türünde olduğunu bilir, bu nedenle Her Tür türü için IntelliSense'i görürüz.

Ardından, yapı iskelesi özelliği Genre nesnesini inceledi ve her birinin bir Name özelliğine sahip olacağını belirledi, bu nedenle döngü yapar ve bunları yazar. Ayrıca her bir öğe için Düzenle, Ayrıntılar ve Sil bağlantıları oluşturur. Bundan daha sonra mağaza yöneticimizde yararlanacağız, ancak şimdilik bunun yerine basit bir listeye sahip olmak istiyoruz.

Uygulamayı çalıştırıp /Store'a göz attığımızda, hem tür sayısının hem de listesinin görüntülendiğini görürüz.

Sayfalar arasına Bağlantılar ekleme

Tarzları listeleyen /Store URL'miz şu anda Tarz adlarını yalnızca düz metin olarak listeler. Bunu değiştirelim; bunun yerine düz metin yerine Uygun /Store/Gözat URL'sine Tarz adları bağlantısı edelim, böylece "Disco" gibi bir müzik türüne tıklanması /Store/Browse?genre=Disco URL'sine gider. \Views\Store\Index.cshtml View şablonumuzu aşağıdaki gibi bir kod kullanarak bu bağlantıların çıkışını alacak şekilde güncelleştirebiliriz (bunu yazın; bunu geliştireceğiz):

<ul>
    @foreach (var genre in Model)
    {
        <li><a href="/Store/Browse?genre=@genre.Name">@genre.Name</a></li>
    }
</ul>

Bu işe yarar, ancak daha sonra sabit kodlanmış bir dizeye bağlı olduğundan sorunlara yol açabilir. Örneğin Denetleyiciyi yeniden adlandırmak isteseydik, güncelleştirililmesi gereken bağlantıları bulmak için kodumuzda arama yapmamız gerekirdi.

Kullanabileceğimiz alternatif bir yaklaşım, HTML Yardımcısı yönteminden yararlanmaktır. ASP.NET MVC, aynı bunun gibi çeşitli ortak görevleri gerçekleştirmek için Görünüm şablonu kodumuzdan edinilebilen HTML Yardımcısı yöntemlerini içerir. Html.ActionLink() yardımcı yöntemi özellikle kullanışlı bir yöntemdir ve HTML <> bağlantıları oluşturmayı kolaylaştırır ve URL yollarının doğru URL ile kodlandığından emin olmak gibi rahatsız edici ayrıntıları ele alır.

Html.ActionLink(), bağlantılarınız için gereken kadar bilgi belirtmeye olanak sağlayan birkaç farklı aşırı yüklemeye sahiptir. En basit durumda, yalnızca bağlantı metnini ve köprüye istemciye tıklandığında gidilen Eylem yöntemini sağlayacaksınız. Örneğin, Aşağıdaki çağrıyı kullanarak Mağaza Ayrıntıları sayfasında "/Store/" Index() yöntemine "Mağaza Dizinine Git" bağlantı metniyle bağlantı oluşturabiliriz:

@Html.ActionLink("Go
to the Store Index", "Index")

Not: Bu durumda denetleyici adını belirtmemiz gerekmez çünkü yalnızca geçerli görünümü oluşturan denetleyici içinde başka bir eyleme bağlanıyoruz.

Gözat sayfasına yönelik bağlantılarımızın bir parametre geçirmesi gerekir, bu nedenle Html.ActionLink yönteminin üç parametre alan başka bir aşırı yüklemesini kullanacağız:

• 1. Tür adını görüntüleyen bağlantı metni
• 2. Denetleyici eylem adı (Gözat)
• 3. Hem adı (Tarz) hem de değeri (Tarz adı) belirterek parametre değerlerini yönlendirme

Bunların hepsini bir araya getirerek, bu bağlantıları Mağaza Dizini görünümüne şu şekilde yazacağız:

<ul>
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name,
"Browse", new { genre = genre.Name })</li>
    }
</ul>

Şimdi projemizi yeniden çalıştırıp /Store/ URL'sine eriştiğimizde bir tür listesi göreceğiz. Her tür bir köprüdür; tıklandığında bizi /Store/Browse?genre=[genre] URL'mize götürür.

Tür listesinin HTML'i şöyle görünür:

<ul>
    <li><a href="/Store/Browse?genre=Disco">Disco</a>
</li>
    <li><a href="/Store/Browse?genre=Jazz">Jazz</a>
</li>
    <li><a href="/Store/Browse?genre=Rock">Rock</a>
</li>
</ul>

ÖncekiSonraki