بررسی تمپلت Blazor Web App

آموزش C#

مقدمه

در درس قبل، با مفهوم Blazor و مدل‌های میزبانی آن آشنا شدیم. بهترین راه برای شروع کار با Blazor، ایجاد یک پروژه با استفاده از تمپلت پیش‌فرض آن است. در .NET 8 و بالاتر، تمپلت جدیدی به نام Blazor Web App معرفی شده است که یک رویکرد یکپارچه و انعطاف‌پذیر برای ساخت اپلیکیشن‌های وب با Blazor ارائه می‌دهد. این تمپلت به ما اجازه می‌دهد تا به راحتی بین مدل‌های رندر سمت سرور و سمت کلاینت جابجا شده و حتی آن‌ها را در یک اپلیکیشن واحد با هم ترکیب کنیم.

در این درس، یک پروژه‌ی جدید با استفاده از این تمپلت ایجاد کرده و ساختار فایل‌ها و پوشه‌ها و مفاهیم کلیدی آن را بررسی خواهیم کرد تا برای ساخت اولین کامپوننت خود آماده شویم.

ایجاد پروژه Blazor Web App

ابتدا در ویژوال استودیو، یک پروژه‌ی جدید ایجاد کرده و تمپلت Blazor Web App را انتخاب می‌کنیم. نام پروژه را MyBlazorApp می‌گذاریم. در صفحه‌ی بعدی، با چند گزینه‌ی پیکربندی مهم مواجه می‌شویم:

  • Interactivity type (نوع تعامل): اینجا مشخص می‌کنیم که آیا می‌خواهیم از تعامل سمت کلاینت با WebAssembly پشتیبانی کنیم یا خیر. برای شروع، گزینه‌ی None را انتخاب می‌کنیم.
  • Interactivity location (محل تعامل): اگر نوع تعامل را WebAssembly انتخاب کرده باشیم، اینجا مشخص می‌کنیم که آیا می‌خواهیم این قابلیت به صورت سراسری برای کل اپلیکیشن فعال باشد یا به صورت هر کامپوننت جداگانه.

پس از ایجاد پروژه، با ساختاری شبیه به یک پروژه‌ی ASP.NET Core عادی مواجه می‌شویم، اما با چند پوشه و فایل جدید و مهم.

بررسی ساختار پروژه

ساختار پروژه Blazor Web App معمولاً شامل این پوشه‌ها و فایل‌های کلیدی است:

  • wwwroot: پوشه‌ای برای فایل‌های استاتیک مانند CSS، جاوااسکریپت و تصاویر.
  • Components: شامل کامپوننت‌ها و صفحات Blazor (در ادامه توضیح داده شده است).
  • App.razor: نقطه شروع اپلیکیشن Blazor و مدیریت مسیریابی.
  • Program.cs: نقطه ورود برنامه و پیکربندی سرویس‌ها.
  • _Imports.razor: برای وارد کردن فضای نام‌ها به صورت سراسری در کامپوننت‌ها.
  • appsettings.json: فایل تنظیمات برنامه.

همچنین ممکن است پوشه‌هایی مانند Data (برای مدل‌ها و سرویس‌های داده) و Shared (برای کامپوننت‌های مشترک) نیز وجود داشته باشد. این ساختار باعث جداسازی مسئولیت‌ها و سازمان‌دهی بهتر کد می‌شود.

پوشه‌ی Components

این مهم‌ترین پوشه‌ی جدید است. تمام کامپوننت‌های قابل استفاده مجدد و صفحات اصلی برنامه‌ی ما در اینجا قرار می‌گیرند. این پوشه خود شامل چند زیرپوشه است:

  • Layout: این پوشه شامل کامپوننت‌های مربوط به طرح‌بندی کلی سایت است. فایل MainLayout.razor طرح اصلی (شامل منوی کناری و هدر) و NavMenu.razor منوی ناوبری را تعریف می‌کنند.
  • Pages: این پوشه حاوی کامپوننت‌هایی است که به عنوان یک صفحه‌ی کامل و قابل مسیریابی عمل می‌کنند. تمپلت پیش‌فرض شامل سه صفحه‌ی Counter.razor، Home.razor و Weather.razor است.

فایل App.razor

این فایل، کامپوننت ریشه‌ی (root component) اپلیکیشن Blazor است. این کامپوننت مسئول مدیریت مسیریابی (routing) در سمت کلاینت است. کد آن به Blazor Router می‌گوید که بر اساس آدرس URL فعلی، کدام کامپوننت از پوشه‌ی Pages را پیدا و رندر کند.

Copy Icon App.razor 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

کامپوننت <Routes /> مسئولیت اصلی مسیریابی را بر عهده دارد و <HeadOutlet /> برای مدیریت محتوای تگ <head> به صورت پویا به کار می‌رود.

فایل Program.cs

این فایل، نقطه‌ی شروع برنامه است و بسیار شبیه به دیگر اپلیکیشن‌های ASP.NET Core است، اما با چند سرویس مخصوص Blazor.

Copy Icon Program.cs (Partial) 
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(); // For Blazor Server interactivity

var app = builder.Build();

// ... middleware pipeline ...

app.MapRazorComponents<App>()
   .AddInteractiveServerRenderMode(); // Enable Blazor Server render mode

app.Run();

خطوط کلیدی در اینجا AddRazorComponents (که سرویس‌های اصلی Blazor را ثبت می‌کند) و MapRazorComponents<App>() (که کامپوننت App.razor را به عنوان ریشه‌ی برنامه برای مسیریابی تنظیم می‌کند) هستند. متدهای مربوط به InteractiveServer نیز حالت رندر تعاملی را برای مدل Blazor Server فعال می‌کنند.

حالت‌های رندر (Render Modes)

یکی از بزرگ‌ترین نوآوری‌های تمپلت Blazor Web App، مفهوم حالت‌های رندر است. به طور پیش‌فرض، کامپوننت‌ها به صورت استاتیک در سمت سرور (Static Server-Side Rendering - SSR) رندر می‌شوند. این یعنی ASP.NET Core کامپوننت را بر روی سرور اجرا کرده، HTML نهایی را تولید و آن را به مرورگر ارسال می‌کند. این حالت بسیار سریع است اما هیچ تعاملی (مانند پاسخ به کلیک دکمه) در آن وجود ندارد.

برای افزودن تعامل، ما باید به صورت صریح یک حالت رندر تعاملی (interactive render mode) را برای یک کامپوننت یا برای کل برنامه مشخص کنیم. این کار با استفاده از صفت [RenderMode...()] یا متد .AddInteractive...RenderMode() انجام می‌شود.

برای مثال، بیایید به کامپوننت Counter.razor نگاه کنیم:

Copy Icon Counter.razor 
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>
<!-- Rest of the component -->

دایرکتیو @rendermode InteractiveServer به Blazor می‌گوید که این کامپوننت خاص باید با استفاده از مدل میزبانی Blazor Server به صورت تعاملی رندر شود و یک اتصال SignalR برای آن برقرار گردد. این انعطاف‌پذیری به ما اجازه می‌دهد تا بخش‌های مختلف برنامه‌ی خود را برای بهترین عملکرد و تجربه‌ی کاربری بهینه کنیم.