public interface ICounterService
{
    int Increment(int currentValue);
    int Decrement(int currentValue);
    void Reset();
}

public class CounterService : ICounterService
{
    public int Increment(int currentValue)
    {
        return currentValue + 1;
    }
    
    public int Decrement(int currentValue)
    {
        return currentValue - 1;
    }
    
    public void Reset()
    {
        // 重(zhong)置邏輯
    }
}

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// 注冊服(fu)務(wu)
builder.Services.AddSingleton<ICounterService, CounterService>();
builder.Services.AddScoped<IUserService, UserService>();
builder.Services.AddTransient<IEmailService, EmailService>();

// 注冊內置服務
builder.Services.AddLocalStorage();
builder.Services.AddAuthorizationCore();

await builder.Build().RunAsync();

@page "/counter"
@inject ICounterService CounterService
 
<h3>Counter</h3>
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
    
    private void IncrementCount()
    {
        currentCount = CounterService.Increment(currentCount);
    }
}

@page "/user-profile"
@inject IUserService UserService
@inject NavigationManager Navigation

<h3>User Profile</h3>

@if (user != null)
{
    <div>
        <p>Name: @user.Name</p>
        <p>Email: @user.Email</p>
    </div>
}

@code {
    private User user;
    
    protected override async Task OnInitializedAsync()
    {
        user = await UserService.GetCurrentUserAsync();
    }
    
    private async Task UpdateProfile()
    {
        await UserService.UpdateUserAsync(user);
        Navigation.NavigateTo("/success");
    }
}

builder.Services.AddSingleton<ICounterService>(provider =>
{
    // 復雜的創建邏(luo)輯(ji)
    return new CounterService();
});

// 配置(zhi)選項類
public class ApiOptions
{
    public string BaseUrl { get; set; }
    public int TimeoutSeconds { get; set; }
}

// 注冊選項
builder.Services.Configure<ApiOptions>(options =>
{
    options.BaseUrl = "//api.example.com";
    options.TimeoutSeconds = 30;
});

// 在服務中(zhong)使用
public class ApiService
{
    private readonly ApiOptions _options;
    
    public ApiService(IOptions<ApiOptions> options)
    {
        _options = options.Value;
    }
}

#if DEBUG
builder.Services.AddSingleton<ILogger, DebugLogger>();
#else
builder.Services.AddSingleton<ILogger, ProductionLogger>();
#endif

@page "/counter"

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

<p>The counter value is @Counter</p>

<CounterComponent Counter="@currentCount" />

@code {
    private int currentCount = 0;
}

<h3>CounterComponent</h3>
<p>The counter value is @Counter</p>
<button @onclick="CounterChangedFromChild">Update Counter from Child</button>
@code {
    [Parameter]
    public int Counter { get; set; }
 
    [Parameter]
    public EventCallback<int> OnCounterChanged { get; set; }
 
    private async Task CounterChangedFromChild()
    {
        Counter++;
        await OnCounterChanged.InvokeAsync(Counter);    
    }
 
}

<CounterComponent OnCounterChanged="HandleCounterChanged" />

@code{
    private void HandleCounterChanged(int counter)
    {
        Console.WriteLine($"The counter value is {counter}");
    }
}

<!-- AppStateProvider.razor -->
<CascadingValue Value="this">
    @ChildContent
</CascadingValue>
 
@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
 
    private string theme = "light";
    public string Theme
    {
        get => theme;
        set
        {
            if (theme != value)
            {
                theme = value;
                StateHasChanged();
            }
        }
    }
 
    public event Action? OnThemeChanged;
 
    public void ToggleTheme()
    {
        Theme = Theme == "light" ? "dark" : "light";
        OnThemeChanged?.Invoke();
    }
}

<!-- ConsumerComponent.razor -->
<div class="@($"app-{appState.Theme}")">
    <h3>當前主題: @appState.Theme</h3>
    <button @onclick="appState.ToggleTheme">切換主題</button>
</div>
 
@code {
    [CascadingParameter]
    public AppStateProvider appState { get; set; } = default!;
 
    protected override void OnInitialized()
    {
        if (appState != null)
        {
            appState.OnThemeChanged += StateHasChanged;
        }
    }
 
    public void Dispose()
    {
        if (appState != null)
        {
            appState.OnThemeChanged -= StateHasChanged;
        }
    }
}

// Services/AppState.cs
public class AppState
{
    private int _counter;
    private string _userName = string.Empty;
 
    public int Counter
    {
        get => _counter;
        set
        {
            _counter = value;
            OnCounterChanged?.Invoke();
        }
    }
 
    public string UserName
    {
        get => _userName;
        set
        {
            _userName = value;
            OnUserNameChanged?.Invoke();
        }
    }
 
    public event Action? OnCounterChanged;
    public event Action? OnUserNameChanged;
 
    public void IncrementCounter()
    {
        Counter++;
    }
}

// Program.cs
builder.Services.AddScoped<AppState>();

@inject AppState AppState
@implements IDisposable
 
<h3>計數器: @AppState.Counter</h3>
<h4>用戶: @AppState.UserName</h4>
 
<button @onclick="AppState.IncrementCounter">增加計數</button>
<input @bind="localUserName" @bind:event="onchange" placeholder="輸入用戶名(ming)" />
 
@code {
    private string localUserName
    {
        get => AppState.UserName;
        set
        {
            AppState.UserName = value;
            // 可(ke)以在(zai)這里添加其他邏(luo)輯
        }
    }
 
    protected override void OnInitialized()
    {
        AppState.OnCounterChanged += StateHasChanged;
        AppState.OnUserNameChanged += StateHasChanged;
    }
 
    public void Dispose()
    {
        AppState.OnCounterChanged -= StateHasChanged;
        AppState.OnUserNameChanged -= StateHasChanged;
    }
}

Install-Package Fluxor.Blazor.Web

// Store/CounterState.cs
public record CounterState
{
    public int Count { get; init; }
}
 
// Store/Actions/IncrementCounterAction.cs
public record IncrementCounterAction;
 
// Store/Reducers/CounterReducers.cs
public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState OnIncrementCounter(CounterState state, IncrementCounterAction action)
    {
        return state with { Count = state.Count + 1 };
    }
}

@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
<h3>計數器: @State.Value.Count</h3>
<button @onclick="Increment">增加</button>
 
@code {
    [Inject]
    private IState<CounterState> State { get; set; } = null!;
 
    [Inject]
    private IDispatcher Dispatcher { get; set; } = null!;
 
    private void Increment()
    {
        Dispatcher.Dispatch(new IncrementCounterAction());
    }
}

@page "/counter2"
@inject IJSRuntime JSRuntime
 
<h3>持久化計數器: @count</h3>
<button @onclick="Increment">增加并保存</button>
 
@code {
    private int count = 0;
    private bool isInitialized = false;
 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadFromStorage();
            isInitialized = true;
            StateHasChanged(); // 確(que)保在加載后更新UI
        }
    }
 
    private async Task Increment()
    {
        count++;
        await SaveToStorage();
        //StateHasChanged();
    }
 
    private async Task SaveToStorage()
    {
        if (isInitialized)
        {
            await JSRuntime.InvokeVoidAsync("localStorage.setItem", "counter", count);
        }
    }
 
    private async Task LoadFromStorage()
    {
        try
        {
            var savedCount = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "counter");
            if (int.TryParse(savedCount, out int result))
            {
                count = result;
            }
        }
        catch (Exception ex)
        {
            // 處理預(yu)渲(xuan)染期間的 JS 互操作錯(cuo)誤
            Console.WriteLine($"加載存儲時出錯: {ex.Message}");
        }
    }
 
}

<!-- MyComponent.razor -->
<h3>計數器: @count</h3>
<button @onclick="Increment">增加</button>
 
@code {
    private int count = 0;
 
    public void Increment()
    {
        count++;
        StateHasChanged();
    }
 
    public void Reset()
    {
        count = 0;
        StateHasChanged();
    }
}

<!-- ParentComponent.razor -->
@page "/parent"
 
<MyComponent @ref="myComponentRef" />
<button @onclick="ResetChild">重置子組件</button>
 
@code {
    private MyComponent? myComponentRef;
 
    private void ResetChild()
    {
        myComponentRef?.Reset();
    }
}

@page "/element-ref"
 
<input @ref="usernameInput" placeholder="輸入用戶名" />
<button @onclick="FocusInput">聚焦輸入框</button>
 
@code {
    private ElementReference usernameInput;
 
    private async Task FocusInput()
    {
        await usernameInput.FocusAsync();
    }
}

@page "/loop-ref-example"
 
<h3>循環中使用 ref 示例</h3>
 
<button @onclick="ShowAllMessages" class="btn btn-primary">顯示所有消息</button>
<button @onclick="UpdateAllMessages" class="btn btn-secondary">更新所有消息</button>
 
@foreach (var item in items)
{
    <ChildComponent @ref="componentRefs[item.Id]"
                    Id="item.Id"
                    Message="@item.Message"
                    OnMessageChanged="HandleMessageChanged" />
}
 
@code {
    private List<ItemModel> items = new();
    private Dictionary<int, ChildComponent?> componentRefs = new();
 
    protected override void OnInitialized()
    {
        items = new List<ItemModel>
        {
            new ItemModel { Id = 1, Message = "第一條消(xiao)息" },
            new ItemModel { Id = 2, Message = "第(di)二條消息" },
            new ItemModel { Id = 3, Message = "第三(san)條(tiao)消息" }
        };
        // 預先初始化(hua)字(zi)典
        foreach (var item in items)
        {
            componentRefs[item.Id] = null;
        }
    }
 
    private void ShowAllMessages()
    {
        foreach (var component in componentRefs.Values)
        {
            component?.ShowCurrentMessage();
        }
    }
 
    private void UpdateAllMessages()
    {
        foreach (var item in items)
        {
            if (componentRefs.TryGetValue(item.Id, out var component) && component != null)
            {
                component.UpdateMessage($"更新后的消息(xi) {item.Id}");
            }
        }
    }
 
    private void HandleMessageChanged((int Id, string Message) data)
    {
        Console.WriteLine($"收到消息更新 - ID: {data.Id}, 消息: {data.Message}");
 
        var item = items.FirstOrDefault(i => i.Id == data.Id);
        if (item != null)
        {
            item.Message = data.Message;
            StateHasChanged();
        }
    }
 
    public class ItemModel
    {
        public int Id { get; set; }
        public string Message { get; set; } = string.Empty;
    }
}

<!-- ChildComponent.razor -->
<div class="child-component">
    <h5>子組件 ID: @Id</h5>
    <p>當前消息: <strong>@Message</strong></p>
    <input @bind="currentMessage" @bind:event="oninput" />
    <button @onclick="UpdateMessage" class="btn btn-sm btn-info">更新消息</button>
</div>
 
@code {
    [Parameter]
    public int Id { get; set; }
 
    [Parameter]
    public string Message { get; set; } = string.Empty;
 
    [Parameter]
    public EventCallback<(int Id, string Message)> OnMessageChanged { get; set; }
 
    private string currentMessage = string.Empty;
 
    protected override void OnParametersSet()
    {
        currentMessage = Message;
    }
 
    private async Task UpdateMessage()
    {
        await OnMessageChanged.InvokeAsync((Id, currentMessage));
    }
 
    public void ShowCurrentMessage()
    {
        Console.WriteLine($"組件 {Id} 的消(xiao)息: {Message}");
    }
 
    public void UpdateMessage(string newMessage)
    {
        currentMessage = newMessage;
        UpdateMessage().Wait();
    }
}

<CustomInput @ref="SetInputRef" />
 
@code {
    private CustomInput? inputRef;
 
    private void SetInputRef(CustomInput component)
    {
        inputRef = component;
        // 組件引(yin)用設置后的初(chu)始(shi)化邏輯
        component?.Initialize();
    }
}

@inject IJSRuntime JSRuntime
 
<div @ref="myDiv" style="width: 100px; height: 100px; background: red;"></div>
<button @onclick="ChangeDivStyle">修改樣式</button>
 
@code {
    private ElementReference myDiv;
 
    private async Task ChangeDivStyle()
    {
        await JSRuntime.InvokeVoidAsync("changeElementStyle", myDiv);
    }
}

// wwwroot/js/site.js
window.changeElementStyle = (element) => {
    element.style.background = 'blue';
    element.style.width = '200px';
};