Görünüm Ekleme (C#)

tarafından Rick Anderson

Not

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

Bu öğreticide, Microsoft Visual Studio'nun ücretsiz sürümü olan Microsoft Visual Web Developer 2010 Express Service Pack 1'i kullanarak ASP.NET MVC Web uygulaması oluşturmanın temelleri öğretilecektir. Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun. Aşağıdaki bağlantıya tıklayarak bunların tümünü yükleyebilirsiniz: Web Platformu Yükleyicisi. Alternatif olarak, aşağıdaki bağlantıları kullanarak önkoşulları tek tek yükleyebilirsiniz:

Visual Studio Web Developer Express SP1 önkoşulları

ASP.NET MVC 3 Araçları Güncelleştirmesi

SQL Server Compact 4.0(çalışma zamanı + araçlar desteği)

Visual Web Developer 2010 yerine Visual Studio 2010 kullanıyorsanız, aşağıdaki bağlantıya tıklayarak önkoşulları yükleyin: Visual Studio 2010 önkoşulları.

C# kaynak koduna sahip bir Visual Web Developer projesi bu konuya eşlik edebilir. C# sürümünü indirin. Visual Basic'i tercih ediyorsanız, bu öğreticinin Visual Basic sürümüne geçin.

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

ASP.NET MVC 3 ile sunulan yeni 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 şık 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ı ve akıcı bir kodlama iş akışı sağlar.

sınıfında yöntemiyle Index HelloWorldController bir görünüm şablonu kullanarak başlayın. Şu anda yöntemi, Index denetleyici sınıfında sabit kodlanmış bir ileti içeren bir dize döndürür. Index Aşağıdaki gibi bir nesne döndürmek View için yöntemini değiştirin:

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

Bu kod, tarayıcıya HTML yanıtı oluşturmak için bir görünüm şablonu kullanır. Projede, yöntemiyle Index kullanabileceğiniz bir görünüm şablonu ekleyin. Bunu yapmak için yöntemin Index içine sağ tıklayın ve Görünüm Ekle'ye tıklayın.

Dizin vurgulandıktan sonra parantezi gösteren ekran görüntüsü. Sağ tıklama menüsünde Görünüm Ekle seçilidir.

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 penceresini gösteren ekran görüntüsü. Merhaba Dünya alt klasörü ve Dizin noktası c s h t m l, Görünümler klasörünün altında kırmızıyla daire içine alınır.

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

Etiketinin <h2> altına biraz HTML ekleyin. Değiştirilen MvcMovie\Views\HelloWorld\Index.cshtml dosyası aşağıda gösterilmiştir.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Uygulamayı çalıştırın ve denetleyiciye HelloWorld (http://localhost:xxxx/HelloWorld gidin). 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\HelloWorld klasö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ış dize gösterilmektedir.

M V C Uygulamam'daki Dizin 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 "Dizin" ve sayfadaki büyük başlıkta "MVC Uygulamam" olduğuna dikkat edin. Bunları değiştirelim.

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

İlk olarak, sayfanın üst kısmındaki "MVC Uygulamam" 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".

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() Dosyanın alt kısmındaki satırı not edin. 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. Düzen şablonundaki başlık başlığını "MVC Uygulamam" olan "MVC Movie App" olarak değiştirin.

<div id="title">
      <h1>MVC Movie App</h1>
  </div>

Uygulamayı çalıştırın ve artık "MVC Film Uygulaması" ifadesinin olduğuna dikkat edin. Hakkında bağlantısına tıkladığınızda bu sayfanın da nasıl "MVC Film Uygulaması" olarak gösterildiğini görürsünüz. Düzen şablonunda bir kez değişiklik yaptık ve sitedeki tüm sayfaların yeni başlığı yansıtmasını sağlandı.

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

tam _Layout.cshtml dosyası aşağıda gösterilmiştir:

<!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>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

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

MvcMovie\Views\HelloWorld\Index.cshtml dosyasını açın. Değişiklik yapılacak iki yer vardır: önce tarayıcının başlığında görünen metin ve ardından ikincil üst bilgide ( <h2> öğesi). Bu değişiklikleri biraz farklı hale getirerek uygulamanın hangi bölümünde hangi kod değişikliğinin olduğunu görebilirsiniz.

@{
    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 olan) bir Title özelliğini ayarlar. Düzen şablonunun kaynak koduna bakarsanız, şablonun html bölümünün bir parçası <head> olarak öğesinde <title> bu değeri kullandığını fark edersiniz. Bu 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şiklikleri 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.)

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 sayfalara uygulanan değişiklikler yapmayı gerçekten kolaylaştırır.

M V C Film Uygulamasında Film Listem'i gösteren ekran görüntüsü.

Ancak küçük "veri" (bu örnekte "Görünüm Şablonumuzdan Merhaba!" iletisi) sabit kodlanmıştır. MVC uygulamasının "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 modeller hakkında konuşmadan önce, önce denetleyiciden görünüme bilgi geçirme hakkında konuşalım. Denetleyici sınıfları, gelen URL isteğine yanıt olarak çağrılır. Denetleyici sınıfı, gelen parametreleri işleyen, veritabanından veri alan ve sonuçta tarayıcıya ne tür bir yanıt gönderileceğine 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. 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, yalnızca denetleyici tarafından sağlanan verilerle çalışmalıdır. Bu "sorun ayrımını" korumak kodunuzun temiz ve daha sürdürülebilir kalmasına yardımcı olur.

Şu anda sınıfındaki Welcome HelloWorldController eylem yöntemi bir name ve numTimes 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 görünüm şablonu kullanacak şekilde değiştirelim. Görünüm şablonu dinamik bir yanıt oluşturur, yani 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 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ı özellikleri yoktur. 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();
        }
    }
}

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

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

Ardından yöntemin Welcome içine sağ tıklayın ve Görünüm Ekle'ye tıklayın. 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 yeni Welcome.cshtml dosyasındaki <h2> öğesinin altına aşağıdaki kodu ekleyin. Kullanıcının söylediği kadar çok "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

Artık veriler URL'den alınır ve denetleyiciye otomatik olarak 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 Film Uygulamasında Hoş Geldiniz sayfasını gösteren ekran görüntüsü.

Bu model için bir çeşit "M"ydi ama veritabanı türü için değil. Öğrendiklerini alıp filmlerden oluşan bir veritabanı oluşturalım.

Geri İleri

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2023-07-13

Aracılığıyla paylaş

Görünüm Ekleme (C#)

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

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

Geri Bildirim

Ek kaynaklar