10.3 Razor页面与Blazor

Razor页面简介

Razor页面是ASP.NET Core中用于构建简单页面应用的轻量级框架，它基于MVC模式但更加专注于页面开发。主要特点包括：

  • 页面为中心：每个页面包含.cshtml视图和.cshtml.cs代码分离文件
  • 简化路由：默认基于文件系统路径的路由（如/Products对应Products.cshtml）
  • 内置模型绑定：自动处理表单提交和数据验证

基础结构示例

// Pages/Product.cshtml.cs
public class ProductModel : PageModel
{
    [BindProperty]
    public Product CurrentProduct { get; set; }

    public void OnGet(int id) { /* 获取数据 */ }
    public IActionResult OnPost() { /* 提交处理 */ }
}

@* Pages/Product.cshtml *@
@page "{id:int}"
@model ProductModel

<form method="post">
    <input asp-for="CurrentProduct.Name" />
    <span asp-validation-for="CurrentProduct.Name"></span>
    <button type="submit">保存</button>
</form>

Blazor框架

Blazor是微软推出的Web前端框架，允许开发者使用C#代替JavaScript构建交互式Web UI。分为两种托管模式：

1. Blazor Server

  • 实时通信：通过SignalR保持与服务器的连接
  • 优点：快速启动，兼容旧浏览器
  • 缺点：依赖网络延迟，服务器负载较高

2. Blazor WebAssembly

  • 客户端执行：.NET运行时通过WebAssembly在浏览器中运行
  • 优点：真正的SPA体验，离线能力
  • 缺点：首次加载较慢，需要现代浏览器

组件开发示例

@* Counter.razor *@
<button @onclick="IncrementCount">点击计数: @currentCount</button>

@code {
    private int currentCount = 0;
    
    private void IncrementCount()
    {
        currentCount++;
    }
}

技术对比

特性Razor页面Blazor ServerBlazor WebAssembly
执行位置服务器服务器客户端
实时更新需要刷新自动同步自动更新
适合场景内容型网站企业内网应用公共Web应用
学习曲线低中中高

混合开发实践

现代项目常采用混合架构：

  1. 使用Razor页面构建内容为主的基础页面
  2. 通过Blazor组件增强交互性部分
  3. 通过JavaScript互操作调用现有JS库
// 调用JavaScript示例
await JSRuntime.InvokeVoidAsync("alert", "Blazor调用JS");

开发建议

  1. 性能优化：

    • Blazor Server：控制状态大小，使用虚拟化列表
    • WebAssembly：启用AOT编译，使用懒加载

  2. 状态管理：

    • 简单场景：组件参数和本地状态
    • 复杂应用：Fluxor等状态管理库

  3. 部署注意：

    • 配置正确的压缩（Brotli）
    • 设置服务端预渲染提升SEO

学习资源

  • 官方文档：Microsoft Learn上的Blazor教程
  • 社区项目：Awesome Blazor精选资源集合
  • 实战案例：使用Blazor重写现有管理后台
Last Updated::