کامپوننتهای جدید SectionOutlet و SectionContent در Blazor 8x
پیاده سازی Sections در Blazor 8x به کمک دو کامپوننت جدید SectionOutlet و SectionContent میسر شدهاست و برای دسترسی به آنها نیاز است ابتدا به فایل Imports.razor_ پروژه، مراجعه کرد و using زیر را به آن اضافه نمود تا این اشیاء، در کامپوننتهای برنامه قابل شناسایی و استفاده شوند:
@using Microsoft.AspNetCore.Components.Sections
SectionOutlet کامپوننتی است که محتوای ارائه شدهی توسط کامپوننت SectionContent را رندر میکند (این محتوا در اصل یک RenderFragment است). ارتباط بین این دو هم توسط خواص SectionName و یا SectionIdهای متناظر، برقرار میشود. اگر چندین SectionContent دارای نام و یا Id یکسانی باشند، محتوای آخرین آنها در SectionOutlet متناظر، رندر میشود.
برای مثال در فایل MainLayout.razor، تغییر زیر را اعمال میکنیم:
<div class="top-row px-4"> <SectionOutlet SectionName="before-top-row"/> <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> </div>
<SectionContent SectionName="before-top-row"> <a href="/show-help" target="_blank">Help</a> </SectionContent>
روش تعریف یک محتوای پیشفرض
این محتوا، فقط زمانی تامین خواهد شد که کامپوننت در حال نمایش SectionContent، قابل مشاهده و فعال شده باشد. یعنی اگر از کامپوننت نمایش دهندهی آن به صفحهی دیگری رجوع کنیم، محتوای SectionOutlet مجددا خالی خواهد شد، تا زمانیکه به آدرس نمایش دهندهی کامپوننت دربرگیرندهی SectionContent متناظر با آن رجوع کنیم. به همین جهت اگر علاقمند به نمایش یک «محتوای پیشفرض» هستید، میتوان به صورت زیر عمل کرد:
<div class="top-row px-4"> <SectionOutlet SectionName="before-top-row" /> <SectionContent SectionName="before-top-row"> <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> </SectionContent> </div>
تفاوت SectionId با SectionName
کامپوننت SectionOutlet، هم میتواند یک SectionName را دریافت کند و هم یک SectionId را. SectionNameها، رشتهای هستند و تغییرات آتی آنها تحت نظارت کامپایلر نیست. به همین جهت اگر نیاز به Refactoring آنها است، شاید بهتر باشد از خاصیت SectionId که یک Id از نوع strongly typed را مشخص میکند، استفاده کنیم.
برای نمونه میتوان مثال قبلی را به صورت زیر با استفاده از یک SectionId، بازنویسی کرد:
<div class="top-row px-4"> <SectionOutlet SectionId="BeforeTopRow" /> <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> </div> @code{ public static SectionOutlet BeforeTopRow = new(); }
سپس هر کامپوننت دیگری که بخواهد از این Id استاتیک استفاده کند، روش کار آن به صورت زیر است:
<SectionContent SectionId="MainLayout.BeforeTopRow"> <a href="/show-help" target="_blank">Help</a> </SectionContent>