ASP.NET Çekirdek Blazor düzenleri

Bu makalede, uygulamalar için Blazor yeniden kullanılabilir düzen bileşenlerinin nasıl oluşturulacağı açıklanmaktadır.

Düzenlerin Blazor kullanışlılığı

Menüler, telif hakkı iletileri ve şirket logoları gibi bazı uygulama öğeleri genellikle uygulamanın genel sunumunun bir parçasıdır. Bu öğeler için işaretlemenin bir kopyasını bir uygulamanın tüm bileşenlerine yerleştirmek verimli değildir. Bu öğelerden biri her güncelleştirildiğinde, öğesini kullanan her bileşen güncelleştirilmelidir. Bu yaklaşımın sürdürülmesi maliyetlidir ve bir güncelleştirmenin kaçırılması durumunda tutarsız içeriğe yol açabilir. Düzenler bu sorunları çözer.

Blazor Düzen, işaretlemeyi ona başvuran bileşenlerle paylaşan bir Razor bileşendir. Düzenler veri bağlama, bağımlılık ekleme ve bileşenlerin diğer özelliklerini kullanabilir.

Düzen bileşenleri

Düzen bileşeni oluşturma

Düzen bileşeni oluşturmak için:

• Razor Şablon veya C# kodu tarafından tanımlanan bir Razor bileşen oluşturun. Şablona Razor dayalı düzen bileşenleri, normal Razor bileşenler gibi dosya uzantısını kullanır.razor. Düzen bileşenleri bir uygulamanın bileşenleri arasında paylaşıldığından, bunlar genellikle uygulamanın Shared veya Layout klasörüne yerleştirilir. Ancak, düzenler onu kullanan bileşenlerin erişebileceği herhangi bir konuma yerleştirilebilir. Örneğin, bir düzen, onu kullanan bileşenlerle aynı klasöre yerleştirilebilir.
• bileşenini öğesinden LayoutComponentBasedevralın. düzeninde LayoutComponentBase işlenen içerik için bir Body özellik (RenderFragment tür) tanımlar.
• İçeriğin Razor işlendiği düzen işaretlemesinde konumu belirtmek için söz dizimini @Body kullanın.

Not

hakkında RenderFragmentdaha fazla bilgi için bkz . ASP.NET Core Razor bileşenleri.

Aşağıdaki DoctorWhoLayout bileşen, düzen bileşeninin Razor şablonunu gösterir. Düzen, gezinti çubuğu () ile alt bilgi () arasındaki öğesini devralır LayoutComponentBase ve ayarlar@Body.<nav>...</nav><footer>...</footer>

DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<PageTitle>Doctor Who® Database</PageTitle>

<header>
    <h1>Doctor Who® Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

MainLayout bileşeni

Proje şablonundan oluşturulan bir Blazor uygulamada bileşen, MainLayout uygulamanın varsayılan düzenidir. Blazor'nin düzeni (W3C belirtiminiFlexbox layout model (MDN documentation)) benimser.

Blazor'nin CSS yalıtım özelliği , yalıtılmış CSS stillerini bileşene MainLayout uygular. Kurala göre, stiller, aynı adı MainLayout.razor.csstaşıyan stil sayfası tarafından sağlanır. Stil sayfasının ASP.NET Core çerçeve uygulaması, ASP.NET Core başvuru kaynağında (dotnet/aspnetcore GitHub deposunda) inceleme için kullanılabilir:

• Blazor Web Uygulaması MainLayout.razor.css
• Blazor WebAssembly MainLayout.razor.css

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Düzen uygulama

Düzen ad alanını kullanılabilir hale getirme

Düzen dosyası konumları ve ad alanları çerçeve için Blazor zaman içinde değişti. Oluşturduğunuz uygulamanın sürümüne Blazor ve türüne Blazor bağlı olarak, düzeni kullanırken düzenin ad alanını belirtmeniz gerekebilir. Bir düzen uygulamasına başvururken ve düzenin ad alanı belirtilmeden düzen bulunamadığında, aşağıdaki yaklaşımlardan herhangi birini kullanın:

• Düzenlerin _Imports.razor konumu için dosyasına bir @using yönerge ekleyin. Aşağıdaki örnekte, adı Layout olan bir düzen klasörü bir Components klasörün içindedir ve uygulamanın ad alanı şöyledir BlazorSample:

  @using BlazorSample.Components.Layout
  

• Düzenin kullanıldığı bileşen tanımının en üstüne bir @using yönerge ekleyin:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• Düzenin kullanıldığı ad alanını tam olarak niteler:

  @layout BlazorSample.Components.Layout.DoctorWhoLayout
  

Bir bileşene düzen uygulama

Yönergesi @layoutRazor olan @page yönlendirilebilir Razor bir bileşene düzen uygulamak için yönergesini kullanın. Derleyici bir'e LayoutAttribute dönüştürür @layout ve özniteliğini bileşen sınıfına uygular.

Aşağıdaki Episodes bileşenin içeriği konumuna DoctorWhoLayout@Bodyeklenir.

Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>Doctor Who® Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sunmakers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Aşağıdaki işlenmiş HTML işaretlemesi, önceki DoctorWhoLayout ve Episodes bileşen tarafından oluşturulur. İlgili iki bileşen tarafından sağlanan içeriğe odaklanmak için gereksiz işaretleme görünmez:

• Üst bilgideki (), gezinti çubuğundaki (<h1>...</h1><header>...</header>) ve alt bilgideki (<nav>...</nav>) ticari marka bilgilerindeki H1 "veritabanı" başlığı (<footer>...</footer>), bileşenden DoctorWhoLayout gelir.
• H2 "bölümler" başlığı (<h2>...</h2>) ve bölüm listesi (<ul>...</ul>) bileşenden Episodes gelir.

<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<footer>
    ...
</footer>

Düzenin doğrudan bir bileşende belirtilmesi varsayılan düzeni geçersiz kılar:

• @layout Aşağıdaki Bileşenler klasörüne düzen uygulama bölümünde açıklandığı gibi bir dosyadan _Imports.razor içeri aktarılan yönerge tarafından ayarlanır.
• Bu makalenin devamında yer alan Uygulamaya varsayılan düzen uygulama bölümünde açıklandığı gibi uygulamanın varsayılan düzeni olarak ayarlayın.

Bileşen klasörüne düzen uygulama

Bir uygulamanın her klasörü isteğe bağlı olarak adlı _Imports.razorbir şablon dosyası içerebilir. Derleyici, içeri aktarmalar dosyasında belirtilen yönergeleri aynı klasördeki tüm Razor şablonlara ve tüm alt klasörlerinde özyinelemeli olarak içerir. Bu nedenle, içeren @layout DoctorWhoLayout bir _Imports.razor dosya bir klasördeki tüm bileşenlerin bileşeni kullanmasını DoctorWhoLayout sağlar. Klasör ve alt klasörler içindeki Razor tüm bileşenlere (.razor) tekrar tekrar eklemeye @layout DoctorWhoLayout gerek yoktur.

_Imports.razor:

@layout DoctorWhoLayout
...

Dosya_Imports.razor, görünümler ve sayfalar için Razor _ViewImports.cshtml dosyasına benzer ancak özellikle bileşen dosyalarına Razor uygulanır.

içinde _Imports.razor bir düzen belirtmek, yönlendiricinin varsayılan uygulama düzeni olarak belirtilen ve aşağıdaki bölümde açıklanan düzeni geçersiz kılar.

Uyarı

Kök _Imports.razor dosyaya bir Razor@layout yönerge eklemeyin ve bu da sonsuz düzen döngüsüne neden olur. Varsayılan uygulama düzenini denetlemek için bileşendeki Router düzeni belirtin. Daha fazla bilgi için aşağıdaki Uygulamaya varsayılan düzen uygulama bölümüne bakın.

Not

yönergesi @layoutRazor yalnızca yönergesi olan yönlendirilebilir Razor bileşenlere bir @page düzen uygular.

Uygulamaya varsayılan düzen uygulama

Bileşenin RouteView bileşeninde Router varsayılan uygulama düzenini belirtin. DefaultLayout Düzen türünü ayarlamak için parametresini kullanın:

<RouteView RouteData="routeData" DefaultLayout="typeof({LAYOUT})" />

Yukarıdaki örnekte yer {LAYOUT} tutucu düzendir (örneğin, DoctorWhoLayout düzen dosyası adı ise DoctorWhoLayout.razor). .NET sürümüne ve uygulama türüne Blazor bağlı olarak düzenin ad alanında kimlik oluşturmanız gerekebilir. Daha fazla bilgi için Düzen ad alanını kullanılabilir hale getirme bölümüne bakın.

Düzeni, bu makalenin Router önceki bölümlerinde açıklandığı gibi bileşen RouteView başına veya klasör başına temelinde geçersiz kılabileceğiniz için, bileşenin düzeninde varsayılan düzen olarak belirtmek yararlı bir uygulamadır. Düzenleri Router kullanmak için en genel ve esnek yaklaşım olduğundan, uygulamanın varsayılan düzenini ayarlamak için bileşeni kullanmanızı öneririz.

Rastgele içeriğe düzen uygulama (LayoutView bileşen)

Rastgele Razor şablon içeriği için bir düzen ayarlamak için düzeni bir LayoutView bileşenle belirtin. herhangi bir LayoutViewRazor bileşende kullanabilirsiniz. Aşağıdaki örnek, bileşenin şablonu (<NotFound>...</NotFound>) için adlı ErrorLayout bir düzen bileşeni NotFoundMainLayout ayarlar.

<Router ...>
    <Found ...>
        ...
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

.NET sürümüne ve uygulama türüne Blazor bağlı olarak düzenin ad alanını tanımlamanız gerekebilir. Daha fazla bilgi için Düzen ad alanını kullanılabilir hale getirme bölümüne bakın.

Önemli

Blazor Web Apps parametresini NotFound (<NotFound>...</NotFound> işaretleme) kullanmaz, ancak çerçevede hataya neden olan bir değişikliği önlemek için geriye dönük uyumluluk için parametresi desteklenir. Sunucu tarafı ASP.NET Core ara yazılım işlem hattı, sunucudaki istekleri işler. Hatalı istekleri işlemek için sunucu tarafı tekniklerini kullanın. Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

İç içe yerleştirilmiş düzenler

Bir bileşen, sırayla başka bir düzene başvuran bir düzene başvurabilir. Örneğin, iç içe yerleştirilmiş düzenler çok düzeyli menü yapıları oluşturmak için kullanılır.

Aşağıdaki örnekte iç içe yerleştirilmiş düzenlerin nasıl kullanılacağı gösterilmektedir. Bir Episodes bileşene düzen uygulama bölümünde gösterilen bileşen , görüntülenecek bileşendir. Bileşen, bileşene başvurur DoctorWhoLayout .

Aşağıdaki DoctorWhoLayout bileşen, bu makalenin önceki bölümlerinde gösterilen örneğin değiştirilmiş bir sürümüdür. Üst bilgi ve alt bilgi öğeleri kaldırılır ve düzen başka bir düzen olan ProductionsLayoutöğesine başvurur. Episodes Bileşeni, içinde DoctorWhoLayoutgöründüğü yerde @Body işlenir.

DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<PageTitle>Doctor Who® Database</PageTitle>

<h1>Doctor Who® Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

Bileşen ProductionsLayout üst bilgi () ve alt bilgi (<header>...</header><footer>...</footer>) öğelerinin bulunduğu en üst düzey düzen öğelerini içerir. DoctorWhoLayout bileşeni ileEpisodes, göründüğü yerde @Body işlenir.

ProductionsLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

Aşağıdaki işlenmiş HTML işaretlemesi, önceki iç içe yerleştirilmiş düzen tarafından oluşturulur. İlgili üç bileşen tarafından sağlanan iç içe yerleştirilmiş içeriğe odaklanmak için fazlalık işaretleme gösterilmez:

• Üst bilgi (<header>...</header>), üretim gezinti çubuğu (<nav>...</nav>) ve alt bilgi (<footer>...</footer>) öğeleri ve bunların içeriği bileşenden ProductionsLayout gelir.
• H1 "veritabanı" başlığı (<h1>...</h1>), bölüm gezinti çubuğu (<nav>...</nav> ) ve ticari marka bilgileri (<div>...</div>) bileşenden DoctorWhoLayout gelir.
• H2 "bölümler" başlığı (<h2>...</h2>) ve bölüm listesi (<ul>...</ul>) bileşenden Episodes gelir.

<header>
    ...
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

<h1>...</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<div>
    ...
</div>

<footer>
    ...
</footer>

Razor Tümleşik bileşenlerle Sayfalar düzenini paylaşma

Yönlendirilebilir bileşenler bir Razor Sayfalar uygulamasıyla tümleştirildiğinde, uygulamanın paylaşılan düzeni bileşenlerle birlikte kullanılabilir. Daha fazla bilgi için bkz . ASP.NET Core Razor bileşenlerini ASP.NET Core uygulamalarıyla tümleştirme.

Bölümler

Alt Razor bileşenden bir düzendeki içeriği denetlemek için bkz . ASP.NET Çekirdek Blazor bölümleri.

Ek kaynaklar

• ASP.NET Core'daki düzen
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)