Denetleyicileri ve Görünümleri Kullanarak Listeleme/Ayrıntılar Kullanıcı Arabirimi Uygulama

Microsoft tarafından

PDF’yi İndir

Bu, ASP.NET MVC 1 kullanarak küçük ama eksiksiz bir web uygulaması oluşturmayı gösteren ücretsiz bir "NerdDinner" uygulaması öğreticisinin 4. adımıdır.

4. Adım, kullanıcılara NerdDinner sitemizdeki akşam yemeklerinde veri listeleme/ayrıntılar gezinti deneyimi sağlamak için modelimizden yararlanan bir Denetleyicinin uygulamaya nasıl ekleneceğini gösterir.

ASP.NET MVC 3 kullanıyorsanız , MVC 3 veya MVC Music Store ile Çalışmaya Başlama öğreticilerini izlemenizi öneririz.

NerdDinner 4. Adım: Denetleyiciler ve Görünümler

Geleneksel web çerçeveleri (klasik ASP, PHP, ASP.NET Web Forms vb.) ile gelen URL'ler genellikle diskteki dosyalara eşlenir. Örneğin: "/Products.aspx" veya "/Products.php" gibi bir URL isteği bir "Products.aspx" veya "Products.php" dosyası tarafından işlenebilir.

Web tabanlı MVC çerçeveleri, URL'leri sunucu koduyla biraz farklı bir şekilde eşler. Gelen URL'leri dosyalara eşlemek yerine URL'leri sınıflardaki yöntemlerle eşler. Bu sınıflar "Denetleyiciler" olarak adlandırılır ve gelen HTTP isteklerini işleme, kullanıcı girişini işleme, verileri alma ve kaydetme ve istemciye geri gönderme yanıtını belirleme (HTML görüntüleme, dosya indirme, farklı bir URL'ye yönlendirme vb.) sorumludur.

NerdDinner uygulamamız için temel bir model oluşturduğumuza göre, bir sonraki adımımız, kullanıcılara sitemizdeki Akşam Yemekleri için veri listeleme/ayrıntılar gezinti deneyimi sağlamak için uygulamadan yararlanan bir Denetleyici eklemek olacaktır.

DinnersController Denetleyicisi Ekleme

Web projemizdeki "Denetleyiciler" klasörüne sağ tıklayıp Ardından Denetleyici Ekle menü komutunu seçerek başlayacağız (Ctrl-M>, Ctrl-C yazarak da bu komutu yürütebilirsiniz):

Bu, "Denetleyici Ekle" iletişim kutusunu açar:

Yeni denetleyiciye "DinnersController" adını vereceğiz ve "Ekle" düğmesine tıklıyoruz. Visual Studio daha sonra \Controllers dizinimizin altına bir DinnersController.cs dosyası ekler:

Ayrıca kod düzenleyicisinde yeni DinnersController sınıfını da açar.

DinnersController Sınıfına Index() ve Details() Eylem Yöntemleri Ekleme

Uygulamamızı kullanan ziyaretçilerin yaklaşan akşam yemekleri listesine göz atmasını ve ilgili belirli ayrıntıları görmek için listedeki herhangi bir Akşam Yemeği'ne tıklamalarına izin vermelerini istiyoruz. Bunu, uygulamamızdan aşağıdaki URL'leri yayımlayarak yapacağız:

URL	Amaç
/Akşam yemek -leri/	Yaklaşan akşam yemeklerinin HTML listesini görüntüleme
/Dinners/Details/[id]	URL'ye eklenmiş bir "id" parametresiyle belirtilen belirli bir akşam yemeğiyle ilgili ayrıntıları görüntüleyin. Bu parametre, veritabanındaki akşam yemeğinin DinnerID değeriyle eşleşir. Örneğin: /Dinners/Details/2, DinnerID değeri 2 olan Akşam Yemeği hakkındaki ayrıntıları içeren bir HTML sayfası görüntüler.

Aşağıdaki gibi DinnersController sınıfımıza iki genel "eylem yöntemi" ekleyerek bu URL'lerin ilk uygulamalarını yayımlayacağız:

public class DinnersController : Controller {

    //
    // HTTP-GET: /Dinners/

    public void Index() {
        Response.Write("<h1>Coming Soon: Dinners</h1>");
    }

    //
    // HTTP-GET: /Dinners/Details/2

    public void Details(int id) {
        Response.Write("<h1>Details DinnerID: " + id + "</h1>");
    }
}

Ardından NerdDinner uygulamasını çalıştıracak ve bunları çağırmak için tarayıcımızı kullanacağız. "/Dinners/" URL'sine yazmak Index() yöntemimizin çalışmasına neden olur ve aşağıdaki yanıtı geri gönderir:

"/Dinners/Details/2" URL'sine yazmak Details() yöntemimizin çalışmasına ve aşağıdaki yanıtı geri göndermesine neden olur:

Merak ediyor olabilirsiniz- ASP.NET MVC, DinnersController sınıfımızı oluşturmayı ve bu yöntemleri çağırmayı nasıl bildi? Bunu anlamak için yönlendirmenin nasıl çalıştığına hızlıca göz atalım.

ASP.NET MVC Yönlendirmeyi Anlama

ASP.NET MVC, URL'lerin denetleyici sınıflarına nasıl eşlendiğini denetleme konusunda çok fazla esneklik sağlayan güçlü bir URL yönlendirme altyapısı içerir. MVC ASP.NET nin oluşturulacak denetleyici sınıfını seçme şeklini, bu sınıf üzerinde hangi yöntemi çağıracağını tamamen özelleştirmemize ve değişkenlerin URL/Querystring'den otomatik olarak ayrıştırılıp parametre bağımsız değişkenleri olarak yönteme geçirilebileceği farklı yolları yapılandırmamıza olanak tanır. Bir siteyi SEO (arama motoru iyileştirmesi) için tamamen iyileştirme ve bir uygulamadan istediğimiz URL yapısını yayımlama esnekliği sunar.

Varsayılan olarak, yeni ASP.NET MVC projeleri önceden yapılandırılmış bir URL yönlendirme kuralları kümesiyle birlikte gelir. Bu, herhangi bir şeyi açıkça yapılandırmak zorunda kalmadan bir uygulamayı kolayca kullanmaya başlamamıza olanak tanır. Varsayılan yönlendirme kuralı kayıtları projelerimizin "Uygulama" sınıfında bulunabilir; bunu projemizin kökündeki "Global.asax" dosyasına çift tıklayarak açabiliriz:

Varsayılan ASP.NET MVC yönlendirme kuralları bu sınıfın "RegisterRoutes" yöntemine kaydedilir:

public void RegisterRoutes(RouteCollection routes) {

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",                                       // Route name
        "{controller}/{action}/{id}",                    // URL w/ params
        new { controller="Home", action="Index",id="" }  // Param defaults
    );
}

"Yollar. Yukarıdaki MapRoute()" yöntem çağrısı, "/{controller}/{action}/{id}" URL biçimini kullanarak gelen URL'leri denetleyici sınıflarına eşleyen varsayılan bir yönlendirme kuralı kaydeder: burada "denetleyici", örnek oluşturulacak denetleyici sınıfının adıdır; "eylem", çağrılacak ortak yöntemin adıdır ve "id", URL'nin içine eklenmiş ve yönteme bağımsız değişken olarak geçirilebilen isteğe bağlı bir parametredir. "MapRoute()" yöntem çağrısına geçirilen üçüncü parametre, URL'de bulunmamaları durumunda denetleyici/eylem/kimlik değerleri için kullanılacak varsayılan değerler kümesidir (Denetleyici = "Home", Action="Index", Id="").

Aşağıda, varsayılan "/{controllers}/{action}/{id}" yol kuralı kullanılarak çeşitli URL'lerin nasıl eşlendiğini gösteren bir tablo yer alır:

URL	Denetleyici Sınıfı	Eylem Yöntemi	Geçirilen Parametreler
/Akşam Yemekleri/Ayrıntılar/2	DinnersController	Ayrıntılar(kimlik)	id=2
/Akşam Yemekleri/Düzenle/5	DinnersController	Düzenle(kimlik)	id=5
/Dinners/Create	DinnersController	Create()	Yok
/Akşam yemek -leri	DinnersController	Index()	Yok
/Ev	HomeController	Index()	Yok
/	HomeController	Index()	Yok

Son üç satırda kullanılan varsayılan değerler (Denetleyici = Giriş, Eylem = Dizin, Kimlik = "") gösterilir. Belirtilmemişse "Index" yöntemi varsayılan eylem adı olarak kaydedildiğinden, "/Dinners" ve "/Home" URL'leri Index() eylem yönteminin Denetleyici sınıflarında çağrılmasına neden olur. "Home" denetleyicisi belirtilmezse varsayılan denetleyici olarak kaydedildiğinden, "/" URL'si HomeController'ın oluşturulmasına ve üzerindeki Index() eylem yönteminin çağrılmaya neden olur.

Bu varsayılan URL yönlendirme kurallarını beğenmezseniz, değiştirmenin kolay olması iyi haberdir; bunları yukarıdaki RegisterRoutes yönteminde düzenlemeniz gerekir. Ancak NerdDinner uygulamamız için varsayılan URL yönlendirme kurallarının hiçbirini değiştirmeyeceğiz; bunun yerine bunları olduğu gibi kullanacağız.

DinnersController'dan DinnerRepository Kullanma

Şimdi DinnersController'ın Index() ve Details() eylem yöntemlerinin geçerli uygulamasını modelimizi kullanan uygulamalarla değiştirelim.

Davranışı uygulamak için daha önce oluşturduğumuz DinnerRepository sınıfını kullanacağız. "NerdDinner.Models" ad alanına başvuran bir "using" deyimi ekleyerek başlayacağız ve ardından DinnerRepository örneğimizi DinnerController sınıfımızda bir alan olarak bildireceğiz.

Bu bölümün ilerleyen bölümlerinde "Bağımlılık Ekleme" kavramını tanıtacak ve Denetleyicilerimizin daha iyi birim testi sağlayan bir DinnerRepository'e başvuru elde etmelerini sağlamanın başka bir yolunu göstereceğiz. Ancak şu an için aşağıdaki gibi satır içi DinnerRepository örneğimizi oluşturacağız.

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

namespace NerdDinner.Controllers {

    public class DinnersController : Controller {

        DinnerRepository dinnerRepository = new DinnerRepository();

        //
        // GET: /Dinners/

        public void Index() {
            var dinners = dinnerRepository.FindUpcomingDinners().ToList();
        }

        //
        // GET: /Dinners/Details/2

        public void Details(int id) {
            Dinner dinner = dinnerRepository.GetDinner(id);
        }
    }
}

Artık alınan veri modeli nesnelerimizi kullanarak bir HTML yanıtı oluşturmaya hazırız.

Görünümleri Denetleyicimizle Kullanma

HTML'yi derlemek için eylem yöntemlerimiz içinde kod yazmak ve sonra bunu istemciye geri göndermek için Response.Write() yardımcı yöntemini kullanmak mümkün olsa da, bu yaklaşım hızlı bir şekilde oldukça zorlu hale gelir. Çok daha iyi bir yaklaşım, yalnızca DinnersController eylem yöntemlerimizde uygulama ve veri mantığını gerçekleştirmek ve ardından HTML yanıtı işlemek için gereken verileri, html gösteriminin çıkışından sorumlu olan ayrı bir "görünüm" şablonuna geçirmektir. Birazdan göreceğimiz gibi "görünüm" şablonu, genellikle HTML işaretlemesi ve eklenmiş işleme kodunun birleşimini içeren bir metin dosyasıdır.

Denetleyici mantığımızı görünüm işlememizden ayırmak birçok büyük avantaj sağlar. Özellikle uygulama kodu ile kullanıcı arabirimi biçimlendirme/işleme kodu arasında net bir "endişeler ayrımı" uygulanmasına yardımcı olur. Bu, uygulama mantığını ui işleme mantığından yalıtarak birim testini çok daha kolay hale getirir. Daha sonra uygulama kodu değişiklikleri yapmak zorunda kalmadan kullanıcı arabirimi işleme şablonlarını değiştirmeyi kolaylaştırır. Ayrıca geliştiricilerin ve tasarımcıların projeler üzerinde birlikte işbirliği yapmasını kolaylaştırabilir.

İki eylem yöntemimizin yöntem imzalarını "void" dönüş türü yerine "ActionResult" dönüş türüne sahip olacak şekilde değiştirerek, html kullanıcı arabirimi yanıtını geri göndermek için bir görünüm şablonu kullanmak istediğimizi belirtmek için DinnersController sınıfımızı güncelleştirebiliriz. Ardından, aşağıdaki gibi bir "ViewResult" nesnesini geri döndürmek için Denetleyici temel sınıfında View() yardımcı yöntemini çağırabiliriz:

public class DinnersController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // GET: /Dinners/

    public ActionResult Index() {

        var dinners = dinnerRepository.FindUpcomingDinners().ToList();

        return View("Index", dinners);
    }

    //
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View("Details", dinner);
    }
}

Yukarıda kullanmakta olduğumuz View() yardımcı yönteminin imzası aşağıdaki gibi görünür:

View() yardımcı yönteminin ilk parametresi, HTML yanıtını işlemek için kullanmak istediğimiz görünüm şablonu dosyasının adıdır. İkinci parametre, HTML yanıtını işlemek için görünüm şablonunun ihtiyaç duyduğu verileri içeren bir model nesnesidir.

Index() eylem yöntemimizde View() yardımcı yöntemini çağırıyoruz ve "Index" görünüm şablonu kullanarak akşam yemeklerinin HTML listesini işlemek istediğimizi gösteriyoruz. Görünüm şablonuna, listeyi oluşturmak için dinner nesnelerinin bir dizisini geçiriyoruz:

//
    // GET: /Dinners/

    public ActionResult Index() {
    
        var dinners = dinnerRepository.FindUpcomingDinners().ToList();
        
        return View("Index", dinners);
    }

Details() eylem yöntemimizde URL içinde sağlanan kimliği kullanarak bir Dinner nesnesi almaya çalışıyoruz. Geçerli bir Akşam Yemeği bulunursa, alınan Dinner nesnesini işlemek için bir "Ayrıntılar" görünüm şablonu kullanmak istediğimizi belirten View() yardımcı yöntemini çağırırız. Geçersiz bir akşam yemeği istenirse, "NotFound" görünüm şablonu (ve yalnızca şablon adını alan View() yardımcı yönteminin aşırı yüklenmiş bir sürümü) kullanılarak Akşam Yemeğinin mevcut olmadığını belirten yararlı bir hata iletisi oluştururuz:

//
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.FindDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View("Details", dinner);
    }

Şimdi "NotFound", "Details" ve "Index" görünüm şablonlarını uygulayalım.

"NotFound" Görünüm Şablonunu Uygulama

İlk olarak istenen akşam yemeğinin bulunamadığını belirten kolay bir hata iletisi görüntüleyen "NotFound" görünüm şablonunu uygulayacağız.

Metin imlecimizi bir denetleyici eylem yöntemi içinde konumlandırıp sağ tıklayıp "Görünüm Ekle" menü komutunu seçerek yeni bir görünüm şablonu oluşturacağız (bu komutu Ctrl-M, Ctrl-V yazarak da yürütebiliriz):

Bu, aşağıdaki gibi bir "Görünüm Ekle" iletişim kutusunu açar. Varsayılan olarak iletişim kutusu, iletişim kutusu başlatıldığında imlecin içinde olduğu eylem yönteminin adıyla eşleşecek şekilde oluşturulacak görünümün adını önceden doldurur (bu örnekte "Ayrıntılar"). İlk olarak "NotFound" şablonunu uygulamak istediğimizden, bu görünüm adını geçersiz kılacağız ve bunun yerine "NotFound" olarak ayarlayacağız:

"Ekle" düğmesine tıkladığımızda, Visual Studio "\Views\Dinners" dizininde bizim için yeni bir "NotFound.aspx" görünüm şablonu oluşturur (dizin zaten yoksa bu şablon da oluşturulur):

Ayrıca kod düzenleyicisinde yeni "NotFound.aspx" görünüm şablonumuzu da açar:

Varsayılan olarak görüntüleme şablonlarının içerik ve kod ekleyebileceğimiz iki "içerik bölgesi" vardır. İlki, geri gönderilen HTML sayfasının "başlığını" özelleştirmemizi sağlar. İkincisi, geri gönderilen HTML sayfasının "ana içeriğini" özelleştirmemizi sağlar.

"NotFound" görünüm şablonumuzu uygulamak için bazı temel içerikler ekleyeceğiz:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Dinner Not Found
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Dinner Not Found</h2>

    <p>Sorry - but the dinner you requested doesn't exist or was deleted.</p>

</asp:Content>

Daha sonra tarayıcıdan deneyebiliriz. Bunu yapmak için "/Dinners/Details/9999" URL'sini isteyelim. Bu, şu anda veritabanında bulunmayan bir akşam yemeğine başvurur ve DinnersController.Details() eylem yöntemimizin "NotFound" görünüm şablonumuzu işlemesine neden olur:

Yukarıdaki ekran görüntüsünde fark ettiğiniz bir şey, temel görünüm şablonumuzun ekrandaki ana içeriği çevreleyen bir dizi HTML'yi devraldığıdır. Bunun nedeni, görünüm şablonumuzun sitedeki tüm görünümlere tutarlı bir düzen uygulamamıza olanak tanıyan bir "ana sayfa" şablonu kullanıyor olmasıdır. Bu öğreticinin sonraki bölümlerinde ana sayfaların nasıl daha fazla çalıştığını ele alacağız.

"Ayrıntılar" Görünüm Şablonunu Uygulama

Şimdi tek bir Akşam Yemeği modeli için HTML oluşturacak olan "Ayrıntılar" görünüm şablonunu uygulayalım.

Bunu yapmak için metin imlecimizi Ayrıntılar eylem yönteminin içine yerleştirip sağ tıklayıp "Görünüm Ekle" menü komutunu seçeceğiz (veya Ctrl-M, Ctrl-V tuşlarına basın):

Bu, "Görünüm Ekle" iletişim kutusunu açar. Varsayılan görünüm adını ("Ayrıntılar") tutacağız. Ayrıca iletişim kutusunda "Kesin olarak belirlenmiş görünüm oluştur" onay kutusunu seçip (birleşik giriş kutusu açılan menüsünü kullanarak) Denetleyiciden Görünüm'e geçirmekte olduğumuz model türünün adını seçeceğiz. Bu görünüm için bir Dinner nesnesi geçiriyoruz (bu türün tam adı: "NerdDinner.Models.Dinner"):

"Boş Görünüm" oluşturmayı seçtiğimiz önceki şablondan farklı olarak, bu kez bir "Ayrıntılar" şablonu kullanarak görünümü otomatik olarak "iskele" oluşturmayı seçeceğiz. Yukarıdaki iletişim kutusunda "İçeriği görüntüle" açılan listesini değiştirerek bunu gösterebiliriz.

"yapı iskelesi", ayrıntılar görünümü şablonumuzun bir ilk uygulamasını oluşturur ve bu şablona geçirmekte olduğumuz Dinner nesnesine göre oluşturulur. Bu, görünüm şablonu uygulamamıza hızlı bir şekilde başlamamız için kolay bir yol sağlar.

"Ekle" düğmesine tıkladığımızda Visual Studio, "\Views\Dinners" dizinimizde bizim için yeni bir "Details.aspx" görünüm şablonu dosyası oluşturur:

Ayrıca kod düzenleyicisinde yeni "Details.aspx" görünüm şablonumuzu da açar. Bir Akşam Yemeği modelini temel alan ayrıntılar görünümünün ilk yapı iskelesi uygulamasını içerir. yapı iskelesi altyapısı, geçirilen sınıfta kullanıma sunulan genel özelliklere bakmak için .NET yansımasını kullanır ve bulduğu her türe göre uygun içeriği ekler:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Details
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Details</h2>

    <fieldset>
        <legend>Fields</legend>
        <p>
            DinnerID:
            <%=Html.Encode(Model.DinnerID) %>
        </p>
        <p>
            Title:
            <%=Html.Encode(Model.Title) %>
        </p>
        <p>
            EventDate:
            <%= Html.Encode(String.Format("{0:g}", Model.EventDate)) %>
        </p>
        <p>
            Description:
            <%=Html.Encode(Model.Description) %>
        </p>
        <p>
            HostedBy:
            <%=Html.Encode(Model.HostedBy) %>
        </p>
        <p>
            ContactPhone:
            <%=Html.Encode(Model.ContactPhone) %>
        </p>
        <p>
            Address:
            <%=Html.Encode(Model.Address) %>
        </p>
        <p>
            Country:
            <%=Html.Encode(Model.Country) %>
        </p>
        <p>
            Latitude:
            <%= Html.Encode(String.Format("{0:F}",Model.Latitude)) %>
        </p>
        <p>
            Longitude:
            <%= Html.Encode(String.Format("{0:F}",Model.Longitude)) %>
        </p>
    </fieldset>
    
    <p>
        <%=Html.ActionLink("Edit","Edit", new { id=Model.DinnerID }) %>|
        <%=Html.ActionLink("Back to List", "Index") %>
    </p>
    
</asp:Content>

Bu "ayrıntılar" yapı iskelesi uygulamasının tarayıcıda nasıl göründüğünü görmek için "/Dinners/Details/1" URL'sini isteyebiliriz. Bu URL kullanıldığında, veritabanımızı ilk oluşturduğumuzda el ile eklediğimiz akşam yemeklerinden biri görüntülenir:

Bu, hızla çalışmaya başlamamızı sağlar ve Details.aspx görünümümüzün ilk uygulamasını sağlar. Daha sonra gidip kullanıcı arabirimini bizim memnuniyetimize göre özelleştirmek için ayarlayabiliriz.

Details.aspx şablonuna daha yakından baktığımızda, bunun hem statik HTML hem de eklenmiş işleme kodu içerdiğini göreceğiz. <% %> code nuggets execute code when the view template render, <%= %> code nuggets execute the code contained of the code is execute the output stream of the template.

Görünümümüz içinde, kesin olarak türü belirlenmiş bir "Model" özelliği kullanılarak denetleyicimizden geçirilen "Akşam Yemeği" model nesnesine erişen kod yazabiliriz. Visual Studio, düzenleyicide bu "Model" özelliğine erişirken bize tam kod intellisense sağlar:

Son Ayrıntılar görünümü şablonumuzun kaynağının aşağıdaki gibi görünmesi için bazı ayarlamalar yapalım:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Dinner: <%=Html.Encode(Model.Title) %>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%=Html.Encode(Model.Title) %></h2>
    <p>
        <strong>When:</strong> 
        <%=Model.EventDate.ToShortDateString() %> 

        <strong>@</strong>
        <%=Model.EventDate.ToShortTimeString() %>
    </p>
    <p>
        <strong>Where:</strong> 
        <%=Html.Encode(Model.Address) %>,
        <%=Html.Encode(Model.Country) %>
    </p>
     <p>
        <strong>Description:</strong> 
        <%=Html.Encode(Model.Description) %>
    </p>       
    <p>
        <strong>Organizer:</strong> 
        <%=Html.Encode(Model.HostedBy) %>
        (<%=Html.Encode(Model.ContactPhone) %>)
    </p>
    
    <%= Html.ActionLink("Edit Dinner", "Edit", new { id=Model.DinnerID })%> |
    <%= Html.ActionLink("Delete Dinner","Delete", new { id=Model.DinnerID})%>   
     
</asp:Content>

"/Dinners/Details/1" URL'sine yeniden eriştiğimizde artık aşağıdaki gibi işlenir:

"Dizin" Görünüm Şablonunu Uygulama

Şimdi yaklaşan Akşam Yemeklerinin bir listesini oluşturacak olan "Dizin" görünüm şablonunu uygulayalım. Bunu yapmak için metin imlecimizi Dizin eylem yönteminin içine yerleştireceğiz ve sağ tıklayıp "Görünüm Ekle" menü komutunu seçeceğiz (veya Ctrl-M, Ctrl-V tuşlarına basın).

"Görünüm Ekle" iletişim kutusunda "Dizin" adlı görünüm şablonunu tutacağız ve "Kesin olarak belirlenmiş bir görünüm oluştur" onay kutusunu seçeceğiz. Bu kez otomatik olarak bir "Liste" görünüm şablonu oluşturmayı ve model türü görünüme geçirilirken "NerdDinner.Models.Dinner" öğesini seçeceğiz (bir "Liste" iskelesi oluşturduğumuzu belirttiğimiz için Görünüm Ekle iletişim kutusunun, Denetleyicimizden Görünüme bir akşam yemeği nesneleri dizisi geçtiğimizi varsaymasına neden olur):

"Ekle" düğmesine tıkladığımızda Visual Studio, "\Views\Dinners" dizinimizde bizim için yeni bir "Index.aspx" görünüm şablonu dosyası oluşturur. Görünüme geçirdiğimiz Akşam Yemekleri'nin HTML tablosu listesini sağlayan bir ilk uygulama "iskelesi" oluşturur.

Uygulamayı çalıştırıp "/Dinners/" URL'sine eriştiğimizde, akşam yemeği listemizi şöyle işler:

Yukarıdaki tablo çözümü, Akşam Yemeği verilerimizin kılavuz benzeri bir düzenini sunar. Bu, tüketicinin Akşam Yemeği listesi için tam olarak istediğimiz bir şey değildir. Index.aspx görünüm şablonunu güncelleştirebilir ve daha az veri sütunu listeleyerek değiştirebilir ve aşağıdaki kodu kullanarak bunları tablo yerine işlemek için ul> öğesi kullanabiliriz<:

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Upcoming Dinners</h2>

    <ul>
        <% foreach (var dinner in Model) { %>
        
            <li>                 
                <%=Html.Encode(dinner.Title) %>            
                on 
                <%=Html.Encode(dinner.EventDate.ToShortDateString())%>
                @
                <%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
            </li>
            
        <% } %>
    </ul>
    
</asp:Content>

Yukarıdaki foreach deyimindeki "var" anahtar sözcüğünü Modelimizdeki her akşam yemeği için döngü halinde kullanıyoruz. C# 3.0'a aşina olmayanlar, "var" kullanmanın akşam yemeği nesnesinin geç bağlı olduğu anlamına geldiğini düşünebilir. Bunun yerine, derleyicinin türü kesin olarak belirlenmiş "Model" özelliğine ("IEnumerable<Dinner>" türünde) karşı tür çıkarımı kullandığı ve yerel "akşam yemeği" değişkenini Akşam Yemeği türü olarak derlediği anlamına gelir; bu da kod blokları içinde tam intellisense ve derleme zamanı denetimi aldığımız anlamına gelir:

Tarayıcımızda /Dinners URL'sinde yenile'ye bastığımızda güncelleştirilmiş görünümümüz aşağıdaki gibi görünür:

Bu daha iyi görünüyor ama henüz tam olarak orada değil. Son adımımız, son kullanıcıların listedeki tek tek Akşam Yemekleri'ne tıklayıp bunlar hakkındaki ayrıntıları görmelerini sağlamaktır. Bunu, DinnersController'ımızdaki Details eylem yöntemine bağlanan HTML köprü öğelerini işleyerek uygulayacağız.

Bu köprüleri Dizin görünümümüzde iki yoldan biriyle oluşturabiliriz. İlki, html <öğesinin içine % bloklarını> eklediğimiz <aşağıdaki gibi bir>> öğeyi <el ile oluşturmaktır:

Kullanabileceğimiz alternatif bir yaklaşım, ASP.NET MVC içindeki yerleşik "Html.ActionLink()" yardımcı yönteminden yararlanmak ve bir Denetleyicide başka bir eylem yöntemine bağlanan bir> HTML <öğesini program aracılığıyla oluşturmayı desteklemektir:

<%= Html.ActionLink(dinner.Title, "Details", new { id=dinner.DinnerID }) %>

Html.ActionLink() yardımcı yönteminin ilk parametresi görüntülenecek bağlantı metnidir (bu durumda akşam yemeğinin başlığı), ikinci parametre bağlantıyı oluşturmak istediğimiz Denetleyici eylem adıdır (bu örnekte Ayrıntılar yöntemi) ve üçüncü parametre eyleme gönderilecek bir parametre kümesidir (özellik adı/değerleriyle anonim bir tür olarak uygulanır). Bu durumda, bağlanmak istediğimiz akşam yemeğinin "id" parametresini belirtiyoruz ve ASP.NET MVC'deki varsayılan URL yönlendirme kuralı "{Controller}/{Action}/{id}" olduğundan Html.ActionLink() yardımcı yöntemi aşağıdaki çıkışı oluşturur:

<a href="/Dinners/Details/1">.NET Futures</a>

Index.aspx görünümümüz için Html.ActionLink() yardımcı yöntemi yaklaşımını kullanacağız ve her akşam yemeğini uygun ayrıntılar URL'sinin liste bağlantısına ekleyeceğiz:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Upcoming Dinners
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Upcoming Dinners</h2>

    <ul>
        <% foreach (var dinner in Model) { %>
        
            <li>     
                <%=Html.ActionLink(dinner.Title, "Details", new { id=dinner.DinnerID }) %>
                on 
                <%=Html.Encode(dinner.EventDate.ToShortDateString())%>
                @
                <%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
            </li>
            
        <% } %>
    </ul>
</asp:Content>

Ve şimdi /Dinners URL'sine gittiğimizde akşam yemeği listemiz aşağıdaki gibi görünür:

Listedeki Akşam Yemeklerinden herhangi birine tıkladığımızda, bu konuyla ilgili ayrıntıları görmek için gideriz:

Kural tabanlı adlandırma ve \Views dizin yapısı

ASP.NET MVC uygulamaları varsayılan olarak görünüm şablonlarını çözümlerken kural tabanlı dizin adlandırma yapısı kullanır. Bu, geliştiricilerin Bir Denetleyici sınıfı içinden görünümlere başvururken bir konum yolunu tam olarak nitelemekten kaçınmasını sağlar. Varsayılan olarak ASP.NET MVC, uygulamanın altındaki *\Views[ControllerName]* dizininde görünüm şablonu dosyasını arar.

Örneğin, üç görünüm şablonuna açıkça başvuran DinnersController sınıfı üzerinde çalışıyoruz: "Index", "Details" ve "NotFound". ASP.NET MVC varsayılan olarak uygulama kök dizinimizin altındaki \Views\Dinners dizininde bu görünümleri arar:

Projede şu anda üç denetleyici sınıfı olduğuna (DinnersController, HomeController ve AccountController – projeyi oluşturduğumuz sırada son ikisi varsayılan olarak eklenmiştir) ve \Views dizininde üç alt dizin (her denetleyici için bir tane) olduğuna dikkat edin.

Giriş ve Hesaplar denetleyicilerinden başvuruda bulunan görünümler, görünüm şablonlarını ilgili \Görünümler\Giriş ve \Görünümler\Hesap dizinlerinden otomatik olarak çözümler. \Views\Shared alt dizini, uygulama içindeki birden çok denetleyicide yeniden kullanılan görünüm şablonlarını depolamak için bir yol sağlar. ASP.NET MVC bir görünüm şablonunu çözümlemeyi denediğinde, önce \Views[Controller] özel dizinini denetler ve görünüm şablonunu orada bulamazsa \Views\Shared dizinine bakar.

Tek tek görünüm şablonlarını adlandırma konusunda önerilen kılavuz, görünüm şablonunun işlenmesine neden olan eylem yöntemiyle aynı adı paylaşmasını sağlamaktır. Örneğin, yukarıdaki "Dizin" eylem yöntemimiz görünüm sonucunu işlemek için "Dizin" görünümünü kullanıyor ve "Ayrıntılar" eylem yöntemi de sonuçları işlemek için "Ayrıntılar" görünümünü kullanıyor. Bu, her eylemle hangi şablonun ilişkili olduğunu hızla görmeyi kolaylaştırır.

Görünüm şablonu denetleyicide çağrılan eylem yöntemiyle aynı ada sahip olduğunda geliştiricilerin görünüm şablonu adını açıkça belirtmesi gerekmez. Bunun yerine model nesnesini "View()" yardımcı yöntemine (görünüm adını belirtmeden) geçirebiliriz ve ASP.NET MVC bunu işlemek için diskteki \Views[ControllerName][ActionName] görünüm şablonunu kullanmak istediğimizi otomatik olarak çıkarsar.

Bu, denetleyici kodumuzu biraz temizlememize ve kodumuzda adı iki kez yinelemekten kaçınmamıza olanak tanır:

public class DinnersController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // GET: /Dinners/

    public ActionResult Index() {

        var dinners = dinnerRepository.FindUpcomingDinners().ToList();

        return View(dinners);
    }

    //
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View(dinner);
    }
}

Yukarıdaki kod, site için güzel bir Akşam Yemeği listeleme/ayrıntılar deneyimi uygulamak için gereken tek şey.

Sonraki Adım

Artık güzel bir Akşam Yemeği göz atma deneyimimiz var.

Şimdi CRUD (Oluşturma, Okuma, Güncelleştirme, Silme) veri formu düzenleme desteğini etkinleştirelim.

ÖncekiSonraki