ASP.NET Core Blazor geçtiğinizde

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 biçimlendirmenin bir kopyasını bir uygulamanın tüm bileşenlerine yerleştirmek verimli değildir. Bu öğelerden birini her güncelleştirilişinde, öğesini kullanan her bileşen güncelleştirilmeleri gerekir. Bu yaklaşım bakım açısından maliyetlidir ve bir güncelleştirme kaçırıldığında tutarsız içeriğe yol açabilir. Düzenler bu sorunları çözmez.

BlazorDüzen, Razor biçimlendirmeyi ona başvuran bileşenlerle paylaşan bir bileşendir. Düzenler veri bağlama, bağımlılık eklemeve bileşenlerin diğer özelliklerini kullanabilir.

Düzen bileşenleri

Düzen bileşeni oluşturma

Bir düzen bileşeni oluşturmak için:

• RazorŞablon veya C# kodu tarafından tanımlanan bir bileşen oluşturun Razor . Şablonu temel alan düzen bileşenleri Razor , .razor normal bileşenler gibi dosya uzantısını kullanır Razor . Düzen bileşenleri bir uygulamanın bileşenleri arasında paylaşıldığından, genellikle uygulamanın klasörüne yerleştirilirler Shared . Ancak, düzenler onu kullanan bileşenlere erişilebilen herhangi bir konuma yerleştirilebilir. Örneğin, bir düzen onu kullanan bileşenlerle aynı klasöre yerleştirilebilir.
• Bileşenini öğesinden alın LayoutComponentBase . LayoutComponentBase Body RenderFragment Düzen içindeki işlenmiş içerik için bir özelliği (türü) tanımlar.
• Razor @Body İçeriğin işlendiği yerleşim biçimlendirmesinde konumu belirtmek için söz dizimini kullanın.

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

MainLayout bileşeni

Blazor Proje şablonundanoluşturulan bir uygulamada, MainLayout bileşen uygulamanın varsayılan yerleşimidir.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

Blazor CSS yalıtım özelliği bileşene yalıtılmış CSS stilleri uygular MainLayout . Kurala göre, stiller aynı adın eşlik eden stil sayfası tarafından sağlanır Shared/MainLayout.razor.css . stil sayfasının ASP.NET Core framework uygulamasını ASP.NET Core başvuru kaynağında (dotnet/aspnetcore GitHub deposu)inceleme için kullanılabilir.

Düzen uygulama

Bileşene düzen uygulama

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

Aşağıdaki Episodes bileşenin içeriği konumuna öğesine eklenir DoctorWhoLayout @Body .

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</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 biçimlendirmesi, önceki ve bileşeni tarafından oluşturulur DoctorWhoLayout Episodes . Dahil olmak üzere iki bileşen tarafından belirtilen içeriğe odaklanmak için, yabancı biçimlendirme görünmez:

• altbilgide () üst bilgi ™ <h1>...</h1> ( <header>...</header> ), gezinti çubuğu ( <nav>...</nav> ) ve ticari marka bilgisi öğesi () içindeki Doctor Who bölüm veritabanı başlığı (), <div>...</div> <footer>...</footer> DoctorWhoLayout bileşenden gelir.
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( <ul>...</ul> ) bileşenden gelir Episodes .

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

Düzen doğrudan bir bileşen içinde belirtildiğinde varsayılan bir düzen geçersiz kılınır:

• @layoutBir bileşenden () içeri aktarılan bir yönerge tarafından _Imports _Imports.razor , aşağıda açıklandığı gibi, Bileşenler klasörü için bir düzen uygulama bölümüne bakın.
• Bu makalenin ilerleyen kısımlarında bir 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ı bir şablon dosyası içerebilir _Imports.razor . Derleyici, içeri aktarmalar dosyasında belirtilen yönergeleri Razor aynı klasörde ve özyinelemeli olarak tüm alt klasörlerinde bulunan tüm şablonlarda içerir. Bu nedenle, _Imports.razor içeren bir dosya, @layout DoctorWhoLayout bir klasördeki tüm bileşenlerin bileşeni kullanmasını sağlar DoctorWhoLayout . @layout DoctorWhoLayout Razor .razor Klasör ve alt klasörler içindeki tüm bileşenlere () tekrar tekrar ekleme gereksinimi yoktur.

_Imports.razor:

@layout DoctorWhoLayout
...

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

İçinde bir düzen belirtildiğinde _Imports.razor , aşağıdaki bölümde açıklanan yönlendiricinin Varsayılan uygulama düzeniolarak belirtilen bir düzen geçersiz kılınır.

Uygulamaya varsayılan bir düzen uygulama

Bileşen bileşeninde varsayılan uygulama yerleşimini belirtin App Router . Bir Blazor proje şablonunu temel alan bir uygulamadan aşağıdaki örnek, bileşene varsayılan düzeni ayarlar MainLayout .

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Bileşen hakkında daha fazla bilgi için Router bkz ASP.NET Core Blazor Yönlendirme ..

RouterBu makalenin önceki kısımlarında açıklandığı gibi, düzeni bileşen başına veya klasör başına temelinde geçersiz kılabilmeniz için, düzeni bileşen içinde varsayılan düzen olarak belirtme yararlı bir uygulamadır. RouterDüzenleri 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 şablon içeriğine yönelik bir düzen ayarlamak için Razor , bir bileşeni olan düzeni belirtin LayoutView . Herhangi bir bileşende bir kullanabilirsiniz LayoutView Razor . Aşağıdaki örnek, ErrorLayout MainLayout bileşen NotFound şablonu () için adlı bir düzen bileşeni belirler <NotFound>...</NotFound> .

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

İç içe düzenleri

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

Aşağıdaki örnek, iç içe düzenleri nasıl kullanacağınızı gösterir. Bir Episodes bileşene düzen uygulama bölümünde gösterilen bileşen, görüntülenecek bileşendir. Bileşen DoctorWhoLayout bileşene başvurur.

Aşağıdaki DoctorWhoLayout Bileşen, bu makalede daha önce gösterilen örneğin değiştirilmiş bir sürümüdür. Üst bilgi ve altbilgi öğeleri kaldırılır ve düzen başka bir düzene başvurur ProductionsLayout . EpisodesBileşen öğesinde göründüğü yerde işlenir @Body DoctorWhoLayout .

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

ProductionsLayoutBileşen üst düzey düzen öğelerini içerir, burada üst bilgi ( <header>...</header> ) ve altbilgi ( <footer>...</footer> ) öğeleri bulunur. DoctorWhoLayoutBileşeni ile birlikte, Episodes göründüğü yerde işlenir @Body .

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

<nav>
    <a href="master-production-list">Master 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 biçimlendirmesi, önceki iç içe yerleştirilmiş düzen tarafından üretilir. Dahil edilen üç bileşen tarafından sunulan iç içe geçmiş içeriğe odaklanmak için fazlalık biçimlendirme görünmez:

• Üst bilgi ( <header>...</header> ), üretim gezinti çubuğu ( <nav>...</nav> ) ve altbilgisi ( <footer>...</footer> ) öğeleri ve bunların içeriği ProductionsLayout bileşenden gelir.
• Doctor Who ™ bölüm veritabanı başlığı ( <h1>...</h1> ), bölüm gezinti çubuğu ( <nav>...</nav> ) ve ticari marka bilgisi öğesi ( <div>...</div> ) bileşenden gelir DoctorWhoLayout .
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( <ul>...</ul> ) bileşenden gelir Episodes .

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

RazorTümleşik bileşenlerle bir sayfa düzeni paylaşma

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

Ek kaynaklar

• ASP.NET Core'de düzen

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 biçimlendirmenin bir kopyasını bir uygulamanın tüm bileşenlerine yerleştirmek verimli değildir. Bu öğelerden birini her güncelleştirilişinde, öğesini kullanan her bileşen güncelleştirilmeleri gerekir. Bu yaklaşım bakım açısından maliyetlidir ve bir güncelleştirme kaçırıldığında tutarsız içeriğe yol açabilir. Düzenler bu sorunları çözmez.

BlazorDüzen, Razor biçimlendirmeyi ona başvuran bileşenlerle paylaşan bir bileşendir. Düzenler veri bağlama, bağımlılık eklemeve bileşenlerin diğer özelliklerini kullanabilir.

Düzen bileşenleri

Düzen bileşeni oluşturma

Bir düzen bileşeni oluşturmak için:

• RazorŞablon veya C# kodu tarafından tanımlanan bir bileşen oluşturun Razor . Şablonu temel alan düzen bileşenleri Razor , .razor normal bileşenler gibi dosya uzantısını kullanır Razor . Düzen bileşenleri bir uygulamanın bileşenleri arasında paylaşıldığından, genellikle uygulamanın klasörüne yerleştirilirler Shared . Ancak, düzenler onu kullanan bileşenlere erişilebilen herhangi bir konuma yerleştirilebilir. Örneğin, bir düzen onu kullanan bileşenlerle aynı klasöre yerleştirilebilir.
• Bileşenini öğesinden alın LayoutComponentBase . LayoutComponentBase Body RenderFragment Düzen içindeki işlenmiş içerik için bir özelliği (türü) tanımlar.
• Razor @Body İçeriğin işlendiği yerleşim biçimlendirmesinde konumu belirtmek için söz dizimini kullanın.

Aşağıdaki DoctorWhoLayout bileşen Razor bir düzen bileşeninin şablonunu gösterir. Düzen gezinti çubuğunu ( ) ve alt LayoutComponentBase bilgi ( ) arasında @Body <nav>...</nav> devralınarak <footer>...</footer> ayarlar.

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

MainLayout bileşeni

Proje şablonundan oluşturulan Blazor bir uygulamada MainLayout bileşen, uygulamanın varsayılan düzenidir.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

Blazor 'nin CSS yalıtım özelliği, bileşene yalıtılmış CSS stilleri MainLayout uygular. Kural gereği, stiller aynı adı ( ) birlikte verilen stil sayfası tarafından Shared/MainLayout.razor.css sağlanır. stil ASP.NET Core çerçeve uygulaması, ASP.NET Core başvuru kaynağında (dotnet/aspnetcore GitHub deposu) ince kullanılabilir.

Düzen uygulama

Bileşene düzen uygulama

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

Aşağıdaki bileşenin Episodes içeriği konumunda DoctorWhoLayout içine @Body eklenir.

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</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 ve bileşeni DoctorWhoLayout tarafından Episodes oluşturulur. Dahil olan iki bileşen tarafından sağlanan içeriğe odaklanmak için fazlalık işaretleme görünmez:

• Doktor Who ™ üst bilgisinde ( ), gezinti çubuğundaki ( ) ve alt bilgideki ( ) ticari marka bilgi öğesinde ( ) Bölüm Veritabanı başlığı ( ) <h1>...</h1> <header>...</header> <nav>...</nav> <div>...</div> <footer>...</footer> bileşeninden DoctorWhoLayout gelir.
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( ) <ul>...</ul> bileşenden Episodes gelir.

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

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

• Aşağıdaki Bileşen klasörüne düzen uygulama bölümünde açıklandığı gibi, bir bileşenden ( ) içe aktarılan @layout _Imports bir yönerge _Imports.razor tarafından ayarlayın.
• Bu makalenin ilerleyen kısımlarında bir 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ı bir şablon dosyası _Imports.razor içerebilir. Derleyici, içeri aktarmalar dosyasında belirtilen yönergeleri aynı klasördeki tüm şablonlarda ve tüm alt klasörlerde yineleyici Razor olarak içerir. Bu nedenle, _Imports.razor içeren bir @layout DoctorWhoLayout dosya, bir klasördeki tüm bileşenlerin bileşeni kullanmalarını DoctorWhoLayout sağlar. Klasör ve alt klasörlerdeki tüm @layout DoctorWhoLayout Razor bileşenlere ( .razor ) tekrar tekrar eklemeye gerek yoktur.

_Imports.razor:

@layout DoctorWhoLayout
...

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

içinde bir düzen belirterek yönlendiricinin varsayılan uygulama düzeni olarak belirtilen bir düzeni geçersiz _Imports.razor kılar vebu düzen aşağıdaki bölümde açıklanmıştır.

Uygulamaya varsayılan düzen uygulama

Bileşenin bileşeninde varsayılan App uygulama düzenini Router belirtin. Bir proje şablonunu temel alan bir uygulamanın Blazor aşağıdaki örneği, varsayılan düzeni bileşene MainLayout ayarlar.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Bileşen hakkında daha fazla Router bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

Bu makalenin önceki bölümlerinde açıklandığı gibi, düzeni bileşen başına veya klasör temelinde geçersiz kılabilirsiniz, çünkü düzeni bileşende varsayılan düzen olarak belirtmek yararlı Router bir uygulamadır. Düzenleri kullanmaya en genel ve esnek yaklaşım olduğundan, uygulamanın varsayılan düzenini Router ayarlamak için bileşeninin kullanılması önerilir.

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

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

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

İç içe geçmiş düzenler

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

Aşağıdaki örnekte iç içe geçmiş düzenlerin nasıl kullanımına sahip olduğu gösterir. Bir Episodes bileşene düzen uygulama bölümünde gösterilen bileşen, gösterilecek bileşendir. Bileşen, bileşene DoctorWhoLayout başvurur.

Aşağıdaki DoctorWhoLayout bileşen, bu makalenin başlarında 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 ' a ProductionsLayout başvurur. Bileşeni, Episodes içinde göründüğü yerde @Body DoctorWhoLayout işlenir.

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

Bileşen, üst bilgi ( ) ve alt bilgi ( ) öğelerinin bulunduğu ProductionsLayout üst düzey düzen öğelerini <header>...</header> <footer>...</footer> içerir. DoctorWhoLayoutbileşeniyle Episodes birlikte, görüntülendiğinde @Body işlenir.

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

<nav>
    <a href="master-production-list">Master 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 geçmiş düzen tarafından oluşturulur. Dahil olan üç bileşen tarafından sağlanan iç içe geçmiş içeriğe odaklanmak için fazlalık işaretleme görünmez:

• Üst bilgi ( <header>...</header> ), üretim gezinti çubuğu ( ) ve alt bilgi ( ) öğeleri ve içerikleri <nav>...</nav> <footer>...</footer> bileşenden ProductionsLayout gelir.
• Doktor Who Bölüm ™ Veritabanı başlığı ( ), bölüm gezinti çubuğu ( ) ve ticari marka bilgisi <h1>...</h1> öğesi ( ) <nav>...</nav> <div>...</div> bileşeninden DoctorWhoLayout gelir.
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( ) <ul>...</ul> bileşenden Episodes gelir.

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

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

Yönlendirilebilir bileşenler bir Sayfalar uygulamasıyla Razor tümleştirilene zaman, uygulamanın paylaşılan düzeni bileşenlerle birlikte kullanılabilir. Daha fazla bilgi için bkz. ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin.

Ek kaynaklar

• ASP.NET Core'de düzen

Menüler, telif hakkı iletileri ve şirket logoları gibi bazı uygulama öğeleri genellikle uygulamanın genel sunumunun bir parçası olur. 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şenin güncelleştirilmiş olması gerekir. Bu yaklaşımın korunması maliyetlidir ve bir güncelleştirmenin atlı olduğu durumda tutarsız içeriğe yol açabilirsiniz. Düzenler bu sorunları çözer.

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

Düzen bileşenleri

Düzen bileşeni oluşturma

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

• Şablon veya Razor Razor C# koduyla tanımlanan bir bileşen oluşturun. Şablona dayalı düzen Razor bileşenleri, normal .razor bileşenler gibi dosya uzantısını Razor kullanır. Düzen bileşenleri bir uygulamanın bileşenleri arasında paylaştırıldıklarına göre genellikle uygulamanın klasörüne Shared yerleştirilirler. Ancak düzenler, onu kullanan bileşenler tarafından erişilebilen herhangi bir konuma yerleştirilebilirsiniz. Örneğin, bir düzen, onu kullanan bileşenlerle aynı klasöre yer olabilir.
• bileşeninden LayoutComponentBase devralın. , LayoutComponentBase Body düzenin içindeki RenderFragment işlenmiş içerik için bir özellik (tür) tanımlar.
• İçeriğin Razor @Body işlenecek düzen işaretlemesinde konumu belirtmek için söz dizimini kullanın.

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

MainLayout bileşeni

Proje şablonundan oluşturulan Blazor bir uygulamada MainLayout bileşen, uygulamanın varsayılan düzenidir.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

Düzen uygulama

Bileşene düzen uygulama

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

Aşağıdaki bileşenin Episodes içeriği konumunda DoctorWhoLayout içine @Body eklenir.

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</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 ve bileşeni DoctorWhoLayout tarafından Episodes oluşturulur. Dahil olan iki bileşen tarafından sağlanan içeriğe odaklanmak için fazlalık işaretleme görünmez:

• Doktor Who ™ üst bilgisinde ( ), gezinti çubuğundaki ( ) ve alt bilgideki ( ) ticari marka bilgi öğesinde ( ) Bölüm Veritabanı başlığı ( ) <h1>...</h1> <header>...</header> <nav>...</nav> <div>...</div> <footer>...</footer> bileşeninden DoctorWhoLayout gelir.
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( ) <ul>...</ul> bileşenden Episodes gelir.

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

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

• Aşağıdaki Bileşen klasörüne düzen uygulama bölümünde açıklandığı gibi, bir bileşenden ( ) içe aktarılan @layout _Imports bir yönerge _Imports.razor tarafından ayarlayın.
• Bu makalenin ilerleyen kısımlarında bir 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ı bir şablon dosyası _Imports.razor içerebilir. Derleyici, içeri aktarmalar dosyasında belirtilen yönergeleri aynı klasördeki tüm şablonlarda ve tüm alt klasörlerde yineleyici Razor olarak içerir. Bu nedenle, _Imports.razor içeren bir @layout DoctorWhoLayout dosya, bir klasördeki tüm bileşenlerin bileşeni kullanmalarını DoctorWhoLayout sağlar. Klasör ve alt klasörlerdeki tüm @layout DoctorWhoLayout Razor bileşenlere ( .razor ) tekrar tekrar eklemeye gerek yoktur.

_Imports.razor:

@layout DoctorWhoLayout
...

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

içinde bir düzen belirterek yönlendiricinin varsayılan uygulama düzeni olarak belirtilen bir düzeni geçersiz _Imports.razor kılar vebu düzen aşağıdaki bölümde açıklanmıştır.

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

Uygulamaya varsayılan düzen uygulama

Bileşenin bileşeninde varsayılan App uygulama düzenini Router belirtin. Bir proje şablonunu temel alan bir uygulamanın Blazor aşağıdaki örneği, varsayılan düzeni bileşene MainLayout ayarlar.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Bileşen hakkında daha fazla Router bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

Bu makalenin önceki bölümlerinde açıklandığı gibi, düzeni bileşen başına veya klasör temelinde geçersiz kılabilirsiniz, çünkü düzeni bileşende varsayılan düzen olarak belirtmek yararlı Router bir uygulamadır. Düzenleri kullanmaya en genel ve esnek yaklaşım olduğundan, uygulamanın varsayılan düzenini Router ayarlamak için bileşeninin kullanılması önerilir.

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

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

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

İç içe geçmiş düzenler

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

Aşağıdaki örnekte iç içe geçmiş düzenlerin nasıl kullanımına sahip olduğu gösterir. Bir Episodes bileşene düzen uygulama bölümünde gösterilen bileşen, gösterilecek bileşendir. Bileşen, bileşene DoctorWhoLayout başvurur.

Aşağıdaki DoctorWhoLayout bileşen, bu makalenin başlarında 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 ' a ProductionsLayout başvurur. Bileşeni, Episodes içinde göründüğü yerde @Body DoctorWhoLayout işlenir.

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

Bileşen, üst bilgi ( ) ve alt bilgi ( ) öğelerinin bulunduğu ProductionsLayout üst düzey düzen öğelerini <header>...</header> <footer>...</footer> içerir. DoctorWhoLayoutbileşeniyle Episodes birlikte, görüntülendiğinde @Body işlenir.

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

<nav>
    <a href="master-production-list">Master 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 geçmiş düzen tarafından oluşturulur. Dahil olan üç bileşen tarafından sağlanan iç içe geçmiş içeriğe odaklanmak için fazlalık işaretleme görünmez:

• Üst bilgi ( <header>...</header> ), üretim gezinti çubuğu ( ) ve alt bilgi ( ) öğeleri ve içerikleri <nav>...</nav> <footer>...</footer> bileşenden ProductionsLayout gelir.
• Doktor Who Bölüm ™ Veritabanı başlığı ( ), bölüm gezinti çubuğu ( ) ve ticari marka bilgisi <h1>...</h1> öğesi ( ) <nav>...</nav> <div>...</div> bileşeninden DoctorWhoLayout gelir.
• Bölüm başlığı ( <h2>...</h2> ) ve bölüm listesi ( ) <ul>...</ul> bileşenden Episodes gelir.

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

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

Yönlendirilebilir bileşenler bir Sayfalar uygulamasıyla Razor tümleştirilene zaman, uygulamanın paylaşılan düzeni bileşenlerle birlikte kullanılabilir. Daha fazla bilgi için bkz. ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin.

Ek kaynaklar

• ASP.NET Core'de düzen