MVC Uygulamasına Görünüm Ekleme

tarafından Rick Anderson

Uyarı

Visual Studio'nun en son sürümü kullanılarak bu öğreticinin güncelleştirilmiş bir sürümü burada kullanılabilir. Yeni öğretici, ASP.NET Core MVC kullanarak, bu öğreticiye göre birçok geliştirme sunmaktadır.

Bu öğretici, denetleyiciler ve görünümlerle ASP.NET Core MVC'yi öğretir. Razor Pages, web kullanıcı arabirimi oluşturmayı kolaylaştıran ve daha üretken hale getiren sayfa tabanlı bir programlama modeli olan ASP.NET Core'daki yeni bir alternatiftir. Razor Pages öğreticisini MVC sürümünden önce denemenizi öneririz. Razor Pages öğreticisi:

• Takip etmek daha kolaydır.
• Daha fazla özelliği kapsar.
• Yeni uygulama geliştirme için tercih edilen yaklaşımdır.

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

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.

Şu anda yöntemi, Index denetleyici sınıfında sabit kodlanmış bir ileti içeren bir dize döndürür. Index yöntemini, aşağıdaki kodda gösterildiği gibi denetleyici View yöntemini çağıracak şekilde 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 denetleyici yöntemleri (Index olarak da bilinir), genellikle dize gibi ilkel türler değil, bir ActionResult (veya ActionResult'tan türetilen bir sınıf) döndürür.

Views\HelloWorld klasörüne sağ tıklayın ve Ekle'ye tıklayın, ardından MVC 5 Görünüm Sayfası ve Düzen (Razor) seçeneğine tıklayın.

Öğe için Ad Belirt iletişim kutusunda Dizin yazın ve Tamam'a tıklayın.

Düzen Sayfası Seçin iletişim kutusunda, varsayılan _Layout.cshtml'yi kabul edin ve Tamam'a tıklayın.

Yukarıdaki iletişim kutusunda, sol bölmede Görünümler\Paylaşılan klasörü seçilidir. Başka bir klasörde özel bir düzen dosyanız varsa, bunu seçebilirsiniz. Eğitimin ilerleyen bölümlerinde düzen dosyası hakkında konuşacağız.

MvcMovie\Views\HelloWorld\Index.cshtml dosyası oluşturulur.

Aşağıdaki vurgulanmış işaretlemeyi ekleyin.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Index.cshtml dosyasına sağ tıklayın ve Tarayıcıda Görüntüle'yi seçin.

Ayrıca Index.cshtml dosyasına sağ tıklayıp Sayfa Denetçisinde Görüntüle'yi de seçebilirsiniz. Daha fazla bilgi için Sayfa Denetçisi öğreticisine bakın.

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.

Oldukça iyi görünüyor. Ancak, tarayıcının başlık çubuğunda "Dizin - ASP.NET Uygulamam" ifadesinin gösterildiğine ve sayfanın üst kısmındaki büyük bağlantıda "Uygulama adı" ifadesinin gösterildiğine dikkat edin. Tarayıcı pencerenizi ne kadar küçük yaptığınıza bağlı olarak , Giriş, Hakkında, Kişi, Kaydet ve Oturum aç bağlantılarını görmek için sağ üstteki üç çubuğu tıklatmanız gerekebilir.

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

İlk olarak, sayfanın üst kısmındaki "Uygulama adı" bağlantısı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'nde/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 klasörde yer alır.

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ını 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ü RenderBody metodun içinde işlenir.

Title öğesinin içeriğini değiştirin. Düzen şablonundaki ActionLink'i "Uygulama adı" yerine "MVC Film" olarak ve denetleyiciyi ise Home'ten Movies'ye olarak değiştirin. Düzen dosyasının tamamı aşağıda gösterilmiştir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

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"ni nasıl gösterdiğ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ı.

Views\HelloWorld\Index.cshtml dosyasını ilk oluşturduğunuzda aşağıdaki kodu içeriyordu:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Yukarıdaki Razor kodu, düzen sayfasını özellikle ayarlıyor. Views\_ViewStart.cshtml dosyasını inceleyin; tam olarak aynı Razor işaretlemesini içerir. Views\_ViewStart.cshtml dosyası, tüm görünümlerin kullanacağı ortak düzeni tanımlar, bu nedenle bu kodu Views\HelloWorld\Index.cshtml dosyasından açıklama satırı yapabilir veya kaldırabilirsiniz.

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Özelliğini kullanarak Layout farklı bir düzen görünümü ayarlayabilir veya düzen dosyası kullanılmayacak şekilde null olarak ayarlayabilirsiniz.

Ş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 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 Title (ViewBag görünüm şablonunda olan) bir özelliğini ayarlar. Düzen şablonunun ( Views\Shared\_Layout.cshtml ) öğesinde <title> bu değeri, daha önce değiştirdiğimiz HTML bölümünün bir parçası <head> olarak kullandığına dikkat edin.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

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. 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.) Tarayıcı başlığıViewBag.Title görünüm şablonunda ayarladığımız ve düzen dosyasına eklenen ek "- Film Uygulaması" ile 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 sayfalara uygulanan değişiklikler yapmayı gerçekten kolaylaştırır.

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 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 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 (parametreleri) görünüm şablonunun erişebileceği bir ViewBag nesneye yerleştirmesini sağlayabilirsiniz.

HelloWorldController.cs dosyasına dönün ve NumTimes yöntemini değiştirerek ViewBag nesnesine bir Message ve NumTimes değeri ekleyin. 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. ASP.NET MVC model bağlama sistemi, adlandırılmış parametreleri (name ve numTimes) adres çubuğundaki sorgu dizesinden 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();
        }
    }
}

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 Derle menüsünde Çözüm Derle'yi (veya Ctrl+Shift+B) seçin. Views\HelloWorld klasörüne sağ tıklayın ve Ekle'ye tıklayın, ardından MVC 5 Görünüm Sayfası ve Düzen (Razor) seçeneğine tıklayın.

Öğe için Ad Belirt iletişim kutusuna Hoş Geldiniz yazın ve Tamam'a tıklayın.

Düzen Sayfası Seçin iletişim kutusunda, varsayılan _Layout.cshtml'yi kabul edin ve Tamam'a tıklayın.

MvcMovie\Views\HelloWorld\Welcome.cshtml dosyası oluşturulur.

Welcome.cshtml dosyasındaki işaretlemeyi değiştirin. Kullanıcının belirttiği kadar kez "Merhaba" diyecek 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ıp 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.

Yukarıdaki örnekte, denetleyiciden görünüme veri geçirmek için bir ViewBag nesne kullandık. Öğreticinin ilerleyen bölümlerinde bir görünüm modeli kullanarak bir denetleyiciden görünüme veri geçireceğiz. Veri iletmeye yönelik görünüm modeli yaklaşımı genellikle ViewBag yaklaşımına göre daha çok tercih edilir. Daha fazla bilgi için Dinamik ve Güçlü Yazılan Görünümler blog girdisine bakın.

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.

ÖncekiSonraki