// Backend (API Controller)
[ApiController]
[Route("api/[controller]")]
public class WeatherController : ControllerBase
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
[HttpGet]
public IEnumerable<WeatherForecast> GetForecasts()
{
var rng = new Random();
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(0, 9)]
})
.ToArray();
}
}
// Frontend (Blazor Component)
@page "/weather"
@using System.Net.Http
@using System.Net.Http.Json
@using System.Text.Json.Serialization
<h3>Weather forecast</h3>
@if (forecasts == null)
{
<p>Loading...</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private IEnumerable<WeatherForecast>? forecasts;
protected override async Task OnInitializedAsync()
{
var client = new HttpClient();
forecasts = await client.GetFromJsonAsync<IEnumerable<WeatherForecast>>("https://localhost:5001/api/weather");
}
}
8. نتیجه
Blazor یک فریمورک قدرتمند برای توسعه وب‌سایت‌های واقعی با استفاده از C# و .NET است. با توجه به اینکه Backend و Frontend می‌توانند به طور همزمان توسعه یابند، توسعه‌دهندگان می‌توانند از همان مهارت‌ها و ابزارها برای هر دو بخش استفاده کنند.
طراحی وبسایت با Blazor بسیار جذاب و قدرتمند است. Blazor به شما این امکان را می‌دهد تا وب‌سایت‌های تک صفحه‌ای (Single Page Application - SPA) را با استفاده از C# و Razor بسازید. بسته به نیاز شما، می‌توانید از دو نوع Blazor استفاده کنید: Blazor Server و Blazor WebAssembly (WASM). هر کدام از این روش‌ها مزایا و معایب خود را دارند.
Blazor Server
Blazor Server کد شما را بر روی سرور اجرا می‌کند و از طریق SignalR رابط کاربری را به‌روزرسانی می‌کند. این روش برای برنامه‌هایی که نیاز به بارگذاری سریع دارند و می‌خواهند از مزایای پردازش سرور استفاده کنند، مناسب است.
مزایا:
-
بارگذاری سریع: برنامه‌های Blazor Server می‌توانند سریع‌تر بارگذاری شوند چون لازم نیست کل برنامه به مرورگر بارگذاری شود.
-
پشتیبانی از دستگاه‌های قدیمی: نیازی به WebAssembly در مرورگر نیست، بنابراین با مرورگرهای قدیمی‌تر و دستگاه‌های کم‌قدرت سازگارتر است.
-
استفاده از منابع سرور: می‌تواند از منابع سرور برای پردازش سنگین‌تر استفاده کند، به جای این که همه چیز روی مرورگر اجرا شود.
معایب:
-
اتصال دائم به سرور: نیاز به اتصال دائم به سرور دارد که ممکن است در شرایطی که اتصال شبکه ناپایدار است، مشکل ایجاد کند.
-
افزایش بار سرور: تمام منطق برنامه روی سرور اجرا می‌شود که ممکن است منجر به افزایش بار سرور شود.
Blazor WebAssembly (WASM)
Blazor WebAssembly کد شما را مستقیماً در مرورگر کاربر اجرا می‌کند. این روش برای برنامه‌هایی که می‌خواهند به صورت مستقل از سرور عمل کنند و تجربه کاربری غنی‌تری را ارائه دهند، مناسب است.
مزایا:
-
استقلال از سرور: برنامه‌های Blazor WebAssembly می‌توانند به صورت آفلاین کار کنند و نیازی به اتصال دائم به سرور ندارند.
-
کاهش بار سرور: تمام منطق برنامه در مرورگر اجرا می‌شود که بار سرور را کاهش می‌دهد.
-
تجربه کاربری بهتر: می‌تواند تجربه کاربری بهتری را ارائه دهد چون تمام پردازش‌ها در سمت کاربر انجام می‌شود.
معایب:
-
بارگذاری اولیه کندتر: برنامه باید کل کد WebAssembly را به مرورگر بارگذاری کند که می‌تواند زمان بارگذاری اولیه را افزایش دهد.
-
محدودیت منابع مرورگر: محدود به منابع مرورگر است و نمی‌تواند به منابع سرور دسترسی داشته باشد.
انتخاب بهترین روش
انتخاب بین Blazor Server و Blazor WebAssembly به نیازهای خاص پروژه شما بستگی دارد. اگر بارگذاری سریع و استفاده بهینه از منابع سرور برای شما مهم است، Blazor Server گزینه مناسبی است. اما اگر نیاز دارید که برنامه شما به صورت مستقل از سرور عمل کند و تجربه کاربری بهتری را ارائه دهد، Blazor WebAssembly گزینه مناسبی است.
نتیجه‌گیری
Blazor یک فریمورک قدرتمند برای توسعه وب‌سایت‌ها با استفاده از C# و .NET است. با توجه به نیازهای خاص پروژه خود، می‌توانید از Blazor Server یا Blazor WebAssembly استفاده کنید. هر دو روش مزایا و معایب خود را دارند و انتخاب بهترین روش به نیازهای شما بستگی دارد.
بزن بریم سراغ Blazor Web Application، یکی از جذاب‌ترین روش‌های توسعه وب اپلیکیشن با استفاده از .NET! Blazor به شما اجازه می‌دهد تا با استفاده از C# و Razor کامپوننت‌ها، وب اپلیکیشن‌هایی شبیه به SPA (Single Page Application) بسازید. بیایید با هم مرور کنیم:
Blazor WebAssembly و Blazor Server
Blazor به دو روش اصلی برای توسعه وب اپلیکیشن‌ها ارائه می‌شود:
-
Blazor WebAssembly (WASM): کد شما در مرورگر کاربر و با استفاده از WebAssembly اجرا می‌شود.
-
Blazor Server: کد شما در سرور اجرا می‌شود و از طریق SignalR به مرورگر ارتباط برقرار می‌کند.
ساختار پروژه Blazor
یک پروژه Blazor معمولاً شامل بخش‌های زیر است:
-
Pages: شامل صفحات اپلیکیشن.
-
Shared: شامل کامپوننت‌ها و منابع مشترک بین صفحات.
-
wwwroot: شامل فایل‌های استاتیک مانند CSS، تصاویر و JavaScript.
ایجاد یک پروژه Blazor WebAssembly
بیایید یک پروژه ساده Blazor WebAssembly ایجاد کنیم:
-
ایجاد پروژه:
-
ساختار پروژه:
- Pages
- Shared
- wwwroot
- Program.cs
- Startup.cs
- App.razor
مثال کد: نمایش لیست محصولات
قدم اول: ایجاد یک کامپوننت برای نمایش لیست محصولات در پوشه Pages.
Product.razor:
@page "/products"
<h3>Products</h3>
@if (products == null)
{
<p>Loading...</p>
}
else
{
<ul>
@foreach (var product in products)
{
<li>@product.Name - $@product.Price</li>
}
</ul>
}
@code {
private List<Product> products;
protected override async Task OnInitializedAsync()
{
// شبیه سازی درخواست به API
await Task.Delay(1000);
products = new List<Product>
{
new Product { Name = "Product 1", Price = 100 },
new Product { Name = "Product 2", Price = 200 }
};
}
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
}
}
قدم دوم: تنظیم NavMenu.razor برای نمایش لینک به صفحه محصولات.
NavMenu.razor:
<NavLink href="/" Match="NavLinkMatch.All">
Home
</NavLink>
<NavLink href="/products">
Products
</NavLink>
قدم سوم: اجرای پروژه و مشاهده نتیجه.
نتیجه‌گیری
Blazor WebAssembly یکی از قدرتمندترین روش‌های توسعه وب اپلیکیشن است که با استفاده از آن می‌توانید تجربه کاربری غنی و جذابی ایجاد کنید. با استفاده از C# و Razor، شما می‌توانید به سرعت اپلیکیشن‌های تحت وب مدرن و پویا ایجاد کنید. این تنها یک نمونه ساده بود. Blazor قابلیت‌های فراوانی دارد که می‌توانید با استفاده از آنها اپلیکیشن‌های پیشرفته‌تری ایجاد کنید.