Görünüm Ekleme

Rick Anderson tarafından

Note

Bu öğreticinin güncelleştirilmiş bir sürümü, burada uygulamanın en son sürümü kullanılarak Visual Studio. Yeni öğreticide bu ASP.NET birçok geliştirme sağlayan ASP.NET Core MVC2011 1.

Bu öğreticide, ASP.NET ve görünümlere sahip çekirdek MVC'ler öğretildi. Razor Pages, web kullanıcı arabirimini daha kolay ve daha üretken bir hale ASP.NET Core'da sayfa tabanlı bir programlama modeli olan yeni bir alternatiftir. MVC sürümünden önce Razor Pages öğreticiyi denemenizi öneririz. Aşağıdaki Razor Pages öğretici:

  • 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 bir ISTEMCIYE HTML yanıtları oluşturma işlemini düzgün bir şekilde kapsüllemek için şablon dosyalarını görüntüle öğesini kullanmak için sınıfını değiştirirsiniz.

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ının . cshtml dosya uzantısı vardır ve C# kullanarak HTML çıktısı 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ışını mümkün bir şekilde sunar.

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

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

IndexYukarıdaki 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 ( eylem yöntemleriolarak da bilinir), Index dize gibi basit türler değil, genellikle bir ActionResult (veya ActionResultöğesinden türetilmiş bir sınıf) döndürür.

Views\helloworld klasörüne sağ tıklayın ve Ekle' ye ve ardından MVC 5 görünüm sayfası düzen (Razor) seçeneğine tıklayın.

Öğe Için ad belirtin Iletişim kutusunda Dizingirin ve ardından Tamam' a tıklayın.

Düzen sayfası seçin iletişim kutusunda varsayılan ** _ Layout. cshtml** dosyasını kabul edin ve Tamam' a tıklayın.

Yukarıdaki iletişim kutusunda, Görünüm \ paylaşılan klasörü sol bölmede seçilidir. Başka bir klasörde özel bir düzen dosyanız varsa, bunu seçebilirsiniz. Daha sonra öğreticide düzen dosyası hakkında konuşacağız

Mvcmovie\views\helloworld\ındex.cshtml dosyası oluşturulur.

Aşağıdaki Vurgulanan biçimlendirmeyi 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.

PI

Ayrıca Index. cshtml dosyasına sağ tıklayıp sayfa denetçisinde görüntüle ' yi seçebilirsiniz. Daha fazla bilgi için bkz. sayfa denetçisi öğreticisi .

Alternatif olarak, uygulamayı çalıştırın ve HelloWorld denetleyiciye ( http://localhost:xxxx/HelloWorld ) gidin. IndexDenetleyicinizdeki yöntemi çok fazla iş gerçekleştirmedi; yalnızca metodunu çalıştırdığından return View() , metodun tarayıcıya 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ğinizden, ASP.NET MVC, \Views\helloworld klasöründeki Index. cshtml görünüm dosyasını kullanacak şekilde varsayılan olarak ' ı kullanır. Aşağıdaki görüntüde, Görünüm " şablonumuza ait Merhaba! " görünümde sabit kodlanmış dize gösterilmektedir.

Oldukça iyi bir şekilde görünür. Ancak, tarayıcının başlık çubuğunda "Index-My ASP.NET Application" ifadesinin görüntülendiğine ve sayfanın en üstündeki büyük bağlantının "uygulama adı" olduğunu fark edeceksiniz. Tarayıcı pencerenizi ne kadar küçük olduğunuza bağlı olarak, giriş, hakkında, Iletişim, kayıt ve oturum açma bağlantılarında oturum açmak için sağ üst köşedeki üç çubuğu tıklamanızı gerekebilir.

Görünümleri ve düzen sayfalarını değiştirme

İlk olarak, " " sayfanın en üstündeki uygulama adı bağlantısını değiştirmek istersiniz. Bu metin her sayfada ortaktır. Aslında uygulamada her sayfada görünse de, projede yalnızca bir yerde uygulanır. Çözüm Gezgini /views/Shared klasörüne gidin ve * _ Layout. cshtml* dosyasını açın. Bu dosyaya bir Düzen sayfası denir ve diğer tüm sayfaların kullandığı paylaşılan klasörde bulunur.

_LayoutCshtml

Düzen şablonları, sitenizin HTML kapsayıcı yerleşimini tek bir yerde belirtmenize ve sonra sitenizdeki birden çok sayfaya uygulamanıza olanak tanır. Satırı bulun @RenderBody() . RenderBody , oluşturduğunuz tüm görünüme özgü sayfaların, " Düzen sayfasında kaydırılan bir yer tutucudur " . Örneğin, hakkında bağlantısını seçerseniz, Views\home\about.exe görünümü yöntemin içinde işlenir RenderBody .

Title öğesinin içeriğini değiştirin. Düzen şablonundaki ActionLink , " uygulama adından " " MVC filmi " ve denetleyiciyi ' dan Home Movies ' e kadar olan ActionLink değiştirin. Tüm düzen dosyası 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 belirten bir uyarı görürsünüz " " . Hakkında ' ya tıklayın ve bu sayfanın " MVC filmi de göster ' i nasıl göstertiğine bakabilirsiniz " . Düzen şablonunda değişikliği bir kez yapabildik ve sitedeki tüm sayfalar yeni başlığı yansıtmaktadır.

İlk olarak Views\helloworld\ındex.cshtml dosyasını oluşturduğumuz zaman aşağıdaki kodu içerir:

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

Yukarıdaki Razor kodu, düzen sayfasını açıkça ayarlıyor. Görünümler \ _ViewStart. cshtml dosyasını inceleyin, tam olarak aynı Razor işaretlemesini içerir. Görünümler \ _ViewStart. cshtml dosyası, tüm görünümlerin kullanacağı ortak düzeni tanımlar, bu nedenle söz konusu kodu Views\helloworld\ındex.cshtml dosyasından açıklama ekleyebilir veya kaldırabilirsiniz.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

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

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

Mvcmovie\views\helloworld\ındex.cshtmldosyası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 bilgi ( <h2> öğe). Uygulamanın parçası olan hangi kod bitini değiştireceğiz için bunları biraz farklı hale getirebilirsiniz.

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

<h2>My Movie List</h2>

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

Görüntülenecek HTML başlığını göstermek için, yukarıdaki kod Title nesnesinin bir özelliğini ayarlar ViewBag ( Index. cshtml görünüm şablonunda bulunan). Düzen şablonunun ( Views\shared \ _Layout. cshtml ) bu değeri, <title> <head> daha önce değiştirildiğimiz HTML bölümünün bir parçası olarak öğesini kullandığını unutmayın.

<!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 şablonunuz ve düzen dosyanız arasında kolayca başka parametreler geçirebilirsiniz.

Uygulamayı çalıştırın. Tarayıcı başlığı, birincil başlık ve ikincil başlıkların değiştirildiğini unutmayın. (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ı zorlamak için tarayıcınızda CTRL + F5 tuşlarına basın.) Tarayıcı başlığı ViewBag.Title Index. cshtml görünüm şablonunda ve " Düzen dosyasına eklenen ek film uygulamasına ayarlanmış olan 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ğini ve tarayıcıya tek bir HTML yanıtı gönderildiğini de unutmayın. Düzen şablonları, uygulamanızdaki tüm sayfalara uygulanan değişiklikler yapmayı gerçekten kolaylaştırır.

Çok az " veri " (Bu durumda, " görüntüleme şablonumuzdaki Merhaba! " iletisi) sabit kodlanmış, ancak. MVC uygulamasının bir " V " (görünüm) ve bir C (Controller) var " " , ancak " " henüz M (model) yok. Kısa süre içinde, bir veritabanının nasıl oluşturulduğunu ve model verilerinin nasıl alınacağını adım adım inceleyeceğiz.

Denetleyiciden görünüme veri geçirme

Bir veritabanına gitmekten ve modeller hakkında konuşmadan önce, ilk olarak denetleyiciden bir görünüme bilgi geçirme konusunda konuşalım. Denetleyici sınıfları gelen bir URL isteğine yanıt olarak çağrılır. Bir denetleyici sınıfı, gelen tarayıcı isteklerini işleyen, veritabanından veri alan ve son olarak tarayıcıya ne tür bir yanıt gönderileceğini karar veren kodu yazdığınız yerdir. Daha sonra Görünüm şablonları, tarayıcıya HTML yanıtı oluşturmak ve biçimlendirmek için bir denetleyiciden kullanılabilir.

Bir görünüm şablonunun tarayıcıya yanıt oluşturması için gereken verilerin veya nesnelerin sağlanmasından denetleyiciler sorumludur. En iyi yöntem: bir görünüm şablonu asla iş mantığı gerçekleştirmemelidir veya doğrudan bir veritabanıyla etkileşime sahip olmalıdır. Bunun yerine, bir görünüm şablonu yalnızca denetleyici tarafından sunulan verilerle birlikte çalışmalıdır. Bu sorunların " ayrılmasını sürdürmek " , kodunuzun temiz, test edilebilir ve daha sürdürülebilir olmasını sağlar.

Şu anda, Welcome sınıfındaki Action yöntemi HelloWorldController bir name ve numTimes parametresini alır ve sonra değerleri doğrudan tarayıcıya çıkarır. Denetleyicinin bu yanıtı bir dize olarak işlemesini sağlamak yerine, denetleyiciyi bir görünüm şablonu kullanacak şekilde değiştirelim. Görünüm şablonu dinamik bir yanıt oluşturur, bu, yanıtı oluşturmak için denetleyiciden uygun veri bitlerini görünüme geçirmeniz gerektiği anlamına gelir. Bu, denetleyicinin, görünüm şablonunun erişebileceği bir nesne için gerektirdiği dinamik verileri (parametreler) yerleştirerek bunu yapabilirsiniz ViewBag .

HelloWorldController.cs dosyasına dönün ve Welcome nesnesine bir ve değeri eklemek için yöntemini değiştirin Message NumTimes ViewBag . ViewBag dinamik bir nesnedir, bu, içinde istediğiniz her şeyi koyabileceğiniz anlamına gelir; ViewBag nesnenin içine bir öğe yerleştirene kadar tanımlanmış özellikleri yok. ASP.NET MVC model bağlama sistemi , adlandırılmış parametreleri ( name ve numTimes ) adres çubuğundaki sorgu dizesinden yöntemdeki parametrelere otomatik olarak eşler. Tüm HelloWorldController.cs dosyası şuna benzer:

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 ViewBag nesne görünüme otomatik olarak geçirilecek verileri içerir. Daha sonra bir hoş geldiniz görünüm şablonunuz olması gerekir! Projenin derlendiğinden Build emin olmak için Build (veya Ctrl + Shift + B) öğesini seçin. Views\helloworld klasörüne sağ tıklayın ve Ekle' ye ve ardından MVC 5 görünüm sayfası düzen (Razor) seçeneğine tıklayın.

Öğe Için ad belirtin Iletişim kutusunda hoş geldinizyazın ve ardından Tamam' a tıklayın.

Düzen sayfası seçin iletişim kutusunda varsayılan ** _ Layout. cshtml** dosyasını kabul edin ve Tamam' a tıklayın.

Mvcmovie\views\helloworld\welcome.cshtml dosyası oluşturulur.

Welcome. cshtml dosyasındaki biçimlendirmeyi değiştirin. "Kullanıcı tarafından söylenecek kadar Merhaba bir döngü oluşturacaksınız " . Tüm Welcome. cshtml dosyası 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 gidin:

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

Artık veriler URL 'den alınır ve model cildikullanılarak denetleyiciye geçirilir. Denetleyici, verileri bir ViewBag nesnesine paketler ve bu nesneyi görünüme geçirir. Daha sonra Görünüm, verileri kullanıcıya HTML olarak görüntüler.

Yukarıdaki örnekte, ViewBag denetleyicideki verileri bir görünüme geçirmek için bir nesne kullandık. Öğreticide daha sonra, bir denetleyicideki verileri bir görünüme geçirmek için bir görünüm modeli kullanacağız. Veri geçirme yaklaşımını görüntüleme yaklaşımı, görünüm paketi yaklaşımına göre genellikle çok tercih edilir. Daha fazla bilgi için bkz. blog girdisi dinamik türü kesin belirlenmiş görünümler .

Bu, " model için bir d türüdür " , ancak veritabanı türü değildir. Öğrendiklerimizi ve bir film veritabanı oluşturmamızı görelim.