C# 与前端开发结合：利用 Blazor 和 ASP.NET Core 构建前后端分离的动态页面

随着现代 web 开发的不断发展，前后端分离成为了流行的架构模式，它不仅使得前端和后端能够独立开发和部署，还带来了更高的灵活性和可维护性。在这一过程中，前端通常使用 JavaScript 或 TypeScript 编写动态页面，而后端则处理业务逻辑、数据库交互等。

在这篇文章中，我们将深入探讨如何使用 C# 来结合前端开发，重点介绍 Blazor 技术和 ASP.NET Core 的前后端分离开发方式，帮助开发者理解如何实现动态页面和交互式应用。

一、前后端分离的架构简介

前后端分离是一种将前端和后端功能解耦的架构模式。前端负责展示数据和与用户的交互，而后端负责处理业务逻辑和数据持久化。两者通过 API 进行通信，通常采用 RESTful API 或 GraphQL 等标准协议。

前后端分离的优点：

• 独立开发：前端和后端可以各自独立开发，使用不同的技术栈。
• 灵活性：前端可以选择不同的 UI 库和框架，后端则可以用最适合的语言和框架进行开发。
• 可扩展性：前后端分离使得开发和部署更为灵活，便于系统扩展和维护。

二、Blazor：C# 实现前端开发

Blazor 是 Microsoft 推出的一个前端框架，它允许开发者使用 C# 进行客户端开发。与传统的 JavaScript 前端框架（如 React、Vue）不同，Blazor 使用 C# 编写 UI 代码，并通过 WebAssembly 或 SignalR 技术与浏览器进行交互。Blazor 提供了两种主要模式：Blazor WebAssembly 和 Blazor Server。

2.1 Blazor WebAssembly

Blazor WebAssembly 是 Blazor 的一种模式，应用程序代码通过 WebAssembly 运行在客户端浏览器中。它允许 C# 代码直接在浏览器中执行，而无需依赖 JavaScript。

• 优点：C# 代码在客户端执行，减少了后端请求的次数，能够离线工作。
• 缺点：初次加载可能比较慢，性能上不如原生 JavaScript。

@page "/counter"

<h3>Counter</h3>

<p>Current count: @count</p>

<button @onclick="IncrementCount">Click me</button>

@code {
    private int count = 0;

    private void IncrementCount()
    {
        count++;
    }
}

在上述代码中，使用了 Blazor 的组件模型。@onclick 是事件绑定，@code 包裹了 C# 代码，这让开发者能够在一个文件中同时处理 UI 和业务逻辑。

2.2 Blazor Server

Blazor Server 模式将 UI 渲染和组件逻辑保留在服务器上，客户端与服务器之间通过 SignalR 进行实时通信。每次 UI 交互都通过 SignalR 向服务器发送请求，服务器处理后再更新 UI。

• 优点：首次加载非常快速，因为只有少量的 HTML 和 JavaScript 被发送到客户端，适用于需要实时更新的场景。
• 缺点：由于每次 UI 交互都需要与服务器通信，因此可能会有延迟，网络不稳定时会影响体验。

@page "/counter"

<h3>Counter</h3>

<p>Current count: @count</p>

<button @onclick="IncrementCount">Click me</button>

@code {
    private int count = 0;

    private void IncrementCount()
    {
        count++;
    }
}

Blazor Server 模式的代码与 WebAssembly 模式非常相似，唯一不同的是，UI 更新的逻辑由服务器控制，并通过实时连接同步到客户端。

2.3 Blazor 与前后端分离

Blazor 技术能够实现前后端的高度集成，但在前后端分离架构中，前端（Blazor）和后端（ASP.NET Core）通过 API 进行数据交换。后端通过 ASP.NET Core 提供 RESTful API，Blazor 前端通过 HTTP 请求获取数据，并更新 UI。

• Blazor WebAssembly 通过 HTTP 请求访问 API，并从后端获取数据。
• Blazor Server 通过 SignalR 与后端服务器通信，更新数据。

这种前后端分离的方式使得 Blazor 在现代 web 应用中具有很大的灵活性，可以与传统的 RESTful API 配合使用，也能够支持更复杂的实时交互。

三、ASP.NET Core 与前端技术结合

ASP.NET Core 是一个现代化的、跨平台的后端框架，广泛应用于构建高性能的 Web 应用和 API。它可以与前端 JavaScript/TypeScript 技术结合，实现动态页面和高效的前后端分离开发。

3.1 ASP.NET Core 提供 RESTful API

ASP.NET Core 提供了简便的方式来构建 RESTful API，前端可以通过 HTTP 请求（通常是 AJAX）来访问这些 API，获取数据并渲染到 UI 上。

1. 创建 API 控制器

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    private readonly ProductService _productService;

    public ProductsController(ProductService productService)
    {
        _productService = productService;
    }

    [HttpGet]
    public ActionResult<IEnumerable<Product>> Get()
    {
        return Ok(_productService.GetAllProducts());
    }

    [HttpGet("{id}")]
    public ActionResult<Product> Get(int id)
    {
        var product = _productService.GetProductById(id);
        if (product == null)
        {
            return NotFound();
        }
        return Ok(product);
    }
}

在上面的代码中，我们定义了一个 ProductsController 控制器，其中包含了两个 API 路由：一个用于获取所有产品，另一个用于根据 ID 获取特定产品。

1. 前端使用 JavaScript 或 TypeScript 请求 API

前端可以通过 JavaScript 或 TypeScript 使用 fetch 或 axios 来请求 API 并获取数据：

fetch('https://localhost:5001/api/products')
    .then(response => response.json())
    .then(data => {
        console.log(data); // 输出从 API 获取的数据
    })
    .catch(error => console.error('Error:', error));

3.2 结合 JavaScript 和 Blazor

在前后端分离的开发中，前端通常使用 JavaScript 或 TypeScript 来进行动态页面更新，而后端使用 ASP.NET Core 提供 API 接口。Blazor 允许将 C# 代码嵌入到页面中，同时还能够通过 JavaScript 来处理一些特定的前端逻辑。

Blazor 可以通过 IJSRuntime 与 JavaScript 进行交互。例如，Blazor 组件可以调用 JavaScript 函数，或者将 JavaScript 中的事件传递给 Blazor 组件。

@inject IJSRuntime JS

<button @onclick="CallJsFunction">Click me to call JS function</button>

@code {
    private async Task CallJsFunction()
    {
        await JS.InvokeVoidAsync("alert", "This is called from Blazor!");
    }
}

在上述代码中，我们通过 IJSRuntime 调用 JavaScript 的 alert 函数。这使得 Blazor 可以在必要时与 JavaScript 代码配合使用，增强前端交互性。

四、C# 和 TypeScript 的结合

在前后端分离开发中，TypeScript 是一个强类型的 JavaScript 超集，它为前端开发提供了更多的安全性和可维护性。使用 C# 与 TypeScript 的结合，可以实现更加灵活且高效的开发流程。

• TypeScript 和 ASP.NET Core 后端结合：后端可以通过 ASP.NET Core 提供 RESTful API，前端使用 TypeScript 编写代码，通过 HTTP 请求与后端交互。
• 共享模型：通过 Swagger 或 NSwag 等工具，可以生成 API 的类型定义文件，将 C# 的模型类与 TypeScript 的接口同步，减少了手动编写类型定义的工作。

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

在 TypeScript 中，你可以使用自动生成的接口来确保数据结构的一致性：

interface Product {
    id: number;
    name: string;
    price: number;
}

五、总结

通过使用 Blazor 和 ASP.NET Core，C# 开发者可以轻松地实现前后端分离的开发模式。Blazor 使得 C# 成为前端开发的强大工具，而 ASP.NET Core 提供了高效的 API 后端支持。前端可以通过 HTTP 请求与后端交互，使用 JavaScript 或 TypeScript 来处理动态页面，形成一个灵活的开发体系。

• Blazor WebAssembly 允许在浏览器中运行 C# 代码，适合需要前端渲染的应用。
• Blazor Server 通过 SignalR 与服务器实时通信，适合需要高实时性的应用。
• ASP.NET Core 提供高效的 API 支持，与前端进行数据交换。
• C# 与 TypeScript 结合使用，通过共享模型和接口定义，实现前后端数据结构的一致性。

这种前后端分离的开发方式不仅提高了开发效率，还能更好地组织和维护代码，帮助开发者构建现代化的 Web 应用。