ASP.NET Core'de düzen

  • Makale
  • Okumak için 2 dakika

Steve Smith ve Dave Brock

Sayfalar ve görünümler sıklıkla görsel ve programlı öğeleri paylaşır. Bu makalede şunların nasıl olduğu gösterildi:

  • Ortak düzenleri kullanın.
  • Paylaşım yönergeleri.
  • Sayfaları veya görünümleri işlemeden önce ortak kodu çalıştırın.

Bu belgede, MVC'ye yönelik iki farklı yaklaşıma ASP.NET Core düzenleri ele almaktadır: Razor Görünümlere sahip sayfalar ve denetleyiciler. Bu konu için farklılıklar minimum düzeydedir:

  • RazorSayfalar, Sayfalar klasöründedir.
  • Görünümlere sahip denetleyiciler, görünümler için bir Görünümler klasörü kullanır.

Düzen nedir?

Çoğu web uygulaması, sayfadan sayfaya gidilen kullanıcıya tutarlı bir deneyim sağlayan ortak bir düzene sahiptir. Düzen genellikle uygulama üst bilgisi, gezinti veya menü öğeleri ve alt bilgi gibi ortak kullanıcı arabirimi öğelerini içerir.

Sayfa Düzeni örneği

Betikler ve stil sayfaları gibi ortak HTML yapıları da bir uygulama içindeki birçok sayfa tarafından sık kullanılır. Bu paylaşılan öğelerin hepsi bir düzen dosyasında tanımlanabilir ve daha sonra uygulama içinde kullanılan herhangi bir görünüm tarafından başvurulabilirsiniz. Düzenler görünümlerde yinelenen kodu azaltır.

Kural gereği, bir ASP.NET Core uygulamanın varsayılan düzeni _Layout.cshtml olarak adlandırılmıştır. Şablonlarla oluşturulan yeni ASP.NET Core projelerinin düzen dosyaları:

  • Razor Sayfalar: Sayfalar/Paylaşılan/_Layout.cshtml

    Çözüm Gezgini'de Sayfalar klasörü

  • Görünümlere sahip denetleyici: Views/Shared/_Layout.cshtml

    Çözüm Gezgini'de görünümler klasörü

Düzen, uygulama görünümleri için üst düzey bir şablon tanımlar. Uygulamalar bir düzen gerektirmez. Uygulamalar, farklı düzenleri belirten farklı görünümlerle birden fazla düzen tanımlayabilir.

Aşağıdaki kod, denetleyici ve görünümlere sahip bir şablon tarafından oluşturulan projenin düzen dosyasını gösterir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav 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="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - WebApplication1</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Düzen Belirtme

Razor görünümlerin bir özelliği Layout vardır. Tek tek görünümler bu özelliği ayarerek bir düzen belirtir:

@{
    Layout = "_Layout";
}

Belirtilen düzen tam yol (örneğin, /Pages/Shared/_Layout.cshtml veya /Views/Shared/_Layout.cshtml) veya kısmi bir ad (örneğin: ) _Layout kullanabilir. Kısmi bir ad sağlanıyorsa, Razor görünüm altyapısı standart bulma işlemini kullanarak düzen dosyasını arar. önce işleyici yönteminin (veya denetleyicinin) bulunduğu klasör aranır ve ardından Paylaşılan klasör aranır. Bu bulma işlemi, kısmi görünümleri bulmak için kullanılan işlemle aynıdır.

Varsayılan olarak, her düzenin çağrısı RenderBody gerekir. çağrısı nereye RenderBody yerleştirilirse yerleştirilse görünümün içeriği işlenir.

Bölümler

Düzen isteğe bağlı olarak çağrısıyla bir veya daha fazla bölüme RenderSection başvurabilirsiniz. Bölümler, belirli sayfa öğelerinin yerleştirilmleri gereken yeri düzenlemenin bir yolunu sağlar. her çağrısı bu RenderSection bölümün gerekli mi yoksa isteğe bağlı mı olduğunu belirtebilirsiniz:

<script type="text/javascript" src="~/scripts/global.js"></script>

@RenderSection("Scripts", required: false)

Gerekli bir bölüm bulunamasa bir özel durum oluşturur. Tek tek görünümler söz dizimi kullanılarak bölüm içinde işlenecek içeriği @section Razor belirtir. Sayfa veya görünüm bir bölümü tanımlarsa, bu bölüm işlenecektir (yoksa bir hata oluşur).

Sayfalar görünümünde @section örnek Razor bir tanım:

@section Scripts {
     <script type="text/javascript" src="~/scripts/main.js"></script>
}

Yukarıdaki kodda, betikler/main.js bir sayfanın scripts veya görünümün bölümüne eklenir. Aynı uygulamanın diğer sayfaları veya görünümleri için bu betik gerekli değildir ve betik bölümü tanımlanmaz.

Aşağıdaki işaretleme, _ValidationScriptsPartial.cshtml dosyasını işlemek için Kısmi Etiket Yardımcı'yı kullanır:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Yukarıdaki işaretleme, yapı iskelesi oluşturularak oluşturulmuş. Identity

Bir sayfada veya görünümde tanımlanan bölümler yalnızca kendi anlık düzen sayfasında kullanılabilir. Bunlar kısmi bileşenlerden, görünüm bileşenlerinden veya görünüm sisteminin diğer parçalarından başvuruamaz.

Bölümleri yoksayma

Varsayılan olarak, içerik sayfasındaki gövde ve tüm bölümler düzen sayfası tarafından işlenecektir. Görünüm Razor altyapısı, gövdenin ve her bölümün işlenmeden önce işlenmelerini takip edip bunu zorunlu hale getirerek bunu zorunlu hale getirebilirsiniz.

Görünüm altyapısına gövdeyi veya bölümleri yoksayma talimatı için ve IgnoreBody IgnoreSection yöntemlerini arayın.

Gövde ve bir sayfada yer alan her Razor bölüm işlenecek veya yoksayılacak.

Paylaşılan Yönergeleri İçeri Aktarma

Görünümler ve sayfalar ad Razor alanlarını içeri aktarma ve bağımlılık ekleme kullanma yönergelerini kullanabilir. Birçok görünüm tarafından paylaşılan yönergeler ortak bir _ViewImports.cshtml dosyasında belirtilebilir. Dosya _ViewImports aşağıdaki yönergeleri destekler:

  • @addTagHelper
  • @removeTagHelper
  • @tagHelperPrefix
  • @using
  • @model
  • @inherits
  • @inject

Dosya, işlevler ve bölüm Razor tanımları gibi diğer özellikleri desteklemez.

Örnek _ViewImports.cshtml dosya:

@using WebApplication1
@using WebApplication1.Models
@using WebApplication1.Models.AccountViewModels
@using WebApplication1.Models.ManageViewModels
@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

MVC _ViewImports için ASP.NET Core.cshtml dosyası genellikle Sayfalar (veya Görünümler) klasörüne yerleştirilir. Bir _ViewImports.cshtml dosyası herhangi bir klasöre yerleştirilebilirsiniz; bu durumda dosya yalnızca bu klasör ve klasör içindeki sayfalara veya görünümlere ve alt klasörlerine uygulanır. _ViewImports dosyalar kök düzeyinden başlayarak ve ardından sayfanın konumunu veya kendisini görüntülemek için her klasör için işlenir. _ViewImports kök düzeyinde belirtilen ayarlar klasör düzeyinde geçersiz kılınabilir.

Örneğin, şunları varsayalım:

  • _ViewImports.cshtml dosyasının kök düzeyi ve @model MyModel1 @addTagHelper *, MyTagHelper1 içerir.
  • _ViewImports.cshtml dosyasının alt klasörü ve @model MyModel2 @addTagHelper *, MyTagHelper2 içerir.

Alt klasörde yer alan sayfalar ve görünümler hem Etiket Yardımcılarına hem de MyModel2 modele erişime sahip olur.

Dosya hiyerarşisinde _ViewImports.cshtml dosyası bulunursa, yönergelerin birleşik davranışı:

  • @addTagHelper, @removeTagHelper : tüm çalıştırma sırasıyla
  • @tagHelperPrefix: görünüme en yakın olan kişi diğerlerini geçersiz kılar
  • @model: görünüme en yakın olan kişi diğerlerini geçersiz kılar
  • @inherits: görünüme en yakın olan kişi diğerlerini geçersiz kılar
  • @using: hepsi dahil edilir; yinelenenler yoksayılır
  • @inject: her özellik için, görünüme en yakın özellik aynı özellik adına sahip diğer tüm diğerlerini geçersiz kılar

Her Görünümden Önce Kod Çalıştırma

Her görünüm veya sayfadan önce çalışması gereken kod _ViewStart.cshtml dosyasına yerleştiril olmalıdır. Kural gereği, _ViewStart.cshtml dosyası Sayfalar (veya Görünümler ) klasöründe bulunur. _ViewStart.cshtml içinde listelenen deyimler her tam görünümden önce (düzen değil, kısmi görünümler değil) çalıştırıldı. ViewImports.cshtmlgibi _ViewStart.cshtml de hiyerarşiktir. görünüm veya sayfalar klasöründe bir _ViewStart.cshtml dosyası tanımlanmışsa, Sayfalar (veya Görünümler) klasörünün kökünde tanımlanan dosyadan (varsa) sonra çalıştırabilirsiniz.

Örnek _ViewStart.cshtml dosyası:

@{
    Layout = "_Layout";
}

Yukarıdaki dosya tüm görünümlerin _Layout.cshtml düzenini kullanmayacaklarını belirtir.

_ViewStart.cshtml ve _ViewImports.cshtml normalde /Pages/Shared (veya /Views/Shared ) klasörüne yerleştirilmz. Bu dosyaların uygulama düzeyindeki sürümleri doğrudan /Pages (veya /Views ) klasörüne yerleştirilleri gerekir.