SKILL.md
$27
@code {
[Parameter]
public int Id { get; set; }
private User? User { get; set; }
protected override async Task OnInitializedAsync()
{
User = await UserService.GetUserAsync(Id);
}}
## Component Lifecycle
### Lifecycle Methods
- `OnInitialized`/`OnInitializedAsync`: Initial setup
- `OnParametersSet`/`OnParametersSetAsync`: When parameters change
- `OnAfterRender`/`OnAfterRenderAsync`: After DOM updates
- `Dispose`: Cleanup resources
### Best Practices
- Use `OnInitializedAsync` for data loading
- Check `firstRender` in `OnAfterRenderAsync`
- Dispose subscriptions and timers
- Avoid long-running synchronous code
## Data Binding
### One-Way Binding
<p>@message</p>
<input value="@inputValue" />
### Two-Way Binding
<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />
### Event Handling
<button @onclick="HandleClick">Click</button>
<button @onclick="() => HandleClickWithParam(id)">Click</button>
<button @onclick="HandleClickAsync">Async Click</button>
## Render Optimization
### Prevent Unnecessary Renders
- Use `@key` for list items
- Implement `ShouldRender()` when appropriate
- Use `StateHasChanged()` judiciously
- Avoid inline handlers in loops
### Virtualization
<Virtualize Items="@items" Context="item">
<ItemContent>
<div>@item.Name</div>
</ItemContent>
</Virtualize>
## State Management
### Component State
- Use private fields for component state
- Call `StateHasChanged()` when state changes externally
- Use `InvokeAsync` for thread-safe updates
### Cascading Parameters
<CascadingValue Value="@currentTheme">
<ChildComponent />
</CascadingValue>
<!-- In child component -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }
### State Containers
- Create injectable state services
- Use events for state change notifications
- Consider Fluxor for complex state management
## Blazor Server vs WebAssembly
### Blazor Server
- State lives on server
- Real-time connection via SignalR
- Faster initial load
- Requires stable connection
- Better for internal apps
### Blazor WebAssembly
- Runs entirely in browser
- Larger initial download
- Works offline (PWA capable)
- No server resources per user
- Better for public apps
## API Integration
### HTTP Client
@inject HttpClient Http
private async Task LoadData()
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
### Error Handling
try
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
errorMessage = "Failed to load users";
}
## Error Handling
### Error Boundaries
<ErrorBoundary>
<ChildContent>
<RiskyComponent />
</ChildContent>
<ErrorContent Context="ex">
<p>An error occurred: @ex.Message</p>
</ErrorContent>
</ErrorBoundary>
### Global Error Handling
- Implement `IErrorBoundary` for custom handling
- Log errors to server
- Show user-friendly messages
## Testing
### bUnit Testing
[Fact]
public void ComponentRendersCorrectly()
{
using var ctx = new TestContext();
var cut = ctx.RenderComponent<Counter>();
cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
cut.Find("button").Click();
cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}
## Authentication
### Setup
- Use `AuthenticationStateProvider`
- Use `AuthorizeView` for conditional UI
- Use `[Authorize]` attribute on pages
- Implement custom auth state provider for JWT
### AuthorizeView
<AuthorizeView>
<Authorized>
<p>Welcome, @context.User.Identity?.Name!</p>
</Authorized>
<NotAuthorized>
<p>Please log in.</p>
</NotAuthorized>
</AuthorizeView>