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

پاسخ هوش مصنوعی

برای غیر فعال کردن استفاده از Layout پیش فرض در یک صفحه Razor در پروژه بلیزر، می توانید از ویژگی `Layout` در خود کامپوننت Razor استفاده کنید. شما باید آن را به `null` تنظیم کنید. به این صورت:

@page "/your-page"
@layout null

خوش آمدید به صفحه جدید!
این صفحه از Layout پیش فرض استفاده نمی کند.

در اینجا، `@layout null` مشخص می کند که این صفحه هیچ Layoutی ندارد. فقط کافی است این کد را در ابتدای فایل Razor خود اضافه کنید تا Layout پیش فرض (MainLayout) نادیده گرفته شود.

غیرفعال کردن 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 {

}

دانلود سورس