یک نکتهی تکمیلی: بررسی ساختار Layout در برنامههای Blazor
بعضی از قسمتهای صفحه مانند هدر، منوی راهبری، فوتر امثال آن، عموما در تمام صفحات سایت، به یک شکل نمایش داده میشوند. جهت کاهش اینگونه کدهای تکراری، در برنامهی ASP.NET Web Forms، مفهوم Master Page و در برنامههای MVC، مفهوم layout page ارائه شد که قسمتهای مشترک UI را در آن قرار میدهند تا دیگر نیازی نباشد به ازای هر صفحه، آنها را تکرار کرد. Layout در برنامههای Blazor نیز چنین عملکردی را دارد. از لحاظ فنی، Layout نیز یک کامپوننت Blazor محسوب میشود. برای مثال فایل پیشفرض Shared\MainLayout.razor با یک چنین ساختاری:
@inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="content px-4">
@Body
</div>
</div>
- ابتدا از کلاس LayoutComponentBase ارثبری میکند که به این ترتیب امکان دسترسی به خاصیت Body را در این کامپوننت میسر خواهد کرد.
- سپس با استفاده از Body@، سبب درج محتوای کامپوننت در حال رندر، در صفحه میشود.
DefaultLayout تعریف شده، در فایل آغازین App.razor به تمام کامپوننتهای برنامه اعمال میشود. اما اگر نیاز باشد کامپوننت خاصی از layout دیگری استفاده کند، میتوان از دایرکتیو layout برای بازنویسی آن، استفاده کرد:
@page "/episodes"
@layout DoctorWhoLayout
<h1>Component 2</h1>
نکته 1: این کامپوننت حتما باید به همراه دایرکتیو page@ نیز باشد؛ یعنی حتما باید routable باشد.
نکته 2: اگر برای کامپوننتهای خود فایل code-behind تهیه میکنید، دایرکتیو layout@ به ویژگی Layout قرار گرفتهی بر روی کلاس کامپوننت ترجمه میشود:
[Layout(typeof(MainLayout))]
حتی میتوان یک layout خاص را به پوشهای از کامپوننتها اعمال کرد. برای این منظور در ریشهی این پوشه، فایل Imports.razor_ را قرار داده و سپس دایرکتیو layout@ را به آن اضافه کنید. فایل ویژهی Imports.razor_ را میتوان به هر پوشهای از کامپوننتهای برنامه اضافه کرد.
تذکر! دایرکتیو layout@ را در بالاترین فایل Imports.razor_ که در ریشهی پروژه قرار دارد، درج نکنید؛ چون سبب بروز یک حلقهی بینهایت خواهد شد. همانطور که عنوان شد، بالاترین سطح تعریف layout پیشفرض، در فایل App.razor انجام میشود.