从后端到前端，C# 全栈开发者的 Blazor 之路不仅是一次技术的跨越，更是对现有技能的一种延伸与融合。Blazor 作为一项新兴技术，使得使用 C# 和 .NET 开发 Web 应用变得更加便捷，同时也为那些习惯于后端开发的程序员提供了一条通往前端世界的桥梁。本文将通过代码示例的方式，介绍如何利用 Blazor 构建全栈 Web 应用，并展示如何在同一个项目中整合前后端逻辑。
首先，我们需要创建一个新的 Blazor WebAssembly 应用。打开 Visual Studio，创建一个名为 BlazorApp 的新项目，并选择 Blazor WebAssembly App (.NET Standard) 模板。
创建项目
dotnet new blazorwasm -n BlazorApp
cd BlazorApp
后端服务
在 BlazorApp.Server 项目中，我们将创建一个简单的 REST API 服务，用于处理来自前端的数据请求。
添加服务
在 Startup.cs 中，我们需要注册服务并配置路由。
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddRazorPages();
// 添加服务
services.AddSingleton<WeatherForecastService>();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
});
}
创建 API 控制器
接下来，我们创建一个 WeatherForecastController，用于提供天气预报数据。
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace BlazorApp.Server.Controllers
{
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
private readonly WeatherForecastService _weatherForecastService;
public WeatherForecastController(WeatherForecastService weatherForecastService)
{
_weatherForecastService = weatherForecastService;
}
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
return _weatherForecastService.GetForecast();
}
}
}
服务实现
创建一个简单的服务类来生成天气预报数据。
using System;
using System.Collections.Generic;
namespace BlazorApp.Server
{
public class WeatherForecastService
{
public IEnumerable<WeatherForecast> GetForecast()
{
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(Summaries.Length)]
})
.ToArray();
}
private string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
}
}
前端应用
在 BlazorApp.Client 项目中，我们将使用 Blazor 组件来展示天气预报数据，并通过 HTTP 请求从后端获取数据。
安装所需包
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Http
创建组件
在 Pages 文件夹下创建一个名为 Weather.razor 的组件。
@page "/weather"
@inject IHttpClientFactory HttpClientFactory
<h1>Weather Forecast</h1>
@if (_forecast is null)
{
<p>Loading...</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var item in _forecast)
{
<tr>
<td>@item.Date.ToShortDateString()</td>
<td>@item.TemperatureC.ToString("0")</td>
<td>@item.TemperatureF.ToString("0")</td>
<td>@item.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] _forecast;
protected override async Task OnInitializedAsync()
{
var httpClient = HttpClientFactory.CreateClient("api");
var response = await httpClient.GetAsync("/weatherforecast");
if (response.IsSuccessStatusCode)
{
_forecast = await response.Content.ReadFromJsonAsync<WeatherForecast[]>();
}
}
}
更新 Startup
确保在 BlazorApp.Client 的 Program.cs 中注册 HTTP 客户端。
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("api"));
总结
通过上述步骤，我们展示了如何利用 Blazor 构建一个全栈 Web 应用。从创建项目到实现前后端分离的服务架构，再到使用 Blazor 组件展示数据，每个环节都体现了 C# 全栈开发者如何利用 Blazor 技术来简化开发流程。希望本文提供的示例代码和技术指南能够帮助你在实际项目中更好地应用这些技术，实现从前端到后端的无缝衔接。
Blazor 不仅简化了 Web 应用的开发，还使得 C# 开发者能够在一个统一的环境中进行全栈开发，极大地提高了开发效率和代码一致性。
