|آموزش جامع Microsoft Blazor|آموزش طرح بندی در Blazor Framework|

طرح بندی در فریمورک Blazor

معمولا برنامه های کاربردی مدرن دارای بیش از یک صفحه هستند که عناصر طرح بندی خاص خود را دارند، که از جمله این عناصر می توان به منو ها، لوگو ها و پیام های کپی رایت که روی تمامی صفحات نمایش داده می شوند اشاره کرد.

• استفاده مجدد از کد این عناصر طرح بندی در تمامی صفحات، راه حل خوبی نخواهد بود.

• در گذر زمان نگهداری از آن سخت می شود و احتمالا یکپارچگی خود را از دست می دهد.

• طرح بندی در فریم ورک blazor

  ، این مشکل را حل کرده است. هر بخشی از

  یک برنامه کاربردی در فریم ورک blazor

  یک مولفه است، بنابراین طرح بندی نیز در برنامه های کاربردی بلیزر به عنوان یک مولفه در نظر گرفته می شود.

طرح بندی در فریمورک Blazor

طرح بندی در فریم ورک blazor

فقط مولفه ای دیگر از مولفه های بلیزر است که در قالب razor یا کد C# نیز تعریف شده است. طرح بندی بلیزر همانند مولفه های بلیزر شامل همه چیز مانند اتصال داده و تزریق وابستگی می باشد، اما دارای دو جنبه اضافی دیگر هم هست :

1. ارث بری در فریمورک Blazor

• مولفه طرح بندی از BlazorLayoutComponent به ارث می رسد.

• همچنین یک خصیصه body را به مولفه اضافه می کند که شامل محتویاتی است که درون طرح بندی باید رندر شود.

2. Body در فریم ورک Blazor

• Razor مولفه ای از طرح بندی است که کلمه کلیدی @Body را در بر می گیرد.

• در حین رندر کردن، با محتویات طرح بندی جایگزین می شود.

قالب پیش فرض بلیزر، تحت پوشه های به اشتراک گذاشته شده ای از جمله MainLayout.cshtml است. این قالب به عنوان صفحه طرح بندی عمل می کند.

@ inherits BlazorLayoutComponent

< 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>

نمونه کد بالا قالب razor برای یک مولفه طرح بندی را نشان می دهد.

بارگذاری مولفه های فریمورک Blazor

برای بارگذاری هر مولفه از

فریمورک بلیزر

درون یک طرح بندی، نیاز به استفاده از بخش(directive) @layout دارید.

@ layout MyLayout

@ page "/my-data"

< h2>My Data< /h2>
...

• زمانی که مولفه درخواست می شود، محتویات آن در نقطه ای که تگ @Body تعریف شده است، درون مولفه طرح بندی بارگذاری می شود.

• کامپایلر این بخش(directive) را به یک ویژگی طرح بندی (LayoutAttribute) تبدیل میکند که به کلاس مولفه اعمال می شود.

اگر یک مولفه را فقط در C# می نویسید و می خواهید از یک مولفه طرح بندی استفاده کنید، می توانید آن را به [LayoutAttribute] مجهز کنید.

// Using pure C#

[Layout(typeof(MyLayout))]
public class MyClass : BlazorComponent
{
    ...
}

این همان چیزی است که کامپایلر در نهایت بخش @layout را به آن تبدیل می کند.

طرح بندی سراسری در فریم ورک Blazor

در ASP.net MVC ، فایل _ViewImports.cshtml به منظور ارائه مکانیزمی برای دسترسی سراسری بخش ها (directives) به صفحات razor بدون اضافه کردن آنها به همه صفحات، معرفی شد.

• همچنین می توانید از این فایل برای تعریف صفحه

  طرح بندی در فریم ورک blazor

  استفاده کنید.

• طرح بندی در فریم ورک blazor

  به صورت خودکار بر روی همه صفحات در سلسله مراتب پوشه اعمال می شود.

فایل پیش فرض _ViewImports.cshtml زمانی که یک برنامه کاربردی بلیزر جدید ساخته می شود، به این شکل است.

@ layout MainLayout

طرح بندی تو در تو در فریمورک Blazor

در

فریم ورک بلیزر

می توانید از طرح بندی های تو در تو نیز استفاده کنید. به عنوان مثال، مولفه بلیزر می تواند طرحی را ارجاع دهد که یک طرح دیگر را ارجاع می دهد. از طرح بندی های تو در تو می توان برای انعکاس ساختار منو چند سطحی استفاده کرد. فایل MyLayout.cshtml در ادامه موجود است.

@ inherits BlazorLayoutComponent

< div class="main">
    < div class="top-row px-4">
        < h3>My Layout< /h3>
    < /div>

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

CustomLayout.cshtml در اینجا وجود دارد که MyLayout.cshtml را ارجاع می دهد.

@ layout MyLayout
@ inherits BlazorLayoutComponent

< div class="main">
    < div class="row">
        < div class="col-sm-12">
            < h2>Nested Layout Example< /h2>
        < /div>
    < /div>
    < div class="row">
        < div class="col-sm-12">
            @ Body
        < /div>
    < /div>
< /div>

در اینجا Nestedlayout.cshtml در حال ارجاع دادن CustomLayout.cshtml است.

@ layout CustomLayout
@ page "/nestedlayout"

< h3>@ Title< /h3>

@ functions {
string Title = "This is child page using Nested Layout";
}

صفحه طرح بندی کد های تکراری را در برنامه کاربردی شما کاهش می دهد و باعث می شود کل برنامه شما منسجم به نظر برسد.