如何将Blazor WebAssembly页面变量移至Data类并实现页面访问

1. 在Data目录创建状态类 #

首先在项目的Data目录下创建一个类（比如命名为CardGameState），把原来@code里的变量全部迁移进去，调整访问修饰符为public（确保Razor页面能访问到）并完成初始化：

namespace YourProjectName.Data; // 替换为你的项目实际命名空间
public class CardGameState
{
    // 三类卡牌列表
    public List<Card> KingCards = new List<Card>();
    public List<Card> QueenCards = new List<Card>();
    public List<Card> TressCards = new List<Card>();

    // 各类图形路径列表
    public List<string> KingGraphs = new List<string>();
    public List<string> QueenGraphs = new List<string>();
    public List<string> TressGraphs = new List<string>();
    public List<string> MinorPatterns = new List<string>() { "Cups", "Pentacles", "Swords", "Wands" };

    // 旋转角度选项
    public List<string> RotateDegrees = new List<string>() { "0deg", "180deg" };

    // 卡牌选中状态控制
    public bool KingChosen, QueenChosen, TressChosen = false;

    // 卡牌翻转状态
    public bool flipping = false;
}

2. 注册服务（用于组件间共享状态） #

如果需要在多个Blazor组件之间共享这些变量的状态，打开Program.cs，将这个类注册为Scoped服务（每个用户会话对应一个实例）：

builder.Services.AddScoped<CardGameState>();

如果仅单个组件使用，可跳过此步骤，直接在Razor页面实例化即可。

3. 在Razor页面中访问变量 #

方式一：依赖注入（推荐） #

在Razor页面顶部注入状态类：

@inject YourProjectName.Data.CardGameState GameState
@using YourProjectName.Data

之后在页面模板和@code段中，直接通过GameState访问变量：

<!-- 页面模板中使用示例 -->
@if (GameState.KingChosen)
{
    <p>国王牌已选中</p>
}

@code {
    // 代码段中使用示例
    private void ToggleFlip()
    {
        GameState.flipping = !GameState.flipping;
    }
}

方式二：直接实例化（单组件专用） #

若无需状态共享，可在Razor页面的@code段直接实例化状态类：

@using YourProjectName.Data

@code {
    private CardGameState GameState = new CardGameState();

    // 使用示例
    private void MarkQueenChosen()
    {
        GameState.QueenChosen = true;
    }
}

注意事项 #

• 确保Razor页面引用了正确的命名空间，否则无法找到状态类。
• 若需要状态变更后自动触发UI刷新，建议在状态类中实现INotifyPropertyChanged接口，或用ObservableCollection替代List（针对集合类型变量），让Blazor自动感知状态变化并重新渲染组件。

内容的提问来源于stack exchange，提问作者Hardy Wen