Aracılığıyla paylaş

Görünüm Ekleme (VB)

tarafından Rick Anderson

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

VB.NET kaynak koduna sahip bir Visual Web Geliştirici projesi bu konuya eşlik edebilir. VB.NET sürümünü indirin. C# dilini tercih ediyorsanız bu öğreticinin C# 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 bir görünüm şablonu dosyası kullanacak şekilde sınıfını değiştireceğiz HelloWorldController .

Sınıfındaki HelloWorldController yöntemiyle Index bir görünüm şablonu kullanarak başlayalım. Şu anda yöntemi, Index denetleyici sınıfı içinde 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 Function Index() As ActionResult
            Return View()
        End Function

Şimdi projemize yöntemiyle Index çağırabileceğiniz bir görünüm şablonu ekleyelim. Bunu yapmak için yöntemin Index içine sağ tıklayın ve Görünüm Ekle'ye tıklayın.

IndexAddView

Görünüm Ekle iletişim kutusu görüntülenir. Varsayılan girdileri bırakın ve Ekle düğmesine tıklayın.

3addView

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

SolnExpHelloWorldIndx

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

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

Uygulamayı çalıştırın ve "hello world" denetleyicisine (http://localhost:xxxx/HelloWorld ) göz atın. Index Denetleyicinizdeki yöntem çok fazla iş yapmadı; yalnızca deyimini return View()çalıştırdı. Bu, istemciye bir yanıt işlemek için bir görünüm şablonu dosyası kullanmak istediğimizi belirtti. Kullanılacak görünüm şablonu dosyasının adını açıkça belirtmediğimizden ASP.NET MVC varsayılan olarak \Views\HelloWorld klasöründeki Index.vbhtml görünüm dosyasını kullanır. Aşağıdaki görüntüde, görünümde sabit kodlanmış dize gösterilmektedir.

3HelloWorld

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, "MVC Uygulamam" metnini değiştirelim. Bu metin paylaşılır ve her sayfada görünür. Uygulamamızdaki her sayfada yer alsa bile projemizde yalnızca bir yerde görünür. Çözüm Gezgini'da /Views/Shared klasörüne gidin ve _Layout.vbhtml 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".

@RenderBody() Dosyanın alt kısmındaki kod satırını not edin. RenderBody , oluşturduğunuz tüm sayfaların düzen sayfasında "sarmalanmış" olarak göründüğü bir yer tutucudur. <h1>"MVC Uygulamam" başlığını "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 olduğunu unutmayın. Hakkında bağlantısına tıklayın ve bu sayfada da "MVC Film Uygulaması" gösterilir.

_Layout.vbhtml dosyasının tamamı aşağıda gösterilmiştir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("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", "HelloWorld")</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.

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

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

MvcMovie\Views\HelloWorld\Index.vbhtml 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). Uygulamanın hangi bölümünde kod değişikliği olduğunu görebilmeniz için bunları biraz farklı hale getireceğiz.

Uygulamayı çalıştırın ve adresinehttp://localhost:xx/HelloWorld gidin. Tarayıcı başlığının, birincil başlığın ve ikincil başlıkların değiştiğine dikkat edin. Görünümde yapılan küçük değişikliklerle uygulamanızda büyük değişiklikler yapmak kolaydır. (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.)

3_MyMovieList

Ancak küçük "veri" (bu örnekte "Merhaba Dünya!" iletisi) sabit kodlanmıştır. MVC uygulamamızda V (görünümler) ve C (denetleyiciler) 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çirme hakkında konuşalım. Bir istemciye HTML yanıtı işlemek için görünüm şablonunun gerektirdiğini geçirmek istiyoruz. Bu nesneler genellikle bir denetleyici sınıfı tarafından oluşturulur ve bir görünüm şablonuna geçirilir ve yalnızca görünüm şablonunun gerektirdiği verileri içermelidir ve artık içermemelidir.

Daha önce sınıfıyla HelloWorldController Welcome birlikte, eylem yöntemi bir name numTimes ve parametresini aldı ve ardından parametre değerlerini tarayıcıya çıkardı. Denetleyicinin bu yanıtı doğrudan işlemeye devam etmesi yerine bu verileri Görünüm için bir torbaya koyalım. Denetleyiciler ve Görünümler bu verileri tutmak için bir ViewBag nesne kullanabilir. Bu, otomatik olarak bir görünüm şablonuna geçirilir ve html yanıtını, torbanın içeriğini veri olarak kullanarak işlemek için kullanılır. Bu şekilde denetleyici bir şeyle ve görünüm şablonuyla başka bir şeyle ilgilenir ve uygulama içinde temiz "endişelerin ayrımını" sürdürmemizi sağlar.

Alternatif olarak, özel bir sınıf tanımlayabilir, ardından bu nesnenin bir örneğini kendi başımıza oluşturabilir, verilerle doldurabilir ve Görünüm'e geçirebiliriz. Görünüm için özel bir Model olduğundan bu genellikle ViewModel olarak adlandırılır. Ancak az miktarda veri için ViewBag harika çalışır.

HelloWorldController.vb dosyasına dönün, Message ve NumTimes'ı ViewBag içine yerleştirmek için denetleyicinin içindeki yöntemini değiştirinWelcome. ViewBag dinamik bir nesnedir. Bu, içine ne isterseniz koyabileceğiniz anlamına gelir. Siz içine bir şey koyana kadar ViewBag'in tanımlı bir özelliği yoktur.

aynı dosyadaki yeni sınıfla tamamlandı HelloWorldController.vb .

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

Artık ViewBag'imiz otomatik olarak Görünüm'e geçirilecek verileri içerir. Yine, alternatif olarak, şunu beğenseydik kendi nesnemizi şöyle geçirebilirdik:

return View(myCustomObject)

Şimdi bir WelcomeView şablona ihtiyacımız var! Yeni kodun derlenmiş olması için uygulamayı çalıştırın. Tarayıcıyı kapatın, 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 kutunuz şöyle görünür.

3AddWelcomeView

Yeni Hoş Geldiniz'de öğesinin <h2> altına aşağıdaki kodu ekleyin.vbhtml dosyası. Bir döngü oluşturup kullanıcının söylediği kadar "Merhaba" diyeceğiz!

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

Uygulamayı çalıştırın ve 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 Model nesneye paketler ve bu nesneyi görünüme geçirir. yerine görünümü, verileri kullanıcıya HTML olarak görüntüler.

3Hello_Scott_4

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

  • Last updated on