یک نکته تکمیلی: امکان انتقال کدهای #C یک کامپوننت، به یک فایل مجزای code behind نیز وجود دارد
روال متداول کار با کامپوننتهای Razor، قرار دادن کدهای #C مربوط به آنها، در قسمت {}code@ همان فایل، با پسوند razor. است. میتوان جهت بالا بردن قابلیت نگهداری کدهای کامپوننتها، برخوردار شدن از intellisense بهتری و همچنین کاهش حجم فایلهای razor. که در نهایت به خوانایی بیشتر و سادهتر آنها منتهی میشود، قطعهی {}code@ را به یک فایل سیشارپ مجزا منتقل کرد؛ با این شرایط و نکات خاص:
- اگر برای مثال نام یک کامپوننت، login.razor است، فایل code behind آن باید با همان نام شروع شود و ختم به cs. شود؛ یعنی در این مثال باید دقیقا نام login.razor.cs را داشته باشد و محتوای ابتدایی آن اکنون به صورت زیر خواهد بود:
namespace ProjectName.Folder1.Folder2
{
public class Login
{
}
}
- پس از آن، یک چنین قطعه کدی، کامپایل نخواهد شد؛ چون کامپوننت login.razor که در پوشهی folder1/folder2 واقع شدهاست نیز توسط کامپایلر به یک چنین کلاسی ترجمه میشود. برای رفع این مشکل، باید کلاس را به صورت partial تعریف کرد تا کدهای آن جزئی از کدهای کامپوننت login.razor شوند:
namespace ProjectName.Folder1.Folder2
{
public partial class Login
{
}
}
- اکنون جهت انتقال کدهای قطعه {}code@، فقط کافی است آنها را انتخاب و cut کرده و سپس در بدنهی کلاس فوق، paste کنیم. در این حالت نیازی نیست سطوح دسترسی قسمتهای مختلف کد، مانند private و protected را تغییر داد و همه چیز مانند قبل خواهد بود.
چند نکته:
- سرویسهایی که با دایرکتیو inject@ تعریف میشوند، در اینجا به صورت زیر توسط Attributes تعریف خواهند شد:
namespace ProjectName.Folder1.Folder2
{
public partial class Login
{
[Inject]
public NavigationManager NavigationManager { set; get; }
// ...
}
}
- فایل سراسری Imports.razor_ که جهت تعریف فضاهای نام تکراری مورد استفاده قرار میگرفت، در اینجا کاربردی نداشته و نیاز است فضاهای نام را همانند کدهای متداول #C، در ابتدای فایل cs. جاری ذکر کرد.
- جهت بهبود Intellisense متناظر با قابلیتهای Blazor، بهتر است کلاس partial تعریف شده، از کلاس پایه ComponentBase نیز ارث بری کند:
namespace ProjectName.Folder1.Folder2
{
public partial class Login : ComponentBase
{
[Inject]
public NavigationManager NavigationManager { set; get; }
// ...
}
}