Aracılığıyla paylaş

Görünüm Ekleme (2012)

tarafından Rick Anderson

Not

Bu öğreticinin ASP.NET MVC 5 ve Visual Studio 2013 kullanan güncelleştirilmiş bir sürümü burada mevcuttur. Daha güvenlidir, takip etmek çok daha kolaydır ve daha fazla özellik gösterir.

Bu bölümde sınıfını HelloWorldController , bir istemciye HTML yanıtları oluşturma işlemini temiz bir şekilde kapsüllemek için şablon dosyalarını görüntülemeyi kullanacak şekilde değiştireceksiniz.

ASP.NET MVC 3 ile sunulan Razor görünüm altyapısını kullanarak bir görünüm şablonu dosyası oluşturacaksınız. Razor tabanlı görünüm şablonları bir .cshtml dosya uzantısına sahiptir ve C# kullanarak HTML çıkışı oluşturmak için zarif bir yol sağlar. Razor, bir görünüm şablonu yazarken gereken karakter ve tuş vuruşlarının sayısını en aza indirir ve hızlı, akıcı bir kodlama iş akışı sağlar.

Şu anda yöntemi, Index denetleyici sınıfında sabit kodlanmış bir ileti içeren bir dize döndürür. Aşağıdaki kodda Index gösterildiği gibi nesnesini döndürmek View için yöntemini değiştirin:

public ActionResult Index() 
{ 
    return View(); 
}

Yukarıdaki Index yöntem, tarayıcıya HTML yanıtı oluşturmak için bir görünüm şablonu kullanır. Yukarıdaki yöntem gibi Index denetleyici yöntemleri (eylem yöntemleri olarak da bilinir), genellikle dize gibi temel türler değil bir ActionResult (veya ActionResult'tan türetilen bir sınıf) döndürür.

Projede, yöntemiyle Index kullanabileceğiniz bir görünüm şablonu ekleyin. Bunu yapmak için yönteminin Index içine sağ tıklayın ve Görünüm Ekle'ye tıklayın.

Sağ tıklama menüsünde Görünüm Ekle'nin seçili olduğunu gösteren ekran görüntüsü.

Görünüm Ekle iletişim kutusu görüntülenir. Varsayılan değerleri olduğu gibi bırakın ve Ekle düğmesine tıklayın:

Görünüm Ekle iletişim kutusunu gösteren ekran görüntüsü. Dizin, Görünüm adı alanındadır.

MvcMovie\Views\HelloWorld klasörü ve MvcMovie\Views\HelloWorld\Index.cshtml dosyası oluşturulur. Bunları Çözüm Gezgini görebilirsiniz:

Çözüm Gezgini gösteren ekran görüntüsü. Merhaba Dünya alt klasöründe dizin noktası c s h t m l seçilir.

Aşağıda, oluşturulan Index.cshtml dosyası gösterilmektedir:

HelloWorldIndex

Etiketin altına aşağıdaki HTML'yi <h2> ekleyin.

<p>Hello from our View Template!</p>

MvcMovie\Views\HelloWorld\Index.cshtml dosyasının tamamı aşağıda gösterilmiştir.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Visual Studio 2012 kullanıyorsanız, çözüm gezgininde Index.cshtml dosyasına sağ tıklayın ve Sayfa Denetçisinde Görüntüle'yi seçin.

PI

Sayfa Denetçisi öğreticisinde bu yeni araç hakkında daha fazla bilgi bulunur.

Alternatif olarak, uygulamayı çalıştırın ve denetleyiciye HelloWorld ()http://localhost:xxxx/HelloWorld göz atın. Index Denetleyicinizdeki yöntem çok fazla iş yapmadı; basitçe deyimini return View()çalıştırdı ve yöntemin tarayıcıya bir yanıt işlemek için bir görünüm şablonu dosyası kullanması gerektiğini belirtti. Kullanılacak görünüm şablonu dosyasının adını açıkça belirtmediğiniz için ASP.NET MVC varsayılan olarak \Views\HelloWorldklasöründeki Index.cshtml görünüm dosyasını kullanır. Aşağıdaki görüntüde, görünümde sabit kodlanmış "Görünüm Şablonumuzdan Merhaba!" dizesi gösterilmektedir.

My A S P dot NET Index sayfasını gösteren ekran görüntüsü.

Oldukça iyi görünüyor. Ancak, tarayıcının başlık çubuğunda "A ASP.NET Dizinimi Dizinle" ifadesinin gösterildiğine ve sayfanın üst kısmındaki büyük bağlantının "burada logonuz" yazdığına dikkat edin. "Logonuz burada." bağlantısının altında kayıt ve oturum açma bağlantıları, aşağıda ise Giriş, Hakkında ve Kişi sayfalarına bağlantılar yer alır. Bunlardan bazılarını değiştirelim.

Görünümleri ve Düzen Sayfalarını Değiştirme

İlk olarak, sayfanın üst kısmındaki "logonuz burada" başlığını değiştirmek istiyorsunuz. Bu metin her sayfada ortaktır. Uygulamadaki her sayfada görünse bile projede yalnızca bir yerde uygulanır. Çözüm Gezgini'da /Views/Shared klasörüne gidin ve _Layout.cshtml dosyasını açın. Bu dosya düzen sayfası olarak adlandırılır ve diğer tüm sayfaların kullandığı paylaşılan "kabuk".

_LayoutCshtml

Düzen şablonları, sitenizin HTML kapsayıcı düzenini tek bir yerde belirtmenize ve ardından sitenizdeki birden çok sayfaya uygulamanıza olanak sağlar. @RenderBody() Satırı bulun. RenderBody , oluşturduğunuz görünüme özgü tüm sayfaların düzen sayfasında "sarmalanmış" olarak göründüğü bir yer tutucudur. Örneğin, Hakkında bağlantısını seçerseniz, Views\Home\About.cshtml görünümü yöntemi içinde RenderBody işlenir.

Düzen şablonundaki site başlığı başlığını "burada logonuz" olan "MVC Filmi" olarak değiştirin.

<div class="float-left">
    <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p>
</div>

title öğesinin içeriğini aşağıdaki işaretlemeyle değiştirin:

<title>@ViewBag.Title - Movie App</title>

Uygulamayı çalıştırın ve şimdi "MVC Filmi" yazdığına dikkat edin. Hakkında bağlantısına tıkladığınızda bu sayfanın da "MVC Filmi" olarak nasıl gösterildiğini görebilirsiniz. Düzen şablonunda bir kez değişiklik yaptık ve sitedeki tüm sayfaların yeni başlığı yansıtmasını başardık.

M V C Hakkında Film sayfasını gösteren ekran görüntüsü.

Şimdi Dizin görünümünün başlığını değiştirelim.

MvcMovie\Views\HelloWorld\Index.cshtml dosyasını açın. Değişiklik yapmak için iki yer vardır: ilk olarak, tarayıcının başlığında görünen metin ve ardından ikincil üst bilgide ( <h2> öğe). Uygulamanın hangi bölümünde kod değişikliği olduğunu görebilmek için bunları biraz farklı hale getirirsiniz.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Görüntülenecek HTML başlığını belirtmek için, yukarıdaki kod nesnenin ViewBag (Index.cshtml görünüm şablonunda yer alan) bir Title özelliğini ayarlar. Düzen şablonunun kaynak koduna bakarsanız, şablonun daha önce değiştirdiğimiz HTML bölümünün bir parçası <head> olarak öğesinde <title> bu değeri kullandığını fark edeceksiniz. Bu ViewBag yaklaşımı kullanarak, görünüm şablonunuzla düzen dosyanız arasında kolayca başka parametreler geçirebilirsiniz.

Uygulamayı çalıştırın ve adresine http://localhost:xx/HelloWorldgidin. Tarayıcı başlığının, birincil başlığın ve ikincil başlıkların değiştiğine dikkat edin. (Tarayıcıda değişiklik görmüyorsanız, önbelleğe alınmış içeriği görüntülüyor olabilirsiniz. Sunucudan gelen yanıtı yüklenmeye zorlamak için tarayıcınızda Ctrl+F5 tuşlarına basın.) Tarayıcı başlığı, Index.cshtml görünüm şablonunda ayarladığımız ve düzen dosyasına eklenen ek "- Film Uygulaması" ile ViewBag.Title oluşturulur.

Ayrıca Index.cshtml görünüm şablonundaki içeriğin _Layout.cshtml görünüm şablonuyla nasıl birleştirildiğine ve tarayıcıya tek bir HTML yanıtı gönderildiğine de dikkat edin. Düzen şablonları, uygulamanızdaki tüm sayfalarda geçerli olan değişiklikler yapmayı gerçekten kolaylaştırır.

M V C Filmi Film Listem sayfasını gösteren ekran görüntüsü.

Ancak küçük bir "veri" (bu örnekte "Görünüm Şablonumuzdan Merhaba!" iletisi) sabit kodlanmıştır. MVC uygulamasında "V" (görünüm) ve "C" (denetleyici) var ancak henüz "M" (model) yok. Kısa bir süre sonra veritabanı oluşturma ve bu veritabanından model verileri alma adımlarını inceleyeceğiz.

Denetleyiciden Görünüme Veri Geçirme

Bir veritabanına gidip modellerden bahsetmeden önce, önce denetleyiciden görünüme bilgi geçirmeyi konuşalım. Denetleyici sınıfları gelen URL isteğine yanıt olarak çağrılır. Denetleyici sınıfı, gelen tarayıcı isteklerini işleyen, veritabanından veri alan ve sonuçta tarayıcıya geri gönderilecek yanıt türüne karar veren kodu yazdığınız yerdir. Görünüm şablonları daha sonra tarayıcıya html yanıtı oluşturmak ve biçimlendirmek için bir denetleyiciden kullanılabilir.

Denetleyiciler, bir görünüm şablonunun tarayıcıya yanıt işlemesi için gereken verileri veya nesneleri sağlamakla sorumludur. En iyi yöntem: Görünüm şablonu hiçbir zaman iş mantığı gerçekleştirmemeli veya bir veritabanıyla doğrudan etkileşim kurmamalıdır. Bunun yerine, görünüm şablonu yalnızca denetleyici tarafından sağlanan verilerle çalışmalıdır. Bu "sorun ayrımını" korumak kodunuzun temiz, test edilebilir ve daha sürdürülebilir kalmasına yardımcı olur.

Şu anda sınıfındaki WelcomeHelloWorldController eylem yöntemi bir namenumTimes ve parametresini alır ve ardından değerleri doğrudan tarayıcıya çıkarır. Denetleyicinin bu yanıtı dize olarak işlemesini sağlamak yerine, bunun yerine denetleyiciyi bir görünüm şablonu kullanacak şekilde değiştirelim. Görünüm şablonu dinamik bir yanıt oluşturur; başka bir deyişle yanıtı oluşturmak için denetleyiciden görünüme uygun veri bitlerini geçirmeniz gerekir. Bunu yapmak için denetleyicinin görünüm şablonunun ihtiyaç duyduğu dinamik verileri (parametreler) görünüm şablonunun erişebileceği bir ViewBag nesneye yerleştirmesini sağlayabilirsiniz.

HelloWorldController.cs dosyasına dönün ve nesnesine bir Message ve NumTimes değeri eklemek için ViewBag yöntemini değiştirinWelcome. ViewBag dinamik bir nesnedir; bu da içine istediğiniz her şeyi koyabileceğiniz anlamına gelir; ViewBag içine bir şey koyana kadar nesnenin tanımlı özelliği yoktur. ASP.NET MVC model bağlama sistemi, adres çubuğundaki sorgu dizesindeki adlandırılmış parametreleri (name ve numTimes) yönteminizdeki parametrelerle otomatik olarak eşler. HelloWorldController.cs dosyasının tamamı şöyle görünür:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

ViewBag Artık nesne, görünüme otomatik olarak geçirilecek verileri içeriyor.

Ardından hoş geldiniz görünümü şablonuna ihtiyacınız var! Projenin derlendiğinden emin olmak için Derleme menüsündeN Derleme MvcMovie'yi seçin.

Ardından yöntemin Welcome içine sağ tıklayın ve Görünüm Ekle'ye tıklayın.

Merhaba Dünya Denetleyicisi nokta c s sekmesini gösteren ekran görüntüsü. Çözüm Gezgini penceresinde, Merhaba Dünya Denetleyicisi nokta c s sağ tıklama menüsünde Görünüm Ekle seçilidir.

Görünüm Ekle iletişim kutusu şöyle görünür:

Görünüm Ekle iletişim kutusunu gösteren ekran görüntüsü. Hoş Geldiniz, Görünüm adı alanındadır.

Ekle'ye tıklayın ve ardından yeni Welcome.cshtml dosyasındaki öğesinin altına <h2> aşağıdaki kodu ekleyin. Kullanıcının söylediği kadar "Merhaba" diyen bir döngü oluşturacaksınız. Welcome.cshtml dosyasının tamamı aşağıda gösterilmiştir.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul> 
   @for (int i=0; i < ViewBag.NumTimes; i++) { 
      <li>@ViewBag.Message</li> 
   } 
</ul>

Uygulamayı çalıştırın ve aşağıdaki URL'ye göz atın:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Şimdi veriler URL'den alınır ve model bağlayıcısı kullanılarak denetleyiciye geçirilir. Denetleyici verileri bir ViewBag nesneye paketler ve bu nesneyi görünüme geçirir. Görünüm daha sonra verileri kullanıcıya HTML olarak görüntüler.

M V C Filme Hoş Geldiniz sayfasını gösteren ekran görüntüsü.

Yukarıdaki örnekte, denetleyiciden görünüme veri geçirmek için bir ViewBag nesnesi kullandık. Öğreticide ikinci olarak, bir denetleyiciden görünüme veri geçirmek için bir görünüm modeli kullanacağız. Veri geçirmeye yönelik görünüm modeli yaklaşımı genellikle görünüm çantası yaklaşımına göre çok daha fazla tercih edilir. Daha fazla bilgi için Dinamik V Kesin Yazılan Görünümler blog girdisine bakın.

Bu model için bir tür "M" idi ama veritabanı türü için değil. Öğrendiklerini alıp bir film veritabanı oluşturalım.

ÖncekiSonraki

  • Last updated on