初心者向けC#でのBlazorアプリケーション開発ガイド

@code {
    private string message = "Hello, Blazor!";
}

<h3>@message</h3>
<button @onclick="ChangeMessage">Click me</button>

@code {
    private void ChangeMessage() {
        message = "You clicked the button!";
    }
}

@using YourProjectNamespace.Components

<YourComponentName />

@page "/single-binding"

@code {
    private string message = "Welcome to Blazor!";
}

<h3>@message</h3>

@page "/two-way-binding"

@code {
    private string name = "Blazor User";
}

<h3>Hello, @name!</h3>
<input @bind="name" />

@page "/binding-context"

@code {
    private User user = new User { Name = "Alice", Age = 30 };
}

<h3>@user.Name, @user.Age years old</h3>

@code {
    public class User {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

@page "/event-binding"

@code {
    private int counter = 0;

    private void IncrementCounter() {
        counter++;
    }
}

<h3>Current count: @counter</h3>
<button @onclick="IncrementCounter">Increment</button>

@page "/form"

@code {
    private User user = new User();
    private string message;

    private void HandleSubmit() {
        message = $"Hello, {user.Name}, you are {user.Age} years old.";
    }

    public class User {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

<h3>ユーザー情報の入力</h3>
<EditForm Model="@user" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label for="name">Name:</label>
        <InputText id="name" @bind-Value="user.Name" />
    </div>
    <div>
        <label for="age">Age:</label>
        <InputNumber id="age" @bind-Value="user.Age" />
    </div>
    <button type="submit">Submit</button>
</EditForm>

<p>@message</p>

public class User {
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Range(0, 120, ErrorMessage = "Age must be between 0 and 120")]
    public int Age { get; set; }
}

public class User {
    public string Name { get; set; }

    [CustomValidation(typeof(UserValidator), nameof(UserValidator.ValidateAge))]
    public int Age { get; set; }
}

public static class UserValidator {
    public static ValidationResult ValidateAge(int age, ValidationContext context) {
        if (age < 18) {
            return new ValidationResult("Age must be 18 or older");
        }
        return ValidationResult.Success;
    }
}

@code {
    private void HandleSubmit() {
        // フォーム送信時の処理
        message = $"Hello, {user.Name}, you are {user.Age} years old.";
    }
}

@page "/counter"

@code {
    private int currentCount = 0;

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

<h3>Current count: @currentCount</h3>
<button @onclick="IncrementCount">Increment</button>

public class AppState {
    public int Counter { get; set; }
    public event Action OnChange;

    public void IncrementCounter() {
        Counter++;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

// Program.cs または Startup.cs
builder.Services.AddSingleton<AppState>();

@page "/app-state"
@inject AppState AppState

@code {
    protected override void OnInitialized() {
        AppState.OnChange += StateHasChanged;
    }

    private void IncrementCounter() {
        AppState.IncrementCounter();
    }
}

<h3>Global count: @AppState.Counter</h3>
<button @onclick="IncrementCounter">Increment</button>

public class AppState {
    private readonly IJSRuntime _jsRuntime;

    public AppState(IJSRuntime jsRuntime) {
        _jsRuntime = jsRuntime;
        LoadState();
    }

    public int Counter { get; set; }
    public event Action OnChange;

    public async void IncrementCounter() {
        Counter++;
        await SaveState();
        NotifyStateChanged();
    }

    private async Task SaveState() {
        await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "appState", JsonSerializer.Serialize(this));
    }

    private async void LoadState() {
        var json = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "appState");
        if (!string.IsNullOrEmpty(json)) {
            var state = JsonSerializer.Deserialize<AppState>(json);
            Counter = state.Counter;
        }
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

// Program.cs または Startup.cs
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie();

@page "/login"
@inject NavigationManager Navigation
@code {
    private async Task HandleLogin() {
        var authProperties = new AuthenticationProperties { RedirectUri = Navigation.ToBaseRelativePath("/") };
        await AuthenticationService.SignInAsync("Cookies", new ClaimsPrincipal(), authProperties);
    }
}

<h3>ログイン</h3>
<button @onclick="HandleLogin">ログイン</button>

@page "/secure"
@attribute [Authorize]

<h3>Secure Page</h3>
<p>このページは認証されたユーザーのみがアクセスできます。</p>

@attribute [Authorize(Roles = "Admin")]

<h3>Admin Page</h3>
<p>このページは管理者のみがアクセスできます。</p>

// Program.cs または Startup.cs
builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("RequireAdmin", policy => policy.RequireRole("Admin"));
});

@attribute [Authorize(Policy = "RequireAdmin")]

<h3>Admin Page</h3>
<p>このページはカスタムポリシーに基づいてアクセスが制限されています。</p>

dotnet publish -c Release

@code {
    [Parameter]
    public string Task { get; set; }
    [Parameter]
    public EventCallback OnRemove { get; set; }

    private void Remove() {
        OnRemove.InvokeAsync();
    }
}

<li>
    @Task <button @onclick="Remove">Remove</button>
</li>

@page "/todolist"

@code {
    private List<string> tasks = new();
    private string newTask;

    private void AddTask() {
        if (!string.IsNullOrEmpty(newTask)) {
            tasks.Add(newTask);
            newTask = string.Empty;
        }
    }

    private void RemoveTask(string task) {
        tasks.Remove(task);
    }
}

<h3>ToDo List</h3>
<input @bind="newTask" placeholder="New task" />
<button @onclick="AddTask">Add</button>
<ul>
    @foreach (var task in tasks) {
        <ToDoItem Task="@task" OnRemove="@(() => RemoveTask(task))" />
    }
</ul>

builder.Services.AddSignalR();

app.MapHub<ChatHub>("/chathub");

public class ChatHub : Hub {
    public async Task SendMessage(string user, string message) {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

@page "/chat"
@inject NavigationManager Navigation
@code {
    private HubConnection hubConnection;
    private List<string> messages = new();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync() {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) => {
            messages.Add($"{user}: {message}");
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    private async Task SendMessage() {
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        messageInput = string.Empty;
    }

    public bool IsConnected => hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync() {
        await hubConnection.DisposeAsync();
    }
}

<h3>Chat</h3>
<p>
    <input @bind="userInput" placeholder="Name" />
    <input @bind="messageInput" placeholder="Message" />
    <button @onclick="SendMessage" disabled="@(IsConnected ? null : true)">Send</button>
</p>
<ul>
    @foreach (var message in messages) {
        <li>@message</li>
    }
</ul>