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 mevcuttur. 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 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 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 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.

sınıfında yöntemiyle IndexHelloWorldController 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 yöntemini bir View nesne döndürecek şekilde 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önteminin Index içine sağ tıklayın ve Görünüm Ekle'ye tıklayın.

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:

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

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 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ış dize gösterilmektedir.

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" ifadesinin 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 Film Uygulaması" olarak değiştirin.

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

Uygulamayı çalıştırın ve şimdi "MVC Film Uygulaması" ifadesinin yer olduğuna dikkat edin. Hakkında bağlantısına tıkladığınızda bu sayfanın da "MVC Film Uygulaması" olarak nasıl 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ı başardık.

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 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 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ş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.)

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.

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 parametreleri 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. Görünüm şablonu hiçbir zaman iş mantığı uygulamamalı 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 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 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. 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 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:

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.

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