ASP.NET Core MVC 'deki görünümler

Steve Smith ve bave Brock tarafından

bu belgede ASP.NET Core MVC uygulamalarında kullanılan görünümler açıklanmaktadır. Sayfalar hakkında bilgi için Razor bkz RazorASP.NET Core'de Sayfalara Giriş ..

Model-View-Controller (MVC) modelinde, Görünüm uygulamanın veri sunumunu ve kullanıcı etkileşimini işler. Görünüm, gömülü Razor biçimlendirmeiçeren bir HTML şablonudur. Razor biçimlendirme, istemciye gönderilen bir Web sayfası oluşturmak için HTML işaretlemesi ile etkileşen koddur.

ASP.NET Core MVC 'de, görünümler, .cshtml biçimlendirme içinde C# programlama dilini kullanan dosyalardır Razor . Genellikle, görünüm dosyaları uygulama denetleyicilerininher biri için adlandırılmış klasörler halinde gruplandırılır. Klasörler, Views uygulamanın kökündeki bir klasörde depolanır:

HomeDenetleyici, Home klasörün içindeki bir klasör ile temsil edilir Views . HomeKlasörü About ,, Contact ve Index (giriş sayfası) Web sayfalarının görünümlerini içerir. Bir Kullanıcı bu üç Web sayfasından birini istediğinde, denetleyicideki denetleyici eylemleri, Home bir Web sayfasını derlemek ve kullanıcıya döndürmek için kullanılan üç görünümden hangisinin kullanıldığını tespit ediyor.

Tutarlı Web sayfası bölümleri sağlamak ve kod tekrarlamayı azaltmak için düzenleri kullanın. Düzenler genellikle üstbilgiyi, gezinti ve menü öğelerini ve alt bilgisini içerir. Üst bilgi ve altbilgi genellikle birçok meta veri öğesi için ortak biçimlendirme ve betik ve stil varlıklarına bağlantılar içerir. Düzenler, görünümlerinizde bu ortak biçimlendirmeyi önlemenize yardımcı olur.

Kısmi görünümler , görünümlerin yeniden kullanılabilir parçalarını yöneterek kod yinelemeyi azaltır. Örneğin, kısmi bir görünüm çeşitli görünümlerde görüntülenen bir blog web sitesinde yazar biyografı için yararlıdır. Yazar biyografları sıradan görünüm içeriğine sahiptir ve Web sayfasının içeriğini üretmek için kodun yürütülmesi gerekmez. Yazar biyografları, tek başına model bağlama tarafından kullanılabilir, bu nedenle bu içerik türü için kısmi bir görünüm kullanmak idealdir.

Görünüm bileşenleri , yinelenen kodu azaltmanıza izin veren kısmi görünümlere benzerdir, ancak Web sayfasını işlemek için kodun sunucuda çalıştırılmasını gerektiren içeriği görüntüleme için uygundur. Görüntüleme bileşenleri, işlenen içerik bir Web sitesi alışveriş sepeti gibi veritabanı etkileşimi gerektirdiğinde yararlıdır. Web sayfası çıkışı oluşturmak için, görünüm bileşenlerini model bağlama ile sınırlı değildir.

Görünümleri kullanmanın avantajları

Görünümler, Kullanıcı arabirimi işaretlemesini uygulamanın diğer bölümlerinden ayırarak bir MVC uygulamasında kaygıların ayrılmasını sağlamaya yardımcı olur. Aşağıdaki SoC tasarımı, uygulamanızın modüler olmasını sağlayarak çeşitli avantajlar sağlar:

• Daha iyi bir şekilde düzenlendiğinden, uygulamanın bakımını daha kolay hale getirir. Görünümler genellikle uygulama özelliğine göre gruplandırılır. Bu, bir özellik üzerinde çalışırken ilgili görünümleri bulmayı kolaylaştırır.
• Uygulamanın parçaları gevşek olarak bağlanmış. Uygulamanın görünümlerini iş mantığı ve veri erişim bileşenlerinden ayrı olarak oluşturup güncelleştirebilirsiniz. Uygulamanın diğer bölümlerini güncelleştirmek zorunda kalmadan uygulamanın görünümlerini değiştirebilirsiniz.
• Görünümler ayrı birimler olduğundan uygulamanın kullanıcı arabirimi parçalarını test etmek daha kolay.
• Daha iyi bir kuruluş nedeniyle, Kullanıcı arabiriminin bölümlerini yanlışlıkla tekrarlamanız daha az olabilir.

Görünüm oluşturma

Bir denetleyiciye özgü Görünümler Views/[ControllerName] klasöründe oluşturulur. Denetleyiciler arasında paylaşılan görünümler Views/Shared klasörüne yerleştirilir. Bir görünüm oluşturmak için yeni bir dosya ekleyin ve dosya uzantısıyla ilişkili denetleyici eylemiyle aynı adı verin .cshtml . Denetleyicideki eyleme karşılık gelen bir görünüm oluşturmak için About Home About.cshtml klasörde bir dosya oluşturun Views/Home :

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Razor biçimlendirme @ simgesiyle başlar. C# kodunu Razor kod blokları içine yerleştirerek, küme ayraçları () tarafından kapalı olarak ayarlayarak c# deyimlerini çalıştırın { ... } . Örneğin, yukarıda gösterilen "hakkında" atamasını inceleyin ViewData["Title"] . Yalnızca simgesiyle birlikte değeri yazarak HTML içindeki değerleri görüntüleyebilirsiniz @ . <h2>Yukarıdaki ve öğelerinin içeriğine bakın <h3> .

Yukarıda gösterilen görünüm içeriği yalnızca kullanıcıya işlenmiş olan tüm Web sayfasının bir parçasıdır. Sayfanın düzeninin geri kalanı ve görünümün diğer yaygın yönleri diğer görünüm dosyalarında belirtilir. Daha fazla bilgi için Düzen konusunabakın.

Denetleyiciler görünümleri nasıl belirler

Görünümler genellikle eylemlerden bir türü olan bir olarak döndürülür ViewResult ActionResult . Eylem yönteminiz doğrudan oluşturabilir ve döndürebilir ViewResult , ancak yaygın olarak yapılmaz. Çoğu denetleyici öğesinden devraldığı Controller için, yalnızca View yardımcı yöntemi kullanarak şunu döndürün ViewResult :

HomeController.cs:

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Bu eylem döndüğünde, About.cshtml son bölümde gösterilen görünüm aşağıdaki Web sayfası olarak işlenir:

ViewYardımcı yönteminde birkaç aşırı yükleme vardır. İsteğe bağlı olarak şunları belirtebilirsiniz:

• Döndürülecek açık bir görünüm:

  return View("Orders");
  

• Görünüme geçirilecek bir model :

  return View(Orders);
  

• Hem görünüm hem de model:

  return View("Orders", Orders);
  

Bulmayı görüntüle

Bir eylem bir görünüm döndürdüğünde, görünüm bulma adlı bir işlem gerçekleşir. Bu işlem, görünüm adına göre hangi görünüm dosyasının kullanıldığını belirler.

Yönteminin varsayılan davranışı View ( return View(); ), çağrılan eylem yöntemiyle aynı ada sahip bir görünüm döndürmemelidir. Örneğin, About ActionResult denetleyicinin Yöntem adı adlı bir görünüm dosyasını aramak için kullanılır About.cshtml . İlk olarak, çalışma zamanı Views/[ControllerName] görünümün klasörüne bakar. Burada eşleşen bir görünüm bulamazsa, Shared görünümün klasörünü arar.

' İ örtülü olarak döndürmeniz ya da ViewResult return View(); açıkça görünüm adını ile yöntemine iletmeniz önemi yoktur View return View("<ViewName>"); . Her iki durumda da, eşleşen bir görünüm dosyası için bulma aramalarını şu sırayla görüntüleyin:

1. Views/\[ControllerName]/\[ViewName].cshtml
2. Views/Shared/\[ViewName].cshtml

Görünüm adı yerine bir görünüm dosyası yolu sağlanıyor. Uygulama kökünde başlayan mutlak bir yol kullanılıyorsa (isteğe bağlı olarak "/" veya "~/" ile başlayan), .cshtml uzantının belirtilmesi gerekir:

return View("Views/Home/About.cshtml");

Uzantı olmadan farklı dizinlerdeki görünümleri belirtmek için de göreli bir yol kullanabilirsiniz .cshtml . İçinde HomeController , Index Manage görünümlerinizin görünümünü göreli bir yol ile döndürebilirsiniz:

return View("../Manage/Index");

Benzer şekilde, "./" önekiyle geçerli denetleyiciye özgü dizini belirtebilirsiniz:

return View("./About");

Kısmi görünümler ve Görünüm bileşenleri benzer (ancak aynı) bulma mekanizmalarını kullanır.

Özel bir kullanarak görünümlerin uygulama içinde nasıl konumlandıralınacağını gösteren varsayılan kuralı özelleştirebilirsiniz IViewLocationExpander .

Görünüm bulma, dosya adına göre görünüm dosyalarını bulmayı kullanır. Temeldeki dosya sistemi büyük/küçük harfe duyarlı ise, görünüm adları büyük olasılıkla büyük küçük harfe duyarlıdır. İşletim sistemleri arasında uyumluluk için, denetleyici ve eylem adları ile ilişkili görünüm klasörleri ve dosya adları arasındaki büyük/küçük harfe eşleştirin. Büyük/küçük harfe duyarlı dosya sistemiyle çalışırken bir görünüm dosyasının bulunamadığını belirten bir hatayla karşılaşırsanız, istenen görünüm dosyası ile gerçek görünüm dosyası adı arasında büyük/küçük harf eşleştiğini doğrulayın.

Görünümlerinizin dosya yapısını, bakım ve açıklık için denetleyiciler, Eylemler ve görünümler arasındaki ilişkileri yansıtacak şekilde düzenleme konusunda en iyi yöntemi izleyin.

Verileri görünümlere geçirme

Çeşitli yaklaşımlar kullanarak verileri görünümlere geçirin:

• Kesin türü belirtilmiş veri: ViewModel
• Zayıf yazılmış veriler
  • ViewData (ViewDataAttribute)
  • ViewBag

Kesin tür belirtilmiş veriler (ViewModel)

En güçlü yaklaşım, görünümde bir model türü belirtmektir. Bu model genellikle ViewModel olarak adlandırılır. ViewModel türünün bir örneğini eylemden görünüme geçirirsiniz.

Görünümü bir görünüme aktarmak için ViewModel kullanmak, görünümün tanımlayıcı tür denetlemesinin avantajlarından yararlanmasını sağlar. Güçlü yazma (veya kesin belirlenmiş), her değişken ve sabitin açıkça tanımlanmış bir tür (örneğin,, string veya) olduğu anlamına gelir int DateTime . Bir görünümde kullanılan türlerin geçerliliği derleme zamanında denetlenir.

ıntellisenseadlı bir özellik kullanarak türü kesin belirlenmiş sınıf üyelerini Visual Studio ve Visual Studio Code listeleyin. ViewModel özelliklerini görmek istediğinizde, ViewModel için değişken adını ve ardından bir nokta ( . ) yazın. Bu, daha az hata vererek kodu daha hızlı yazmanıza yardımcı olur.

Yönergesini kullanarak bir model belirtin @model . Modeli şu şekilde kullanın @Model :

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Modeli görünüme sağlamak için, denetleyici bu parametreyi bir parametre olarak geçirir:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

Görünüme sağlayabilirsiniz model türlerinde herhangi bir kısıtlama yoktur. Çok az davranışla (yöntemler) tanımlanan Düz Eski CLR Nesnesi (POCO) görünüm modellerini öneririz. Viewmodel sınıfları genellikle klasöründe veya Models uygulamanın kökünde ViewModels ayrı bir klasörde depolanır. Yukarıdaki Address örnekte kullanılan viewmodel, adlı bir dosyada depolanan poCO viewmodel'dır: Address.cs

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Hiçbir şey hem viewmodel türleriniz hem de iş modeli türleriniz için aynı sınıfları kullanmanızı engellemez. Ancak, ayrı modeller kullanmak, görünümlerinin iş mantığından ve veri erişimi parçalarından bağımsız olarak farklılık gösterebiliyor. Modellerin ve görünüm modellerinin ayrılması, modeller kullanıcı tarafından uygulamaya gönderilen veriler için model bağlama ve doğrulamayı kullanırken de güvenlik avantajları sunar.

Zayıf türe sahip veriler ( ViewData , [ViewData] öznitelik ve ViewBag )

ViewBag, içinde kullanım için varsayılan olarak kullanılamaz Razor Sayfalar PageModel sınıfları.

Güçlü türe sahip görünümlere ek olarak, görünümler zayıf türe sahip (gevşek türe sahip ) veri koleksiyonuna da erişime sahiptir. Güçlü türlerden farklı olarak zayıf türler (veya gevşek türler) kullanmakta olduğunu açıkça belirtmiş olmadığınız anlamına gelir. Denetleyiciler ve görünümler içinde ve dışında küçük miktarlarda veri geçirme için zayıf türe sahip veri koleksiyonunu kullanabilirsiniz.

Bu koleksiyona denetleyiciler ve görünümler ViewData üzerinde veya özellikleri aracılığıyla ViewBag başvurulabilirsiniz. ViewDataözelliği, zayıf türe sahip nesnelerin sözlüğü olur. özelliği, ViewBag temel alınan koleksiyon için dinamik özellikler sağlayan çevresinde bir ViewData ViewData sarmalayıcıdır. Not: Anahtar aramaları hem hem de için büyük/büyük/büyük harfe ViewData duyarlı ViewBag değildir.

ViewData ve ViewBag çalışma zamanında dinamik olarak çözümlenir. Derleme zamanı türü denetimi sunmaysa da, her ikisi de genellikle bir viewmodel kullanmaya göre daha fazla hataya neden olur. Bu nedenle, bazı geliştiriciler ve uygulamalarını en az düzeyde kullanmayı veya hiç kullanmayı ViewData tercih ViewBag eder.

ViewData

ViewData , anahtarlar ViewDataDictionary aracılığıyla erişilen bir string nesnedir. Dize verileri, tür oluşturma gerekmeden doğrudan depolanmış ve kullanılabilir, ancak ayıklarken diğer nesne değerlerini ViewData belirli türlere atabilirsiniz. Kısmi görünümler ViewData ve düzenler dahil olmak üzere, denetleyicilerden görünümlere ve görünümler içinde veri geçişini yapmak için kullanabilirsiniz.

Aşağıda, bir eylemde kullanarak bir karşılama ve adres için değerleri ayarleyen ViewData bir örnek ve bir örnek vetir:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Görünümde verilerle çalışma:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

[ViewData] özniteliği

kullanan bir diğer yaklaşım ViewDataDictionary da ViewDataAttribute yaklaşımıdır. Denetleyicilerde veya Razor öznitelikle işaretlenmiş Sayfa [ViewData] modellerinde, değerleri depolanır ve sözlükten yüklenir.

Aşağıdaki örnekte, denetleyici Home ile işaretlenmiş bir özellik Title [ViewData] içerir. yöntemi About Hakkında görünümünün başlığını ayarlar:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

Düzende başlık ViewData sözlüğünden okunur:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBag

ViewBag, içinde kullanım için varsayılan olarak kullanılamaz Razor Sayfalar PageModel sınıfları.

ViewBag , Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData içinde depolanan nesnelere dinamik erişim sağlayan bir ViewData nesnedir. ViewBag ile çalışmak daha kullanışlı olabilir çünkü atama gerektirmez. Aşağıdaki örnekte, yukarıdakiyle aynı ViewBag sonuçla nasıl kullanabileceğiniz ViewData gösterir:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Ve ViewData aynı ViewBag anda kullanma

ViewBag, içinde kullanım için varsayılan olarak kullanılamaz Razor Sayfalar PageModel sınıfları.

Ve aynı temel koleksiyona başvurdu, hem hem de değerlerini okurken ve yazarken bunları karıştırıp ViewData ViewBag ViewData ViewData ViewBag eşlersiniz.

bir görünümün ViewBag üst kısmında kullanarak başlığı ve açıklamasını ViewData About.cshtml ayarlayın:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Özelliklerini okuyun, ancak ve kullanımını tersine ViewData ViewBag çevirin. dosyasında _Layout.cshtml kullanarak başlığı alın ve ViewData kullanarak açıklamayı ViewBag alın:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Dizelerin için bir cast gerektir olmadığını ViewData unutmayın. Atama olmadan @ViewData["Title"] kullanabilirsiniz.

Hem hem ViewData de ViewBag aynı anda kullanmak, özellikleri okuma ve yazma ile eşleştirme gibi işler. Aşağıdaki işaretleme işlenir:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

ve arasındaki farkların ViewData özeti ViewBag

ViewBag, içinde kullanım için varsayılan olarak kullanılamaz Razor Sayfalar PageModel sınıfları.

• ViewData
  • , ViewDataDictionary , ve gibi yararlı olabilir sözlük özelliklerine sahip olması için ' den ContainsKey Add Remove türetebilirsiniz. Clear
  • Sözlükte anahtarlar dizedir, bu nedenle boşluklara izin verilir. Örnek: ViewData["Some Key With Whitespace"]
  • dışında herhangi bir string tür, kullanmak için görünümde türe türe sahip olması ViewData gerekir.
• ViewBag
  • 'den türet, bu nedenle nokta ( ) kullanarak dinamik özelliklerin Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData oluşturulmasına izin verir @ViewBag.SomeKey = <value or object> ve herhangi bir tür değiştirme gerekmez. söz ViewBag dizimi, denetleyicilere ve görünümlere eklemeyi daha hızlı yapar.
  • Null değerlerin denetimi daha basittir. Örnek: @ViewBag.Person?.Name

veya ne zaman ViewData kullan ViewBag

Hem ViewData hem ViewBag de, denetleyiciler ve görünümler arasında küçük miktarlarda veri geçirmeye yönelik eşit derecede geçerli yaklaşımlardır. Hangisinin tercihi tercihe bağlıdır. Ve nesnelerini karıştırabilir ve eşlersiniz, ancak kodun tutarlı bir şekilde kullanılan tek bir ViewData ViewBag yaklaşımla okunması ve korunması daha kolaydır. Her iki yaklaşım da çalışma zamanında dinamik olarak çözümlenir ve bu nedenle çalışma zamanı hatalarına neden olabilir. Bazı geliştirme ekipleri bunları önlemektedir.

Dinamik görünümler

kullanarak bir model türü bildiren ancak onlara bir model örneği (örneğin, ) geçirilen görünümler, örneğin @model return View(Address); özelliklerine dinamik olarak başvurur:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Bu özellik esneklik sunar ancak derleme koruması veya IntelliSense sunmaz. Özelliği yoksa, çalışma zamanında web sayfası oluşturma başarısız olur.

Daha fazla görünüm özelliği

Etiket Yardımcıları, mevcut HTML etiketlerine sunucu tarafı davranışı eklemenizi kolaylaştırır. Etiket Yardımcıları'nın kullanımı, görünümler içinde özel kod veya yardımcılar yazma ihtiyacının önüne geçebilirsiniz. Etiket yardımcıları, HTML öğelerine öznitelik olarak uygulanır ve bunları işleyemez düzenleyiciler tarafından yoksayılır. Bu, görünüm işaretlemelerini çeşitli araçlarda düzenlemenizi ve işlemenizi sağlar.

Birçok yerleşik HTML Yardımcısı ile özel HTML işaretlemesi oluşturabilirsiniz. Daha karmaşık kullanıcı arabirimi mantığı, Görünüm Bileşenleri tarafından işleniyor. Görünüm bileşenleri, denetleyicilerin ve görünümlerin teklifle aynı SoC'lerini sağlar. Ortak kullanıcı arabirimi öğeleri tarafından kullanılan verilerle ilgili eylem ve görünümlere olan ihtiyacı ortadan kaldırabilirsiniz.

Diğer birçok görünümde olduğu ASP.NET Core, görünümler bağımlılık eklemeyi desteklerve hizmetlerin görünümlere eklemesine olanak sağlar.

h1 {
    color: red;
}

<link rel="stylesheet" href="{APP ASSEMBLY}.styles.css" />

<link rel="stylesheet" href="WebApp.styles.css" />

/* /Pages/Index.cshtml.rz.scp.css */
h1[b-3xxtam6d07] {
    color: red;
}

<h1 b-3xxtam6d07>

<ItemGroup>
  <None Update="{Pages|Views}/Index.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<ItemGroup>
  <None Update="{Pages|Views}/BaseView.cshtml.css" CssScope="custom-scope-identifier" />
  <None Update="{Pages|Views}/DerivedView.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<ItemGroup>
  <None Update="{Pages|Views}/*.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">