ایجاد Layout جدید در Blazor و نادیده گرفتن Layout پیش فرض

غیرفعال کردن Layout پیش فرض در Blazor

به صورت پیش فرض وقتی شما یک Razor Page در Blazor ایجاد می کنید از MainLayout که همون لایه اصلی برای Page ها هست استفاده می کنه. دلیل این امر هم این هست که همه Page ها و Component ها در Blazor از کامپوننت مادر یعنی App برای نمایش اطلاعات استفاده می کنند و در این کامپوننت هم Layout همون MainLayout تعریف شده. به کد زیر که در واقع همون App.razor هست دقت کنید.

App.razor

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

همونطور که می بینید DefaultLayout رو MainLayout در نظر گرفته.

اما خب حالا به هر دلیل بخواید یکی از Razor Page ها شما از این لایه استفاده نکنه میتونید مراحل زیر رو انجام بدید.

• یک Razor Component جدید با نام دلخواه ایجاد کنید. (مثلا نام آن را customLayout می گذاریم.)
• در customLayout و در قسمت بالا دستور زیر را بنویسید تا مشخص کنیم این یک Layout می باشد.

@inherits LayoutComponentBase

• خب اگر قصد دارید المنتهای Html و css در این Layout جدید تعریف کنید این کار را انجام دهید. سپس از کلمه @Body استفاده کنید. همانطور که می دانید Razor Page های شما در Body نمایش داده می شود.

@inherits LayoutComponentBase

<div class="container">
    @Body
</div>

خب تا اینجای کار شما یک Layout جدید تعریف کردید. حالا می توانید به راحتی از این Layout در Razor Page ها به عنوان لایه جدید استفاده کنید.

• حالا یک Razor Page جدید تعریف کنید و در بالا کدهای زیر را بنویسید تا از لایه جدید استفاده کند.

@page "/mypage"
@layout CustomLayout

<h3>myPage</h3>

@code {

}

دانلود سورس