feat: Ingestion Pipeline Stabilization and WASM Service Proxies (#42)
This PR stabilizes the Nexus Ingestion Engine by implementing functional service proxies for the Blazor WASM client and refining the backend infrastructure for real-time progress tracking and database compatibility. ### Key Changes - **Infrastructure Stabilization**: - Implemented production-grade `EbookRepository` with PostgreSQL `EF.Functions.ILike` support. - Enforced `IsReadyForReading = false` state for newly added ebooks (resolves #35). - Updated `SignalRSyncBroadcaster` to support targeted user messaging and ingestion-specific progress updates (resolves #37). - **WASM Client Functional Proxies**: - Replaced "Throwing" dummy services with `WasmEbookRepository`, `WasmSyncBroadcaster`, `WasmBookStorageService`, and `WasmEmbeddingGenerator`. - These services proxy requests to the backend via a new set of Minimal API endpoints in `NexusReader.Web`. - **Domain Refinement**: - Added `IsReadyForReading` flag to the `Ebook` entity to manage background AI processing states. ### Related Issues - Fixes #35 - Fixes #36 - Fixes #37 --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #42 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #42.
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
---
|
||||
name: blazor-expert
|
||||
description: Comprehensive Blazor development expertise covering Blazor Server, WebAssembly, and Hybrid apps. Use when building Blazor components, implementing state management, handling routing, JavaScript interop, forms and validation, authentication, or optimizing Blazor applications. Includes best practices, architecture patterns, and troubleshooting guidance.
|
||||
version: 2.0
|
||||
---
|
||||
|
||||
# Blazor Expert - Orchestration Hub
|
||||
|
||||
Expert-level guidance for developing applications with Blazor, Microsoft's framework for building interactive web UIs using C# instead of JavaScript.
|
||||
|
||||
## Quick Reference: When to Load Which Resource
|
||||
|
||||
| Task | Load Resource | Key Topics |
|
||||
|------|---------------|-----------|
|
||||
| **Build components, handle lifecycle events** | [components-lifecycle.md](resources/components-lifecycle.md) | Component structure, lifecycle methods, parameters, cascading values, RenderFragment composition |
|
||||
| **Manage component state, handle events** | [state-management-events.md](resources/state-management-events.md) | Local state, EventCallback, data binding, cascading state, service-based state |
|
||||
| **Configure routes, navigate between pages** | [routing-navigation.md](resources/routing-navigation.md) | Route parameters, constraints, navigation, NavLink, query strings, layouts |
|
||||
| **Build forms, validate user input** | [forms-validation.md](resources/forms-validation.md) | EditForm, input components, DataAnnotations validation, custom validators |
|
||||
| **Setup authentication & authorization** | [authentication-authorization.md](resources/authentication-authorization.md) | Auth setup, AuthorizeView, Authorize attribute, policies, claims |
|
||||
| **Optimize performance, use JavaScript interop** | [performance-advanced.md](resources/performance-advanced.md) | Rendering optimization, virtualization, JS interop, lazy loading, WASM best practices |
|
||||
|
||||
## Orchestration Protocol
|
||||
|
||||
### Phase 1: Task Analysis
|
||||
|
||||
Identify your primary objective:
|
||||
|
||||
- **UI Building** → Load components-lifecycle.md
|
||||
- **State Handling** → Load state-management-events.md
|
||||
- **Navigation** → Load routing-navigation.md
|
||||
- **Data Input** → Load forms-validation.md
|
||||
- **User Access** → Load authentication-authorization.md
|
||||
- **Speed/Efficiency** → Load performance-advanced.md
|
||||
|
||||
### Phase 2: Resource Loading
|
||||
|
||||
Open the recommended resource file(s) and search for your specific need using Ctrl+F. Each resource is organized by topic with working code examples.
|
||||
|
||||
### Phase 3: Implementation & Validation
|
||||
|
||||
- Follow code patterns from the resource
|
||||
- Adapt to your specific requirements
|
||||
- Test in appropriate hosting model (Server/WASM/Hybrid)
|
||||
- Review troubleshooting section if issues arise
|
||||
|
||||
## Blazor Hosting Models Overview
|
||||
|
||||
### Blazor Server
|
||||
|
||||
- **How**: Runs on server via SignalR
|
||||
- **Best For**: Line-of-business apps, need full .NET runtime, small download size
|
||||
- **Trade-offs**: High latency, requires connection, server resource intensive
|
||||
|
||||
### Blazor WebAssembly
|
||||
|
||||
- **How**: Runs in browser via WebAssembly
|
||||
- **Best For**: PWAs, offline apps, no server dependency, client-heavy applications
|
||||
- **Trade-offs**: Large initial download, limited .NET APIs, slower cold start
|
||||
|
||||
### Blazor Hybrid
|
||||
|
||||
- **How**: Runs in MAUI/WPF/WinForms with Blazor UI
|
||||
- **Best For**: Cross-platform desktop/mobile apps
|
||||
- **Trade-offs**: Platform-specific considerations, additional dependencies
|
||||
|
||||
**Decision**: Choose based on deployment environment, offline requirements, and server constraints.
|
||||
|
||||
## Common Implementation Workflows
|
||||
|
||||
### Scenario 1: Build a Data-Entry Component
|
||||
|
||||
1. Read [components-lifecycle.md](resources/components-lifecycle.md) - Component structure section
|
||||
2. Read [state-management-events.md](resources/state-management-events.md) - EventCallback pattern
|
||||
3. Read [forms-validation.md](resources/forms-validation.md) - EditForm component
|
||||
4. Combine: Create component with parameters → capture user input → validate → notify parent
|
||||
|
||||
### Scenario 2: Implement User Authentication & Protected Pages
|
||||
|
||||
1. Read [authentication-authorization.md](resources/authentication-authorization.md) - Setup section
|
||||
2. Read [routing-navigation.md](resources/routing-navigation.md) - Layouts section
|
||||
3. Read [authentication-authorization.md](resources/authentication-authorization.md) - AuthorizeView section
|
||||
4. Combine: Configure auth → create login page → protect routes → check auth in components
|
||||
|
||||
### Scenario 3: Build Interactive List with Search/Filter
|
||||
|
||||
1. Read [routing-navigation.md](resources/routing-navigation.md) - Query strings section
|
||||
2. Read [state-management-events.md](resources/state-management-events.md) - Data binding section
|
||||
3. Read [performance-advanced.md](resources/performance-advanced.md) - Virtualization section
|
||||
4. Combine: Capture search input → update URL query → fetch filtered data → virtualize if large
|
||||
|
||||
### Scenario 4: Optimize Performance of Existing App
|
||||
|
||||
1. Read [performance-advanced.md](resources/performance-advanced.md) - All sections
|
||||
2. Identify bottlenecks:
|
||||
- Unnecessary renders? → ShouldRender override, @key directive
|
||||
- Large lists? → Virtualization
|
||||
- JS latency? → Module isolation pattern
|
||||
3. Apply targeted optimizations from resource
|
||||
|
||||
## Key Blazor Concepts
|
||||
|
||||
### Component Architecture
|
||||
|
||||
- **Components**: Self-contained UI units with optional logic
|
||||
- **Parameters**: Inputs to components, enable reusability
|
||||
- **Cascading Values**: Share state with descendants without explicit parameters
|
||||
- **Events**: Child-to-parent communication via EventCallback
|
||||
- **Layouts**: Parent wrapper for consistent page structure
|
||||
|
||||
### State Management
|
||||
|
||||
- **Local State**: Component-specific fields and properties
|
||||
- **Cascading Values**: Share state to descendants
|
||||
- **Services**: Application-wide state via dependency injection
|
||||
- **Event Binding**: React to user interactions
|
||||
- **Data Binding**: Two-way synchronization with UI
|
||||
|
||||
### Routing & Navigation
|
||||
|
||||
- **@page Directive**: Make component routable
|
||||
- **Route Parameters**: Pass data via URL (`{id:int}`)
|
||||
- **Navigation**: Programmatic navigation via NavigationManager
|
||||
- **NavLink**: UI component that highlights active route
|
||||
- **Layouts**: Wrap pages with common structure
|
||||
|
||||
### Forms & Validation
|
||||
|
||||
- **EditForm**: Form component with validation support
|
||||
- **Input Components**: Typed controls (InputText, InputNumber, etc.)
|
||||
- **Validators**: DataAnnotations attributes or custom logic
|
||||
- **EventCallback**: Notify parent of form changes
|
||||
- **Messages**: Display validation errors to user
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- **Claims & Roles**: Identify users and define access levels
|
||||
- **Policies**: Fine-grained authorization rules
|
||||
- **Authorize Attribute**: Protect pages from unauthorized access
|
||||
- **AuthorizeView**: Conditional rendering based on permissions
|
||||
- **AuthenticationStateProvider**: Get current user information
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
- **ShouldRender()**: Prevent unnecessary re-renders
|
||||
- **@key Directive**: Help diffing algorithm match list items
|
||||
- **Virtualization**: Render only visible items in large lists
|
||||
- **JS Interop**: Call JavaScript from C# and vice versa
|
||||
- **AOT/Trimming**: Reduce WASM download size (production)
|
||||
|
||||
## Best Practices Highlights
|
||||
|
||||
### Component Design
|
||||
|
||||
✅ **Single Responsibility** - Each component has one clear purpose
|
||||
✅ **Composition** - Use RenderFragments for flexible layouts
|
||||
✅ **Parameter Clarity** - Use descriptive names, mark required with `[EditorRequired]`
|
||||
✅ **Proper Disposal** - Implement `IDisposable` to clean up resources
|
||||
✅ **Event-Based Communication** - Use `EventCallback` for child-to-parent updates
|
||||
|
||||
### State Management
|
||||
|
||||
✅ **EventCallback Over Action** - Proper async handling
|
||||
✅ **Immutable Updates** - Create new objects/collections, don't mutate
|
||||
✅ **Service-Based State** - Use scoped services for shared state
|
||||
✅ **Unsubscribe from Events** - Prevent memory leaks in Dispose
|
||||
✅ **InvokeAsync for Background Threads** - Thread-safe state updates
|
||||
|
||||
### Routing & Navigation
|
||||
|
||||
✅ **Route Constraints** - Use `:int`, `:guid`, etc. to validate formats
|
||||
✅ **NavLink Component** - Automatic active state highlighting
|
||||
✅ **forceLoad After Logout** - Clear client-side state
|
||||
✅ **ReturnUrl Pattern** - Redirect back after login
|
||||
✅ **Query Strings** - Preserve filters/pagination across navigation
|
||||
|
||||
### Forms & Validation
|
||||
|
||||
✅ **EditForm + DataAnnotationsValidator** - Built-in validation
|
||||
✅ **ValidationMessage** - Show field-level errors
|
||||
✅ **Custom Validators** - Extend for complex rules
|
||||
✅ **Async Validation** - Check server availability before submit
|
||||
✅ **Loading State** - Disable submit button while processing
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
✅ **Server Validation** - Never trust client-side checks alone
|
||||
✅ **Policies Over Roles** - More flexible authorization rules
|
||||
✅ **Claims for Details** - Store user attributes in claims
|
||||
✅ **Cascading AuthenticationState** - Available in all components
|
||||
✅ **Error Boundaries** - Graceful error handling
|
||||
|
||||
### Performance
|
||||
|
||||
✅ **@key on Lists** - Optimize item matching
|
||||
✅ **ShouldRender Override** - Prevent unnecessary renders
|
||||
✅ **Virtualization for Large Lists** - Only render visible items
|
||||
✅ **JS Module Isolation** - Load and cache JS modules efficiently
|
||||
✅ **AOT for WASM** - Production deployments
|
||||
|
||||
## Common Troubleshooting
|
||||
|
||||
### Component Not Re-rendering
|
||||
|
||||
- **Cause**: Mutation instead of reassignment
|
||||
- **Fix**: Create new object/collection: `items = items.Append(item).ToList()`
|
||||
- **Or**: Call `StateHasChanged()` manually
|
||||
|
||||
### Parameter Not Updating
|
||||
|
||||
- **Cause**: Parent not re-rendering or same object reference
|
||||
- **Fix**: Parent must re-render, ensure new reference for objects
|
||||
- **Debug**: Check OnParametersSet is firing
|
||||
|
||||
### JS Interop Errors
|
||||
|
||||
- **Cause**: Called before script loaded or wrong function name
|
||||
- **Fix**: Use `firstRender` check, verify JS file path
|
||||
- **Pattern**: Use module isolation: `await JS.InvokeAsync("import", "./script.js")`
|
||||
|
||||
### Authentication State Not Available
|
||||
|
||||
- **Cause**: Cascading parameter not provided or timing issue
|
||||
- **Fix**: Ensure AuthenticationStateProvider configured
|
||||
- **Pattern**: Always null-check and use `await AuthStateTask!` in code block
|
||||
|
||||
### Large List Performance Issues
|
||||
|
||||
- **Cause**: Rendering all items in DOM
|
||||
- **Fix**: Use Virtualize component for 1000+ items
|
||||
- **Alternative**: Paginate with buttons/infinite scroll
|
||||
|
||||
### Blazor Server Connection Issues
|
||||
|
||||
- **Cause**: SignalR connection dropped or configuration issue
|
||||
- **Fix**: Implement reconnection UI, increase timeout
|
||||
- **Config**: Adjust `CircuitOptions.DisconnectedCircuitRetentionPeriod`
|
||||
|
||||
## Resource Files Summary
|
||||
|
||||
### components-lifecycle.md
|
||||
|
||||
Complete guide to component structure, lifecycle methods, parameters, cascading values, and composition patterns. Essential for understanding Blazor component fundamentals.
|
||||
|
||||
### state-management-events.md
|
||||
|
||||
Comprehensive coverage of local and service-based state, event handling with EventCallback, data binding patterns, and component communication. Core for interactive UI building.
|
||||
|
||||
### routing-navigation.md
|
||||
|
||||
Complete routing reference including route parameters, constraints, programmatic navigation, query strings, and layout management. Essential for multi-page apps.
|
||||
|
||||
### forms-validation.md
|
||||
|
||||
Full forms API with EditForm component, input controls, DataAnnotations validation, custom validators, and form patterns. Required for data entry scenarios.
|
||||
|
||||
### authentication-authorization.md
|
||||
|
||||
Complete auth setup for Server and WASM, AuthorizeView, policies, claims-based access control, and login/logout patterns. Necessary for secured applications.
|
||||
|
||||
### performance-advanced.md
|
||||
|
||||
Performance optimization techniques including ShouldRender, virtualization, JavaScript interop patterns, lazy loading, and WASM best practices. Vital for production apps.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Approach
|
||||
|
||||
When implementing Blazor features:
|
||||
|
||||
1. **Identify Your Task** - Match against the decision table above
|
||||
2. **Load Relevant Resource** - Read the appropriate .md file
|
||||
3. **Find Code Example** - Search resource for similar implementation
|
||||
4. **Adapt to Your Context** - Modify for your specific requirements
|
||||
5. **Test Thoroughly** - Verify in your hosting model
|
||||
6. **Reference Troubleshooting** - Consult resource if issues arise
|
||||
|
||||
## Next Steps
|
||||
|
||||
- **New to Blazor?** Start with [components-lifecycle.md](resources/components-lifecycle.md)
|
||||
- **Building Data App?** Move through: components → state → forms → validation
|
||||
- **Scaling Existing App?** Focus on [performance-advanced.md](resources/performance-advanced.md)
|
||||
- **Adding Security?** Follow [authentication-authorization.md](resources/authentication-authorization.md)
|
||||
|
||||
---
|
||||
|
||||
**Version**: 2.0 - Modular Orchestration Pattern
|
||||
**Last Updated**: December 4, 2025
|
||||
**Status**: Production Ready ✅
|
||||
@@ -0,0 +1,533 @@
|
||||
# Blazor Authentication & Authorization
|
||||
|
||||
## Authentication Setup
|
||||
|
||||
### Blazor Server Setup
|
||||
|
||||
```csharp
|
||||
// Program.cs
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add authentication
|
||||
builder.Services
|
||||
.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
|
||||
.AddCookie(options =>
|
||||
{
|
||||
options.LoginPath = "/login";
|
||||
options.LogoutPath = "/logout";
|
||||
options.AccessDeniedPath = "/unauthorized";
|
||||
});
|
||||
|
||||
builder.Services.AddAuthorizationCore();
|
||||
|
||||
// Add Blazor Server
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
// Add authentication middleware BEFORE MapRazorPages
|
||||
app.UseRouting();
|
||||
app.UseAuthentication();
|
||||
app.UseAuthorization();
|
||||
|
||||
app.MapRazorPages();
|
||||
app.MapBlazorHub();
|
||||
```
|
||||
|
||||
### Blazor WebAssembly Setup
|
||||
|
||||
```csharp
|
||||
// Program.cs
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
|
||||
// Add authentication
|
||||
builder.Services.AddAuthorizationCore();
|
||||
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
|
||||
builder.Services.AddScoped<HttpClient>(sp =>
|
||||
new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
|
||||
// CustomAuthStateProvider
|
||||
public class CustomAuthStateProvider : AuthenticationStateProvider
|
||||
{
|
||||
private readonly HttpClient httpClient;
|
||||
|
||||
public CustomAuthStateProvider(HttpClient httpClient)
|
||||
{
|
||||
this.httpClient = httpClient;
|
||||
}
|
||||
|
||||
public override async Task<AuthenticationState> GetAuthenticationStateAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var user = await httpClient.GetJsonAsync<UserInfo>("/api/user");
|
||||
|
||||
var claims = new[]
|
||||
{
|
||||
new Claim(ClaimTypes.NameIdentifier, user.Id),
|
||||
new Claim(ClaimTypes.Name, user.Name),
|
||||
new Claim(ClaimTypes.Email, user.Email)
|
||||
};
|
||||
|
||||
var identity = new ClaimsIdentity(claims, "Custom");
|
||||
return new AuthenticationState(new ClaimsPrincipal(identity));
|
||||
}
|
||||
catch
|
||||
{
|
||||
return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## AuthorizeView Component
|
||||
|
||||
AuthorizeView displays content conditionally based on authorization status.
|
||||
|
||||
### Basic Authorization Check
|
||||
|
||||
```html
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<p>Hello, @context.User.Identity?.Name!</p>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<p>Please log in.</p>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
```
|
||||
|
||||
### Authorize by Role
|
||||
|
||||
```html
|
||||
<AuthorizeView Roles="Admin">
|
||||
<p>This content is only for Admins</p>
|
||||
</AuthorizeView>
|
||||
|
||||
<AuthorizeView Roles="User, Moderator">
|
||||
<p>User or Moderator content</p>
|
||||
</AuthorizeView>
|
||||
```
|
||||
|
||||
### Authorize by Policy
|
||||
|
||||
```html
|
||||
<AuthorizeView Policy="ContentEditor">
|
||||
<p>Only content editors can see this</p>
|
||||
</AuthorizeView>
|
||||
```
|
||||
|
||||
### Multiple AuthorizeView States
|
||||
|
||||
```html
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
@if (context.User.IsInRole("Admin"))
|
||||
{
|
||||
<p>Admin dashboard</p>
|
||||
}
|
||||
else if (context.User.IsInRole("Editor"))
|
||||
{
|
||||
<p>Editor dashboard</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>User dashboard</p>
|
||||
}
|
||||
</Authorized>
|
||||
<Authorizing>
|
||||
<p>Checking authorization...</p>
|
||||
</Authorizing>
|
||||
<NotAuthorized>
|
||||
<p>Not authorized</p>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
```
|
||||
|
||||
### Authorize Multiple Resources
|
||||
|
||||
```html
|
||||
<AuthorizeView Context="Auth">
|
||||
<Authorized>
|
||||
<div>
|
||||
<h2>@Auth.User.Identity?.Name</h2>
|
||||
|
||||
@if (Auth.User.IsInRole("Admin"))
|
||||
{
|
||||
<a href="/admin">Admin Panel</a>
|
||||
}
|
||||
|
||||
@if (Auth.User.HasClaim("department", "engineering"))
|
||||
{
|
||||
<a href="/engineering">Engineering</a>
|
||||
}
|
||||
</div>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
```
|
||||
|
||||
## Authorize Attribute
|
||||
|
||||
Apply `[Authorize]` to pages to require authentication.
|
||||
|
||||
### Basic Page Authorization
|
||||
|
||||
```csharp
|
||||
@page "/admin"
|
||||
@attribute [Authorize]
|
||||
|
||||
<h2>Admin Page</h2>
|
||||
<p>Only authenticated users can see this.</p>
|
||||
```
|
||||
|
||||
### Role-Based Authorization
|
||||
|
||||
```csharp
|
||||
@page "/admin"
|
||||
@attribute [Authorize(Roles = "Admin")]
|
||||
|
||||
<h2>Admin Panel</h2>
|
||||
<p>Only admins can access this page.</p>
|
||||
```
|
||||
|
||||
### Policy-Based Authorization
|
||||
|
||||
```csharp
|
||||
@page "/dashboard"
|
||||
@attribute [Authorize(Policy = "RequireAdminRole")]
|
||||
|
||||
<h2>Dashboard</h2>
|
||||
```
|
||||
|
||||
### Multiple Requirements
|
||||
|
||||
```csharp
|
||||
@page "/admin"
|
||||
@attribute [Authorize(Roles = "Admin, Manager")]
|
||||
@attribute [Authorize(Policy = "ActiveSubscription")]
|
||||
|
||||
<h2>Admin Dashboard</h2>
|
||||
```
|
||||
|
||||
## Authorization Policies
|
||||
|
||||
Define fine-grained authorization policies.
|
||||
|
||||
### Setup Policies
|
||||
|
||||
```csharp
|
||||
// Program.cs
|
||||
builder.Services.AddAuthorizationCore(options =>
|
||||
{
|
||||
options.AddPolicy("RequireAdminRole", policy =>
|
||||
policy.RequireRole("Admin"));
|
||||
|
||||
options.AddPolicy("ActiveSubscription", policy =>
|
||||
policy.Requirements.Add(new ActiveSubscriptionRequirement()));
|
||||
|
||||
options.AddPolicy("ContentEditor", policy =>
|
||||
policy.RequireClaim("department", "engineering", "content"));
|
||||
|
||||
options.AddPolicy("AdultUser", policy =>
|
||||
policy.Requirements.Add(new MinimumAgeRequirement(18)));
|
||||
});
|
||||
|
||||
// Add custom policy handler
|
||||
builder.Services.AddSingleton<IAuthorizationHandler, ActiveSubscriptionHandler>();
|
||||
```
|
||||
|
||||
### Custom Policy Handlers
|
||||
|
||||
```csharp
|
||||
public class ActiveSubscriptionRequirement : IAuthorizationRequirement { }
|
||||
|
||||
public class ActiveSubscriptionHandler : AuthorizationHandler<ActiveSubscriptionRequirement>
|
||||
{
|
||||
private readonly IUserService userService;
|
||||
|
||||
public ActiveSubscriptionHandler(IUserService userService)
|
||||
{
|
||||
this.userService = userService;
|
||||
}
|
||||
|
||||
protected override async Task HandleRequirementAsync(
|
||||
AuthorizationHandlerContext context,
|
||||
ActiveSubscriptionRequirement requirement)
|
||||
{
|
||||
var userId = context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
|
||||
|
||||
if (string.IsNullOrEmpty(userId))
|
||||
{
|
||||
context.Fail();
|
||||
return;
|
||||
}
|
||||
|
||||
var user = await userService.GetUserAsync(userId);
|
||||
|
||||
if (user?.SubscriptionActive == true)
|
||||
{
|
||||
context.Succeed(requirement);
|
||||
}
|
||||
else
|
||||
{
|
||||
context.Fail();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public class MinimumAgeRequirement : IAuthorizationRequirement
|
||||
{
|
||||
public int MinimumAge { get; set; }
|
||||
|
||||
public MinimumAgeRequirement(int minimumAge)
|
||||
{
|
||||
MinimumAge = minimumAge;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Accessing Authentication State
|
||||
|
||||
### In Components
|
||||
|
||||
```csharp
|
||||
@page "/user-profile"
|
||||
|
||||
@if (authState == null)
|
||||
{
|
||||
<p>Loading...</p>
|
||||
}
|
||||
else if (authState.User.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
<h2>Welcome, @authState.User.Identity?.Name</h2>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>Not authenticated</p>
|
||||
}
|
||||
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
private Task<AuthenticationState>? AuthStateTask { get; set; }
|
||||
|
||||
private AuthenticationState? authState;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
authState = await AuthStateTask!;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Check Claims and Roles
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
private async Task CheckUserAsync()
|
||||
{
|
||||
var authState = await AuthStateTask!;
|
||||
var user = authState.User;
|
||||
|
||||
if (user.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
var name = user.Identity.Name;
|
||||
var email = user.FindFirst(ClaimTypes.Email)?.Value;
|
||||
var isAdmin = user.IsInRole("Admin");
|
||||
var department = user.FindFirst("department")?.Value;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Login/Logout Implementation
|
||||
|
||||
### Login Page
|
||||
|
||||
```csharp
|
||||
@page "/login"
|
||||
@layout BlankLayout
|
||||
|
||||
<div class="login-form">
|
||||
<h2>Login</h2>
|
||||
|
||||
@if (!string.IsNullOrEmpty(errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger">@errorMessage</div>
|
||||
}
|
||||
|
||||
<EditForm Model="@model" OnValidSubmit="@HandleLoginAsync">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="form-group">
|
||||
<label>Email:</label>
|
||||
<InputText @bind-Value="model.Email" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password:</label>
|
||||
<InputText @bind-Value="model.Password" type="password" class="form-control" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[SupplyParameterFromQuery]
|
||||
public string? ReturnUrl { get; set; }
|
||||
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
private LoginModel model = new();
|
||||
private string? errorMessage;
|
||||
|
||||
private async Task HandleLoginAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var result = await AuthService.LoginAsync(model.Email, model.Password);
|
||||
|
||||
// Update authentication state
|
||||
if (AuthStateProvider is CustomAuthStateProvider customAuth)
|
||||
{
|
||||
await customAuth.SetUserAsync(result.User);
|
||||
}
|
||||
|
||||
// Redirect to return URL or home
|
||||
var url = !string.IsNullOrEmpty(ReturnUrl) ? ReturnUrl : "/";
|
||||
Navigation.NavigateTo(url, forceLoad: true);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
errorMessage = ex.Message;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public class LoginModel
|
||||
{
|
||||
[Required]
|
||||
[EmailAddress]
|
||||
public string Email { get; set; } = "";
|
||||
|
||||
[Required]
|
||||
public string Password { get; set; } = "";
|
||||
}
|
||||
```
|
||||
|
||||
### Logout Endpoint
|
||||
|
||||
```csharp
|
||||
// Pages/Logout.cshtml (in Blazor Server)
|
||||
@page "/logout"
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@inject SignInManager<IdentityUser> SignInManager
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
@code {
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await SignInManager.SignOutAsync();
|
||||
Navigation.NavigateTo("/");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Claims-Based Authorization
|
||||
|
||||
Working with claims for fine-grained authorization.
|
||||
|
||||
### Add Claims to User
|
||||
|
||||
```csharp
|
||||
var claims = new List<Claim>
|
||||
{
|
||||
new Claim(ClaimTypes.NameIdentifier, user.Id),
|
||||
new Claim(ClaimTypes.Name, user.Name),
|
||||
new Claim(ClaimTypes.Email, user.Email),
|
||||
new Claim("department", "engineering"),
|
||||
new Claim("level", "senior")
|
||||
};
|
||||
|
||||
var identity = new ClaimsIdentity(claims, "Custom");
|
||||
var principal = new ClaimsPrincipal(identity);
|
||||
```
|
||||
|
||||
### Check Claims in Component
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
private async Task CheckDepartmentAsync()
|
||||
{
|
||||
var authState = await AuthStateTask!;
|
||||
var user = authState.User;
|
||||
|
||||
var department = user.FindFirst("department")?.Value;
|
||||
var level = user.FindFirst("level")?.Value;
|
||||
|
||||
if (department == "engineering")
|
||||
{
|
||||
// Show engineering-specific UI
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Use Cascading AuthenticationState
|
||||
|
||||
```csharp
|
||||
// App.razor - already cascades AuthenticationState by default
|
||||
<CascadingAuthenticationState>
|
||||
<Router ... />
|
||||
</CascadingAuthenticationState>
|
||||
```
|
||||
|
||||
### Always Check firstRender in OnAfterRender
|
||||
|
||||
```csharp
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
// Initialize only once
|
||||
authState = await AuthStateTask!;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Use forceLoad for Logout
|
||||
|
||||
```csharp
|
||||
private async Task LogoutAsync()
|
||||
{
|
||||
await AuthService.LogoutAsync();
|
||||
// forceLoad clears client-side state
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
}
|
||||
```
|
||||
|
||||
### Validate on Server
|
||||
|
||||
- Never trust client-side authorization
|
||||
- Always validate authorization on backend API
|
||||
- Check claims/roles on server methods
|
||||
|
||||
### Use ReturnUrl After Login
|
||||
|
||||
```csharp
|
||||
// Redirect back to originally-requested page
|
||||
Navigation.NavigateTo($"/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [routing-navigation.md](routing-navigation.md) for route-based authorization. See [components-lifecycle.md](components-lifecycle.md) for parameter security.
|
||||
@@ -0,0 +1,550 @@
|
||||
# Blazor Components & Component Lifecycle
|
||||
|
||||
## Component Structure
|
||||
|
||||
Components are the fundamental building blocks of Blazor applications. A Blazor component is a self-contained piece of UI with an optional logic.
|
||||
|
||||
### Basic Component Syntax
|
||||
|
||||
```csharp
|
||||
@page "/example"
|
||||
@using MyApp.Services
|
||||
@inject IMyService MyService
|
||||
|
||||
<h3>@Title</h3>
|
||||
<div>@ChildContent</div>
|
||||
<button @onclick="HandleClick">Click me</button>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string Title { get; set; } = "Default";
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
private void HandleClick()
|
||||
{
|
||||
// Handle button click
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Key elements:
|
||||
|
||||
- **`@page` directive**: Makes component routable (optional for non-page components)
|
||||
- **`@using`**: Import namespaces
|
||||
- **`@inject`**: Dependency injection
|
||||
- **HTML markup**: Regular HTML with Blazor directives
|
||||
- **`@code` block**: C# logic including lifecycle methods
|
||||
|
||||
### Component vs Page
|
||||
|
||||
- **Page Component**: Has `@page` directive, routable via URL
|
||||
- Example: `/Counter` route
|
||||
- Located in `Pages/` folder (convention)
|
||||
|
||||
- **Reusable Component**: No `@page` directive, used by other components
|
||||
- Example: `<UserCard @bind-User="user" />`
|
||||
- Located in `Shared/` or domain-specific folder
|
||||
|
||||
## Component Lifecycle
|
||||
|
||||
### Lifecycle Sequence
|
||||
|
||||
Component lifecycle methods execute in this order:
|
||||
|
||||
```
|
||||
1. SetParametersAsync()
|
||||
↓
|
||||
2. OnInitialized() or OnInitializedAsync()
|
||||
↓
|
||||
3. OnParametersSet() or OnParametersSetAsync()
|
||||
↓
|
||||
4. ShouldRender() [decision point - skip if returns false]
|
||||
↓
|
||||
5. OnAfterRender() or OnAfterRenderAsync()
|
||||
```
|
||||
|
||||
When parameters change (parent re-renders):
|
||||
|
||||
```
|
||||
SetParametersAsync() [parameters updated]
|
||||
↓
|
||||
OnParametersSet() [NOT OnInitialized - that runs once only]
|
||||
↓
|
||||
ShouldRender()
|
||||
↓
|
||||
OnAfterRender()
|
||||
```
|
||||
|
||||
### Lifecycle Methods Detailed
|
||||
|
||||
#### SetParametersAsync()
|
||||
|
||||
- **When**: First method called, before initialization
|
||||
- **Purpose**: Set component parameters
|
||||
- **Usage**: Rarely overridden, use OnInitialized instead
|
||||
- **Code Example**:
|
||||
|
||||
```csharp
|
||||
public override async Task SetParametersAsync(ParameterView parameters)
|
||||
{
|
||||
// Custom parameter processing if needed
|
||||
await base.SetParametersAsync(parameters);
|
||||
}
|
||||
```
|
||||
|
||||
#### OnInitialized / OnInitializedAsync()
|
||||
|
||||
- **When**: Once per component lifetime, after parameters set
|
||||
- **Purpose**: Initialize component state, load data
|
||||
- **Runs**: Only ONCE, even if parameters change
|
||||
- **Code Example**:
|
||||
|
||||
```csharp
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
data = await Service.LoadDataAsync();
|
||||
}
|
||||
```
|
||||
|
||||
**Common Uses:**
|
||||
|
||||
- Load initial data from API
|
||||
- Set up subscriptions
|
||||
- Initialize state based on parameters
|
||||
|
||||
#### OnParametersSet / OnParametersSetAsync()
|
||||
|
||||
- **When**: After parameters set, runs EVERY time parameters change
|
||||
- **Purpose**: React to parameter changes
|
||||
- **Runs**: Every time parent re-renders with different values
|
||||
- **Code Example**:
|
||||
|
||||
```csharp
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
await base.OnParametersSetAsync();
|
||||
if (UserId != previousUserId)
|
||||
{
|
||||
data = await Service.LoadUserDataAsync(UserId);
|
||||
previousUserId = UserId;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Common Uses:**
|
||||
|
||||
- Update UI based on new parameter values
|
||||
- Fetch new data when ID parameter changes
|
||||
- React to cascading parameter changes
|
||||
|
||||
#### ShouldRender()
|
||||
|
||||
- **When**: Before DOM rendering, decision point
|
||||
- **Purpose**: Optimize rendering by skipping unnecessary renders
|
||||
- **Returns**: true (render) or false (skip)
|
||||
- **Code Example**:
|
||||
|
||||
```csharp
|
||||
protected override bool ShouldRender()
|
||||
{
|
||||
// Only render if specific field changed
|
||||
return hasChanged;
|
||||
}
|
||||
```
|
||||
|
||||
**Common Optimizations:**
|
||||
|
||||
- Skip render if data unchanged
|
||||
- Prevent re-render from external events
|
||||
- Implement custom change detection
|
||||
|
||||
#### OnAfterRender / OnAfterRenderAsync()
|
||||
|
||||
- **When**: After component rendered to DOM
|
||||
- **Purpose**: Work with DOM, initialize JS libraries, final setup
|
||||
- **Parameter**: `firstRender` - true only on first render
|
||||
- **Code Example**:
|
||||
|
||||
```csharp
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
// Initialize JS library only once
|
||||
await JS.InvokeVoidAsync("initializeChart", elementRef);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Critical Use Case:**
|
||||
|
||||
```csharp
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
if (firstRender)
|
||||
{
|
||||
// Load JS module
|
||||
module = await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./scripts/myScript.js");
|
||||
|
||||
// Initialize library
|
||||
await module.InvokeVoidAsync("setupChart", element);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Important:** Always use `firstRender` check for one-time initialization. This prevents re-initializing on every parameter change.
|
||||
|
||||
## Component Parameters
|
||||
|
||||
### Parameter Declaration
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
// Simple parameter
|
||||
[Parameter]
|
||||
public string Title { get; set; } = "Default";
|
||||
|
||||
// Required parameter (C# 11+)
|
||||
[Parameter, EditorRequired]
|
||||
public int UserId { get; set; }
|
||||
|
||||
// Child content
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
// Event callback
|
||||
[Parameter]
|
||||
public EventCallback<string> OnValueChanged { get; set; }
|
||||
|
||||
// Cascading parameter
|
||||
[CascadingParameter]
|
||||
public ThemeInfo? CurrentTheme { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Parameter Best Practices
|
||||
|
||||
**Use Clear Names:**
|
||||
|
||||
```csharp
|
||||
// ✅ Good - clear intent
|
||||
[Parameter]
|
||||
public bool IsVisible { get; set; }
|
||||
|
||||
// ❌ Poor - ambiguous
|
||||
[Parameter]
|
||||
public bool State { get; set; }
|
||||
```
|
||||
|
||||
**Use Nullable Types for Optional:**
|
||||
|
||||
```csharp
|
||||
// ✅ Good - nullable indicates optional
|
||||
[Parameter]
|
||||
public string? OptionalValue { get; set; }
|
||||
|
||||
// ✅ Good - default value
|
||||
[Parameter]
|
||||
public int MaxItems { get; set; } = 10;
|
||||
|
||||
// ❌ Poor - not clear if optional
|
||||
[Parameter]
|
||||
public string RequiredValue { get; set; }
|
||||
```
|
||||
|
||||
**Use [EditorRequired] for Required Parameters (C# 11+):**
|
||||
|
||||
```csharp
|
||||
// ✅ Best practice - compiler enforces, IDE warns
|
||||
[Parameter, EditorRequired]
|
||||
public string Title { get; set; } = default!;
|
||||
|
||||
// Fallback for older C#
|
||||
[Parameter]
|
||||
public string Title { get; set; } = default!;
|
||||
```
|
||||
|
||||
**Use EventCallback for Child-to-Parent Communication:**
|
||||
|
||||
```csharp
|
||||
// ✅ Correct - EventCallback for async safety
|
||||
[Parameter]
|
||||
public EventCallback<string> OnValueChanged { get; set; }
|
||||
|
||||
// ✅ With custom args
|
||||
[Parameter]
|
||||
public EventCallback<ValueChangeEventArgs> OnValueChanged { get; set; }
|
||||
|
||||
// ❌ Avoid - direct Action, not async-safe
|
||||
[Parameter]
|
||||
public Action<string>? OnValueChanged { get; set; }
|
||||
```
|
||||
|
||||
### Parameter Change Detection
|
||||
|
||||
To know when a parameter changed:
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
private int previousUserId;
|
||||
|
||||
[Parameter]
|
||||
public int UserId { get; set; }
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (UserId != previousUserId)
|
||||
{
|
||||
previousUserId = UserId;
|
||||
await LoadUserData();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Or use a comparison strategy:
|
||||
|
||||
```csharp
|
||||
private object? previousCriteria;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
var currentCriteria = (SearchId, SearchTerm);
|
||||
|
||||
if (!Equals(previousCriteria, currentCriteria))
|
||||
{
|
||||
previousCriteria = currentCriteria;
|
||||
await PerformSearch();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Cascading Values
|
||||
|
||||
Cascading values allow ancestor components to provide data to all descendants without explicit parameter passing.
|
||||
|
||||
### Providing Cascading Values
|
||||
|
||||
```csharp
|
||||
<!-- Parent component -->
|
||||
<CascadingValue Value="@currentUser">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
private User currentUser = new();
|
||||
}
|
||||
```
|
||||
|
||||
### Receiving Cascading Values
|
||||
|
||||
```csharp
|
||||
<!-- Child component anywhere in hierarchy -->
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
public User? CurrentUser { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (CurrentUser == null)
|
||||
{
|
||||
// Handle missing cascading value
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Multiple Cascading Values
|
||||
|
||||
```csharp
|
||||
<!-- Provider -->
|
||||
<CascadingValue Value="@theme">
|
||||
<CascadingValue Value="@currentUser">
|
||||
<CascadingValue Value="@permissions">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
|
||||
<!-- Consumer - multiple parameters -->
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
public Theme? Theme { get; set; }
|
||||
|
||||
[CascadingParameter]
|
||||
public User? CurrentUser { get; set; }
|
||||
|
||||
[CascadingParameter]
|
||||
public Permissions? Permissions { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Named Cascading Values
|
||||
|
||||
For disambiguation when multiple values of same type:
|
||||
|
||||
```csharp
|
||||
<!-- Provider -->
|
||||
<CascadingValue Value="@themeLight" Name="Light">
|
||||
<CascadingValue Value="@themeDark" Name="Dark">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
|
||||
<!-- Consumer -->
|
||||
@code {
|
||||
[CascadingParameter(Name = "Light")]
|
||||
public Theme? LightTheme { get; set; }
|
||||
|
||||
[CascadingParameter(Name = "Dark")]
|
||||
public Theme? DarkTheme { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
## RenderFragment for Component Composition
|
||||
|
||||
RenderFragment enables flexible component composition.
|
||||
|
||||
### Basic RenderFragment
|
||||
|
||||
```csharp
|
||||
<!-- Parent component -->
|
||||
<div>
|
||||
<h2>Header</h2>
|
||||
@ChildContent
|
||||
<footer>Footer</footer>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
}
|
||||
|
||||
<!-- Usage -->
|
||||
<Layout>
|
||||
<p>This is the main content</p>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Typed RenderFragment with Context
|
||||
|
||||
```csharp
|
||||
<!-- ListComponent.razor -->
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
@ItemTemplate(item)
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public IEnumerable<Item> Items { get; set; } = [];
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment<Item>? ItemTemplate { get; set; }
|
||||
}
|
||||
|
||||
<!-- Usage -->
|
||||
<ListComponent Items="@items">
|
||||
<ItemTemplate Context="item">
|
||||
<div>@item.Name - @item.Price</div>
|
||||
</ItemTemplate>
|
||||
</ListComponent>
|
||||
```
|
||||
|
||||
### Multiple Named Content Areas
|
||||
|
||||
```csharp
|
||||
<!-- Card component with multiple slots -->
|
||||
<div class="card">
|
||||
<div class="card-header">@Header</div>
|
||||
<div class="card-body">@Body</div>
|
||||
<div class="card-footer">@Footer</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public RenderFragment? Header { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? Body { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? Footer { get; set; }
|
||||
}
|
||||
|
||||
<!-- Usage -->
|
||||
<Card>
|
||||
<Header>
|
||||
<h3>Card Title</h3>
|
||||
</Header>
|
||||
<Body>
|
||||
<p>Card content</p>
|
||||
</Body>
|
||||
<Footer>
|
||||
<button>Action</button>
|
||||
</Footer>
|
||||
</Card>
|
||||
```
|
||||
|
||||
## Component Best Practices
|
||||
|
||||
### Single Responsibility
|
||||
|
||||
- Each component should have one clear purpose
|
||||
- Avoid god components that do too much
|
||||
- Example: `UserProfile` component should focus on displaying user info, not handle complex business logic
|
||||
|
||||
### Composition Over Inheritance
|
||||
|
||||
- Use cascading values for shared state, not deep hierarchies
|
||||
- Compose components rather than creating base classes
|
||||
- Example: Create theme provider component instead of theme-aware base class
|
||||
|
||||
### Keep Components Simple
|
||||
|
||||
- Minimize `@code` block logic
|
||||
- Move complex logic to services
|
||||
- Example: Validation logic → ValidationService, not in component
|
||||
|
||||
### Proper Disposal
|
||||
|
||||
- Implement `IDisposable` or `IAsyncDisposable`
|
||||
- Unsubscribe from events
|
||||
- Dispose timers and resources
|
||||
|
||||
```csharp
|
||||
@implements IAsyncDisposable
|
||||
@inject IJSRuntime JS
|
||||
|
||||
private IJSObjectReference? module;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
module = await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./myScript.js");
|
||||
}
|
||||
}
|
||||
|
||||
async ValueTask IAsyncDisposable.DisposeAsync()
|
||||
{
|
||||
if (module is not null)
|
||||
{
|
||||
await module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [state-management-events.md](state-management-events.md) for event handling and state updates. See [performance-advanced.md](performance-advanced.md) for optimization techniques.
|
||||
@@ -0,0 +1,589 @@
|
||||
# Blazor Forms & Validation
|
||||
|
||||
## EditForm Component
|
||||
|
||||
EditForm provides a complete form handling solution with data binding and validation.
|
||||
|
||||
### Basic EditForm
|
||||
|
||||
```csharp
|
||||
@page "/register"
|
||||
|
||||
<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
|
||||
<DataAnnotationsValidator />
|
||||
<ValidationSummary />
|
||||
|
||||
<div class="form-group">
|
||||
<label>Name:</label>
|
||||
<InputText @bind-Value="model.Name" class="form-control" />
|
||||
<ValidationMessage For="@(() => model.Name)" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Email:</label>
|
||||
<InputText @bind-Value="model.Email" class="form-control" />
|
||||
<ValidationMessage For="@(() => model.Email)" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Register</button>
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
private RegistrationModel model = new();
|
||||
|
||||
private async Task HandleValidSubmit()
|
||||
{
|
||||
// Form is valid, process data
|
||||
await Service.RegisterUserAsync(model);
|
||||
}
|
||||
}
|
||||
|
||||
public class RegistrationModel
|
||||
{
|
||||
[Required]
|
||||
[StringLength(100, MinimumLength = 2)]
|
||||
public string Name { get; set; } = "";
|
||||
|
||||
[Required]
|
||||
[EmailAddress]
|
||||
public string Email { get; set; } = "";
|
||||
|
||||
[Required]
|
||||
[MinLength(8)]
|
||||
public string Password { get; set; } = "";
|
||||
}
|
||||
```
|
||||
|
||||
### EditForm Events
|
||||
|
||||
```csharp
|
||||
<EditForm Model="@model"
|
||||
OnValidSubmit="@OnValidSubmit"
|
||||
OnInvalidSubmit="@OnInvalidSubmit"
|
||||
OnSubmit="@OnSubmit">
|
||||
<!-- Form content -->
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
private async Task OnValidSubmit()
|
||||
{
|
||||
// Fires when form is valid and submitted
|
||||
}
|
||||
|
||||
private async Task OnInvalidSubmit()
|
||||
{
|
||||
// Fires when form is invalid and submitted
|
||||
}
|
||||
|
||||
private async Task OnSubmit()
|
||||
{
|
||||
// Fires for any submit (valid or invalid)
|
||||
// Useful for custom validation logic
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Form State Control
|
||||
|
||||
```csharp
|
||||
@inject EditFormService FormService
|
||||
|
||||
<EditForm Model="@model" @ref="form">
|
||||
<!-- Form content -->
|
||||
</EditForm>
|
||||
|
||||
<button @onclick="Submit">Submit</button>
|
||||
<button @onclick="Reset">Reset</button>
|
||||
<button @onclick="CheckValid">Is Valid?</button>
|
||||
|
||||
@code {
|
||||
private EditForm? form;
|
||||
private UserModel model = new();
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
// Manually trigger validation and submission
|
||||
await form!.RequestValidationAsync();
|
||||
|
||||
// Check if valid
|
||||
if (form!.EditContext.IsModified() && form!.EditContext.Validate())
|
||||
{
|
||||
// Process form
|
||||
}
|
||||
}
|
||||
|
||||
private void Reset()
|
||||
{
|
||||
// Reset all fields to default
|
||||
form!.EditContext.ResetEditingItemAsync();
|
||||
}
|
||||
|
||||
private void CheckValid()
|
||||
{
|
||||
bool isValid = form!.EditContext.Validate();
|
||||
Console.WriteLine($"Form valid: {isValid}");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Input Components
|
||||
|
||||
### Text Input
|
||||
|
||||
```csharp
|
||||
<InputText @bind-Value="model.Name" class="form-control" />
|
||||
<InputTextArea @bind-Value="model.Description" rows="4" />
|
||||
|
||||
@code {
|
||||
private UserModel model = new();
|
||||
}
|
||||
```
|
||||
|
||||
### Numeric Input
|
||||
|
||||
```csharp
|
||||
<InputNumber @bind-Value="model.Age" class="form-control" />
|
||||
<InputNumber @bind-Value="model.Price" @bind-Value:format="N2" />
|
||||
|
||||
@code {
|
||||
private int age;
|
||||
private decimal price;
|
||||
}
|
||||
```
|
||||
|
||||
**Format specifiers:**
|
||||
|
||||
- `N2` - Number with 2 decimal places
|
||||
- `C` - Currency
|
||||
- `P` - Percentage
|
||||
- `D` - Date
|
||||
- `X` - Hexadecimal
|
||||
|
||||
### Date Input
|
||||
|
||||
```csharp
|
||||
<InputDate @bind-Value="model.BirthDate" />
|
||||
<InputDate @bind-Value="model.StartTime" Type="InputDateType.DateTimeLocal" />
|
||||
|
||||
@code {
|
||||
private DateTime birthDate;
|
||||
private DateTime startTime;
|
||||
}
|
||||
```
|
||||
|
||||
**Types:**
|
||||
|
||||
- `InputDateType.Date` - Date only (default)
|
||||
- `InputDateType.DateTimeLocal` - Date and time
|
||||
- `InputDateType.Month` - Month and year
|
||||
- `InputDateType.Time` - Time only
|
||||
|
||||
### Select/Dropdown
|
||||
|
||||
```csharp
|
||||
<InputSelect @bind-Value="model.Category" class="form-control">
|
||||
<option value="">Select a category...</option>
|
||||
<option value="electronics">Electronics</option>
|
||||
<option value="clothing">Clothing</option>
|
||||
</InputSelect>
|
||||
|
||||
<!-- Dynamic options from data -->
|
||||
<InputSelect @bind-Value="model.CategoryId">
|
||||
<option value="">Select...</option>
|
||||
@foreach (var cat in categories)
|
||||
{
|
||||
<option value="@cat.Id">@cat.Name</option>
|
||||
}
|
||||
</InputSelect>
|
||||
|
||||
@code {
|
||||
private string selectedCategory = "";
|
||||
private List<Category> categories = [];
|
||||
}
|
||||
```
|
||||
|
||||
### Checkbox
|
||||
|
||||
```csharp
|
||||
<InputCheckbox @bind-Value="model.AgreeToTerms" />
|
||||
Accept terms of service?
|
||||
|
||||
@code {
|
||||
private bool agreeToTerms = false;
|
||||
}
|
||||
```
|
||||
|
||||
### Radio Buttons
|
||||
|
||||
```csharp
|
||||
<InputRadioGroup @bind-Value="model.Preference">
|
||||
<div>
|
||||
<InputRadio Value="@("option1")" />
|
||||
<label>Option 1</label>
|
||||
</div>
|
||||
<div>
|
||||
<InputRadio Value="@("option2")" />
|
||||
<label>Option 2</label>
|
||||
</div>
|
||||
</InputRadioGroup>
|
||||
|
||||
@code {
|
||||
private string preference = "option1";
|
||||
}
|
||||
```
|
||||
|
||||
### File Upload
|
||||
|
||||
```csharp
|
||||
<InputFile OnChange="@HandleFileSelect" />
|
||||
|
||||
@code {
|
||||
private async Task HandleFileSelect(InputFileChangeEventArgs e)
|
||||
{
|
||||
var file = e.File;
|
||||
|
||||
using var stream = file.OpenReadStream();
|
||||
var buffer = new byte[stream.Length];
|
||||
await stream.ReadAsync(buffer);
|
||||
|
||||
// Process file
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Validation
|
||||
|
||||
### DataAnnotations Validation
|
||||
|
||||
```csharp
|
||||
public class UserModel
|
||||
{
|
||||
[Required(ErrorMessage = "Name is required")]
|
||||
[StringLength(100, MinimumLength = 2)]
|
||||
public string Name { get; set; } = "";
|
||||
|
||||
[Required]
|
||||
[EmailAddress(ErrorMessage = "Invalid email format")]
|
||||
public string Email { get; set; } = "";
|
||||
|
||||
[Range(18, 120, ErrorMessage = "Age must be 18-120")]
|
||||
public int Age { get; set; }
|
||||
|
||||
[Url]
|
||||
public string? Website { get; set; }
|
||||
|
||||
[Phone]
|
||||
public string? PhoneNumber { get; set; }
|
||||
|
||||
[CreditCard]
|
||||
public string? CardNumber { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
**Common Validators:**
|
||||
|
||||
- `[Required]` - Field must have value
|
||||
- `[StringLength(max)]` - Max length
|
||||
- `[StringLength(max, MinimumLength = min)]` - Min and max
|
||||
- `[EmailAddress]` - Valid email format
|
||||
- `[Range(min, max)]` - Numeric range
|
||||
- `[Url]` - Valid URL format
|
||||
- `[Phone]` - Valid phone format
|
||||
- `[CreditCard]` - Valid credit card format
|
||||
- `[RegularExpression(pattern)]` - Regex match
|
||||
|
||||
### ValidationSummary
|
||||
|
||||
Shows all validation errors for the form:
|
||||
|
||||
```csharp
|
||||
<EditForm Model="@model" OnValidSubmit="@HandleSubmit">
|
||||
<DataAnnotationsValidator />
|
||||
<ValidationSummary />
|
||||
|
||||
<InputText @bind-Value="model.Name" />
|
||||
<InputText @bind-Value="model.Email" />
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</EditForm>
|
||||
```
|
||||
|
||||
Displays as:
|
||||
|
||||
```
|
||||
- Name is required
|
||||
- Email is required
|
||||
```
|
||||
|
||||
### ValidationMessage
|
||||
|
||||
Shows validation error for specific field:
|
||||
|
||||
```csharp
|
||||
<InputText @bind-Value="model.Name" />
|
||||
<ValidationMessage For="@(() => model.Name)" />
|
||||
|
||||
<!-- Custom CSS class -->
|
||||
<ValidationMessage For="@(() => model.Email)" class="text-danger" />
|
||||
```
|
||||
|
||||
### Custom Validation
|
||||
|
||||
Implement `IValidatableObject` for complex validation rules:
|
||||
|
||||
```csharp
|
||||
public class UserModel : IValidatableObject
|
||||
{
|
||||
public string Email { get; set; } = "";
|
||||
public string ConfirmEmail { get; set; } = "";
|
||||
|
||||
[Range(18, 100)]
|
||||
public int Age { get; set; }
|
||||
|
||||
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
|
||||
{
|
||||
// Compare email fields
|
||||
if (Email != ConfirmEmail)
|
||||
{
|
||||
yield return new ValidationResult(
|
||||
"Email addresses must match",
|
||||
new[] { nameof(ConfirmEmail) }
|
||||
);
|
||||
}
|
||||
|
||||
// Custom age validation
|
||||
if (Age > 0 && Age < 18 && HasRestrictedContent)
|
||||
{
|
||||
yield return new ValidationResult(
|
||||
"Users under 18 cannot access this content",
|
||||
new[] { nameof(Age) }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public bool HasRestrictedContent { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Validators
|
||||
|
||||
Create reusable custom validators:
|
||||
|
||||
```csharp
|
||||
public class MinimumAgeAttribute : ValidationAttribute
|
||||
{
|
||||
private readonly int _minimumAge;
|
||||
|
||||
public MinimumAgeAttribute(int minimumAge)
|
||||
{
|
||||
_minimumAge = minimumAge;
|
||||
}
|
||||
|
||||
protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
|
||||
{
|
||||
if (value is DateTime birthDate)
|
||||
{
|
||||
var age = DateTime.Today.Year - birthDate.Year;
|
||||
if (birthDate.Date > DateTime.Today.AddYears(-age)) age--;
|
||||
|
||||
if (age < _minimumAge)
|
||||
{
|
||||
return new ValidationResult($"Minimum age is {_minimumAge}");
|
||||
}
|
||||
}
|
||||
|
||||
return ValidationResult.Success;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
public class UserModel
|
||||
{
|
||||
[MinimumAge(18)]
|
||||
public DateTime BirthDate { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Async Validation
|
||||
|
||||
```csharp
|
||||
public class UniqueEmailAttribute : ValidationAttribute
|
||||
{
|
||||
protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
|
||||
{
|
||||
// Can't use async in ValidationAttribute
|
||||
// Use EditContext instead (see below)
|
||||
return ValidationResult.Success;
|
||||
}
|
||||
}
|
||||
|
||||
// Better approach: Manual validation in component
|
||||
@code {
|
||||
private async Task HandleValidSubmit()
|
||||
{
|
||||
// Check email availability before submit
|
||||
bool isUnique = await Service.IsEmailUniqueAsync(model.Email);
|
||||
if (!isUnique)
|
||||
{
|
||||
form!.EditContext.AddValidationMessages(
|
||||
FieldIdentifier.Create(() => model.Email),
|
||||
new[] { "Email is already registered" }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
await SaveUserAsync(model);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Form Patterns
|
||||
|
||||
### Loading State
|
||||
|
||||
```csharp
|
||||
@if (isSubmitting)
|
||||
{
|
||||
<p>Saving...</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<EditForm Model="@model" OnValidSubmit="@SubmitAsync">
|
||||
<DataAnnotationsValidator />
|
||||
<ValidationSummary />
|
||||
|
||||
<InputText @bind-Value="model.Name" />
|
||||
<button type="submit" disabled="@isSubmitting">
|
||||
@(isSubmitting ? "Saving..." : "Submit")
|
||||
</button>
|
||||
</EditForm>
|
||||
}
|
||||
|
||||
@code {
|
||||
private bool isSubmitting;
|
||||
|
||||
private async Task SubmitAsync()
|
||||
{
|
||||
isSubmitting = true;
|
||||
try
|
||||
{
|
||||
await Service.SaveAsync(model);
|
||||
}
|
||||
finally
|
||||
{
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
```csharp
|
||||
<EditForm Model="@model" OnValidSubmit="@SubmitAsync">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
@if (!string.IsNullOrEmpty(errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger">@errorMessage</div>
|
||||
}
|
||||
|
||||
<ValidationSummary />
|
||||
|
||||
<InputText @bind-Value="model.Name" />
|
||||
<button type="submit">Submit</button>
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
private string? errorMessage;
|
||||
|
||||
private async Task SubmitAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
errorMessage = null;
|
||||
await Service.SaveAsync(model);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
errorMessage = $"Error: {ex.Message}";
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Multi-Step Form
|
||||
|
||||
```csharp
|
||||
@page "/wizard"
|
||||
|
||||
@if (currentStep == 1)
|
||||
{
|
||||
<h2>Step 1: Basic Info</h2>
|
||||
<InputText @bind-Value="model.Name" />
|
||||
<button @onclick="NextStep">Next</button>
|
||||
}
|
||||
else if (currentStep == 2)
|
||||
{
|
||||
<h2>Step 2: Contact Info</h2>
|
||||
<InputText @bind-Value="model.Email" />
|
||||
<button @onclick="PreviousStep">Back</button>
|
||||
<button @onclick="NextStep">Next</button>
|
||||
}
|
||||
else if (currentStep == 3)
|
||||
{
|
||||
<h2>Step 3: Confirm</h2>
|
||||
<p>Name: @model.Name</p>
|
||||
<p>Email: @model.Email</p>
|
||||
<button @onclick="PreviousStep">Back</button>
|
||||
<button @onclick="SubmitAsync">Submit</button>
|
||||
}
|
||||
|
||||
@code {
|
||||
private int currentStep = 1;
|
||||
private UserModel model = new();
|
||||
|
||||
private void NextStep() => currentStep++;
|
||||
private void PreviousStep() => currentStep--;
|
||||
|
||||
private async Task SubmitAsync()
|
||||
{
|
||||
await Service.RegisterAsync(model);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Real-Time Field Validation
|
||||
|
||||
```csharp
|
||||
<input @bind="email" @bind:event="oninput" @onblur="ValidateEmail" />
|
||||
@if (!string.IsNullOrEmpty(emailError))
|
||||
{
|
||||
<span class="error">@emailError</span>
|
||||
}
|
||||
|
||||
@code {
|
||||
private string email = "";
|
||||
private string? emailError;
|
||||
|
||||
private void ValidateEmail()
|
||||
{
|
||||
if (string.IsNullOrEmpty(email))
|
||||
{
|
||||
emailError = "Email is required";
|
||||
}
|
||||
else if (!email.Contains("@"))
|
||||
{
|
||||
emailError = "Invalid email format";
|
||||
}
|
||||
else
|
||||
{
|
||||
emailError = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [state-management-events.md](state-management-events.md) for data binding patterns. See [authentication-authorization.md](authentication-authorization.md) for role-based form customization.
|
||||
@@ -0,0 +1,561 @@
|
||||
# Blazor Performance & Advanced Patterns
|
||||
|
||||
## Rendering Optimization
|
||||
|
||||
### ShouldRender Override
|
||||
|
||||
Control when components re-render to prevent unnecessary rendering cycles.
|
||||
|
||||
```csharp
|
||||
@page "/optimized"
|
||||
|
||||
<button @onclick="IncrementCount">Clicked @count times</button>
|
||||
<ChildComponent Value="@value" />
|
||||
|
||||
@code {
|
||||
private int count = 0;
|
||||
private string value = "test";
|
||||
|
||||
protected override bool ShouldRender()
|
||||
{
|
||||
// Only render if value changed, not if count changed
|
||||
// This component doesn't display count directly
|
||||
return false; // Skip render
|
||||
}
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
count++;
|
||||
// Component won't re-render, child component won't re-render either
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tracking Changed Fields
|
||||
|
||||
```csharp
|
||||
@page "/tracker"
|
||||
|
||||
<button @onclick="UpdateName">Update Name</button>
|
||||
<button @onclick="UpdateAge">Update Age</button>
|
||||
|
||||
<p>Name: @name</p>
|
||||
<p>Age: @age</p>
|
||||
|
||||
@code {
|
||||
private string? name;
|
||||
private int age;
|
||||
private bool nameChanged = false;
|
||||
private bool ageChanged = false;
|
||||
|
||||
protected override bool ShouldRender()
|
||||
{
|
||||
if (!nameChanged && !ageChanged)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
nameChanged = false;
|
||||
ageChanged = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
private void UpdateName()
|
||||
{
|
||||
name = "New Name";
|
||||
nameChanged = true;
|
||||
}
|
||||
|
||||
private void UpdateAge()
|
||||
{
|
||||
age = 30;
|
||||
ageChanged = true;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Key Directive for List Items
|
||||
|
||||
```csharp
|
||||
@page "/list"
|
||||
|
||||
<button @onclick="AddItem">Add Item</button>
|
||||
|
||||
@foreach (var item in items)
|
||||
{
|
||||
<!-- WITHOUT @key - new ItemComponent created for each item -->
|
||||
<!-- <ItemComponent Item="@item" />-->
|
||||
|
||||
<!-- WITH @key - same ItemComponent reused if item.Id stays in list -->
|
||||
<ItemComponent @key="item.Id" Item="@item" />
|
||||
}
|
||||
|
||||
@code {
|
||||
private List<Item> items = [];
|
||||
|
||||
private void AddItem()
|
||||
{
|
||||
items = items.Prepend(new Item { Id = Guid.NewGuid(), Name = "New" }).ToList();
|
||||
}
|
||||
}
|
||||
|
||||
public class Item
|
||||
{
|
||||
public Guid Id { get; set; }
|
||||
public string? Name { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
**Why @key matters:**
|
||||
|
||||
- Helps Blazor's diffing algorithm match old components to new items
|
||||
- Prevents component state loss during list reordering
|
||||
- Improves performance with large lists
|
||||
|
||||
### IDisposable for Cleanup
|
||||
|
||||
```csharp
|
||||
@implements IAsyncDisposable
|
||||
@inject IJSRuntime JS
|
||||
|
||||
private IJSObjectReference? module;
|
||||
private Timer? timer;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
timer = new Timer(_ => UpdateAsync(), null, TimeSpan.Zero, TimeSpan.FromSeconds(1));
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
module = await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./myScript.js");
|
||||
}
|
||||
}
|
||||
|
||||
async ValueTask IAsyncDisposable.DisposeAsync()
|
||||
{
|
||||
timer?.Dispose();
|
||||
|
||||
if (module is not null)
|
||||
{
|
||||
await module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Virtualization
|
||||
|
||||
Virtualize large lists to render only visible items.
|
||||
|
||||
### Basic Virtualization
|
||||
|
||||
```csharp
|
||||
@page "/large-list"
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
|
||||
<Virtualize Items="@largeList" Context="item">
|
||||
<div class="item">
|
||||
<p>@item.Id - @item.Name</p>
|
||||
</div>
|
||||
</Virtualize>
|
||||
|
||||
@code {
|
||||
private List<Item> largeList = [];
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
// Generate 100,000 items
|
||||
largeList = Enumerable.Range(1, 100000)
|
||||
.Select(i => new Item { Id = i, Name = $"Item {i}" })
|
||||
.ToList();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Async Virtualization (Infinite Scroll)
|
||||
|
||||
```csharp
|
||||
@page "/infinite-scroll"
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
|
||||
<Virtualize ItemsProvider="@LoadItems" Context="item" OverscanCount="5">
|
||||
<div>@item.Name</div>
|
||||
</Virtualize>
|
||||
|
||||
@code {
|
||||
private async ValueTask<ItemsProviderResult<Item>> LoadItems(
|
||||
ItemsProviderRequest request)
|
||||
{
|
||||
// Simulate loading from server
|
||||
var startIndex = request.StartIndex;
|
||||
var count = request.Count;
|
||||
|
||||
var items = await Service.GetItemsAsync(startIndex, count);
|
||||
|
||||
// Return items and total count for scrollbar sizing
|
||||
return new ItemsProviderResult<Item>(items, totalItemCount: 1000000);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
|
||||
- `Items` - Static list of items to virtualize
|
||||
- `ItemsProvider` - Async method to load items on demand
|
||||
- `OverscanCount` - Extra items to render outside viewport (default 3)
|
||||
- `ItemSize` - Estimated height for scrollbar calculation
|
||||
|
||||
## JavaScript Interop
|
||||
|
||||
### Invoke JavaScript from C #
|
||||
|
||||
```csharp
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<button @onclick="CallJavaScript">Click me</button>
|
||||
|
||||
@code {
|
||||
private async Task CallJavaScript()
|
||||
{
|
||||
// Simple call - no return value
|
||||
await JS.InvokeVoidAsync("console.log", "Hello from Blazor");
|
||||
|
||||
// With return value
|
||||
var result = await JS.InvokeAsync<string>("myFunction", arg1, arg2);
|
||||
|
||||
// Generic call with any return type
|
||||
var data = await JS.InvokeAsync<Data>("loadData");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JS Module Isolation (Recommended)
|
||||
|
||||
```csharp
|
||||
// Component.razor
|
||||
@implements IAsyncDisposable
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div @ref="element">
|
||||
<canvas id="chart"></canvas>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private ElementReference element;
|
||||
private IJSObjectReference? module;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
// Import JS module
|
||||
module = await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./scripts/chart.js");
|
||||
|
||||
// Call exported function
|
||||
await module.InvokeVoidAsync("initChart", element);
|
||||
}
|
||||
}
|
||||
|
||||
async ValueTask IAsyncDisposable.DisposeAsync()
|
||||
{
|
||||
if (module is not null)
|
||||
{
|
||||
await module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* scripts/chart.js */
|
||||
export function initChart(element) {
|
||||
const canvas = element.querySelector('#chart');
|
||||
// Initialize chart library
|
||||
}
|
||||
```
|
||||
|
||||
### Invoke C# from JavaScript
|
||||
|
||||
```csharp
|
||||
// Component.razor
|
||||
@implements IAsyncDisposable
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<button @onclick="SetupInterop">Setup</button>
|
||||
|
||||
@code {
|
||||
private IJSObjectReference? module;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
module = await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./scripts/interop.js");
|
||||
|
||||
// Pass C# object reference to JS
|
||||
var objRef = DotNetObjectReference.Create(this);
|
||||
await module.InvokeVoidAsync("setupInterop", objRef);
|
||||
}
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task HandleJSEvent(string data)
|
||||
{
|
||||
Console.WriteLine($"JS called C#: {data}");
|
||||
// Update component state
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
async ValueTask IAsyncDisposable.DisposeAsync()
|
||||
{
|
||||
if (module is not null)
|
||||
{
|
||||
await module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* scripts/interop.js */
|
||||
let dotnetHelper;
|
||||
|
||||
export function setupInterop(dotnetRef) {
|
||||
dotnetHelper = dotnetRef;
|
||||
|
||||
// Call C# method from JS
|
||||
document.addEventListener('click', async (e) => {
|
||||
await dotnetHelper.invokeMethodAsync('HandleJSEvent', 'User clicked');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Error Handling in Interop
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
private async Task SafeInvokeAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("riskyFunction");
|
||||
}
|
||||
catch (JSException jsEx)
|
||||
{
|
||||
Console.WriteLine($"JS error: {jsEx.Message}");
|
||||
}
|
||||
catch (OperationCanceledException)
|
||||
{
|
||||
Console.WriteLine("JS call was cancelled");
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Lazy Loading
|
||||
|
||||
Load assemblies and components on demand.
|
||||
|
||||
### Lazy-Loaded Component Routes
|
||||
|
||||
```csharp
|
||||
<!-- App.razor -->
|
||||
<Router AppAssembly="@typeof(App).Assembly"
|
||||
AdditionalAssemblies="@additionalAssemblies"
|
||||
OnNavigateAsync="@OnNavigateAsync">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
</Found>
|
||||
<NotFound>
|
||||
<p>Loading...</p>
|
||||
</NotFound>
|
||||
</Router>
|
||||
|
||||
@code {
|
||||
private List<Assembly>? additionalAssemblies;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
additionalAssemblies = new();
|
||||
}
|
||||
|
||||
private async Task OnNavigateAsync(NavigationContext context)
|
||||
{
|
||||
// Load admin assembly only when accessing /admin
|
||||
if (context.Path.StartsWith("admin"))
|
||||
{
|
||||
var adminAssembly = await JS.InvokeAsync<byte[]>(
|
||||
"fetch", "./_framework/admin.wasm");
|
||||
|
||||
additionalAssemblies!.Add(Assembly.Load(adminAssembly));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## WASM Performance Best Practices
|
||||
|
||||
### AOT Compilation
|
||||
|
||||
```xml
|
||||
<!-- .csproj -->
|
||||
<PropertyGroup>
|
||||
<RunAOTCompilation>true</RunAOTCompilation>
|
||||
</PropertyGroup>
|
||||
```
|
||||
|
||||
Benefits:
|
||||
|
||||
- No JIT compilation at runtime
|
||||
- Faster startup time
|
||||
- ~20% larger download
|
||||
- Production recommended
|
||||
|
||||
### Trimming
|
||||
|
||||
```xml
|
||||
<!-- .csproj -->
|
||||
<PropertyGroup>
|
||||
<PublishTrimmed>true</PublishTrimmed>
|
||||
</PropertyGroup>
|
||||
```
|
||||
|
||||
Benefits:
|
||||
|
||||
- Removes unused code
|
||||
- ~40% smaller download
|
||||
- May cause runtime errors if reflection-based code removed
|
||||
- Test thoroughly in Release build
|
||||
|
||||
### Compression
|
||||
|
||||
```xml
|
||||
<!-- .csproj -->
|
||||
<PropertyGroup>
|
||||
<BlazorWebAssemblyEnableCompression>true</BlazorWebAssemblyEnableCompression>
|
||||
</PropertyGroup>
|
||||
```
|
||||
|
||||
Server-side (in Program.cs):
|
||||
|
||||
```csharp
|
||||
app.UseResponseCompression();
|
||||
|
||||
builder.Services.AddResponseCompression(opts =>
|
||||
{
|
||||
opts.Filters.Add(new GzipCompressionProvider());
|
||||
opts.Filters.Add(new BrotliCompressionProvider());
|
||||
});
|
||||
```
|
||||
|
||||
### Minimize JavaScript Interop
|
||||
|
||||
```csharp
|
||||
// INEFFICIENT - Many JS calls
|
||||
for (int i = 0; i < 1000; i++)
|
||||
{
|
||||
await JS.InvokeVoidAsync("updateUI", i);
|
||||
}
|
||||
|
||||
// EFFICIENT - Single JS call with batch data
|
||||
var updates = Enumerable.Range(0, 1000).ToList();
|
||||
await JS.InvokeVoidAsync("updateUIBatch", updates);
|
||||
```
|
||||
|
||||
## Error Boundaries
|
||||
|
||||
Handle component errors gracefully.
|
||||
|
||||
```csharp
|
||||
@page "/error-demo"
|
||||
|
||||
<ErrorBoundary>
|
||||
<ChildContent>
|
||||
<ChildComponent />
|
||||
</ChildContent>
|
||||
<ErrorContent Context="ex">
|
||||
<div class="alert alert-danger">
|
||||
<h4>Error</h4>
|
||||
<p>@ex.Message</p>
|
||||
<button @onclick="ResetError">Try Again</button>
|
||||
</div>
|
||||
</ErrorContent>
|
||||
</ErrorBoundary>
|
||||
|
||||
@code {
|
||||
private ErrorBoundary? errorBoundary;
|
||||
|
||||
private async Task ResetError()
|
||||
{
|
||||
await errorBoundary!.RecoverAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Isolation
|
||||
|
||||
Scope CSS to specific components.
|
||||
|
||||
```html
|
||||
<!-- MyComponent.razor -->
|
||||
<div class="container">
|
||||
<h1>@Title</h1>
|
||||
</div>
|
||||
|
||||
<!-- MyComponent.razor.css -->
|
||||
.container {
|
||||
background-color: blue;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
|
||||
- No global namespace pollution
|
||||
- Component-specific styling
|
||||
- CSS automatically scoped to component
|
||||
- Compiled into assembly
|
||||
|
||||
## Best Practices Summary
|
||||
|
||||
### Performance
|
||||
|
||||
- Use `@key` on list items
|
||||
- Override `ShouldRender()` to prevent unnecessary renders
|
||||
- Use virtualization for large lists
|
||||
- Minimize JavaScript interop calls
|
||||
- Enable AOT compilation and trimming for WASM
|
||||
|
||||
### JavaScript Interop
|
||||
|
||||
- Use module isolation pattern
|
||||
- Always dispose JS module references
|
||||
- Handle JS exceptions properly
|
||||
- Only call JS in `OnAfterRender` with firstRender check
|
||||
- Minimize interop calls for performance
|
||||
|
||||
### Architecture
|
||||
|
||||
- Keep components simple and focused
|
||||
- Move logic to services
|
||||
- Use cascading values for shared state
|
||||
- Implement IDisposable for cleanup
|
||||
- Validate authorization on server side
|
||||
|
||||
### User Experience
|
||||
|
||||
- Show loading states during async operations
|
||||
- Provide error feedback
|
||||
- Use AuthorizeView for conditional rendering
|
||||
- Implement error boundaries
|
||||
- Test on slow connections
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [components-lifecycle.md](components-lifecycle.md) for component disposal patterns. See [state-management-events.md](state-management-events.md) for state update optimization.
|
||||
@@ -0,0 +1,492 @@
|
||||
# Blazor Routing & Navigation
|
||||
|
||||
## Route Definition
|
||||
|
||||
Routes map URL paths to Blazor components.
|
||||
|
||||
### Basic Route Definition
|
||||
|
||||
```csharp
|
||||
@page "/product"
|
||||
@page "/product/{id}"
|
||||
|
||||
<h3>Product: @Id</h3>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? Id { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
**How it works:**
|
||||
- `@page` directive makes component routable
|
||||
- Parameter name in URL (`{id}`) must match parameter name in `@code` block
|
||||
- Multiple `@page` directives supported (same component, multiple routes)
|
||||
|
||||
### Route Parameters
|
||||
|
||||
```csharp
|
||||
@page "/product/{id}"
|
||||
<p>Product: @id</p>
|
||||
|
||||
@page "/category/{categoryId}/product/{productId}"
|
||||
<p>Category: @categoryId, Product: @productId</p>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? id { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string? categoryId { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string? productId { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
**Parameter Matching:**
|
||||
- Blazor matches route segments to parameter names (case-insensitive)
|
||||
- `{id}` in route matches `Id` parameter
|
||||
- Extra parameters in URL are ignored
|
||||
|
||||
### Route Constraints
|
||||
|
||||
Route constraints enforce parameter type and format:
|
||||
|
||||
```csharp
|
||||
@page "/product/{id:int}" <!-- Integer only -->
|
||||
@page "/order/{orderId:long}" <!-- Long integer -->
|
||||
@page "/user/{id:guid}" <!-- GUID format -->
|
||||
@page "/article/{slug:string}" <!-- String (default) -->
|
||||
@page "/event/{date:datetime}" <!-- DateTime format -->
|
||||
@page "/price/{amount:decimal}" <!-- Decimal number -->
|
||||
@page "/flag/{active:bool}" <!-- Boolean -->
|
||||
@page "/value/{num:double}" <!-- Double/Float -->
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public int id { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public Guid id { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool active { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
**Built-in Constraints:**
|
||||
- `:int` - Integer values
|
||||
- `:long` - Long integers
|
||||
- `:guid` - GUID format
|
||||
- `:bool` - Boolean
|
||||
- `:datetime` - DateTime format
|
||||
- `:decimal` - Decimal numbers
|
||||
- `:double` / `:float` - Floating point
|
||||
- `:string` - Any string (default)
|
||||
|
||||
### Optional Route Parameters
|
||||
|
||||
```csharp
|
||||
@page "/search"
|
||||
@page "/search/{searchTerm}"
|
||||
|
||||
<p>Search term: @(searchTerm ?? "All results")</p>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? searchTerm { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Catch-All Routes
|
||||
|
||||
```csharp
|
||||
@page "/{*pageRoute}"
|
||||
|
||||
<p>Page not found: @pageRoute</p>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? pageRoute { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
## Navigation
|
||||
|
||||
### Programmatic Navigation
|
||||
|
||||
```csharp
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<button @onclick="GoHome">Go Home</button>
|
||||
<button @onclick="GoToUser">Go to User</button>
|
||||
|
||||
@code {
|
||||
private void GoHome()
|
||||
{
|
||||
Navigation.NavigateTo("/");
|
||||
}
|
||||
|
||||
private void GoToUser()
|
||||
{
|
||||
Navigation.NavigateTo("/user/123");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Navigation with Options
|
||||
|
||||
```csharp
|
||||
// Replace browser history entry instead of adding new one
|
||||
Navigation.NavigateTo("/home", replace: true);
|
||||
|
||||
// Force full page reload from server
|
||||
Navigation.NavigateTo("/refresh", forceLoad: true);
|
||||
|
||||
// Combine options
|
||||
Navigation.NavigateTo("/new-page", replace: true, forceLoad: true);
|
||||
```
|
||||
|
||||
**When to use `forceLoad: true`:**
|
||||
- After logout to clear client-side state
|
||||
- Accessing completely different app
|
||||
- Clearing service worker cache
|
||||
- Full server-side initialization needed
|
||||
|
||||
### NavLink Component
|
||||
|
||||
NavLink automatically highlights active route:
|
||||
|
||||
```csharp
|
||||
<NavLink href="/home" Match="NavLinkMatch.All">
|
||||
<span class="icon">🏠</span> Home
|
||||
</NavLink>
|
||||
|
||||
<NavLink href="/products" Match="NavLinkMatch.Prefix">
|
||||
<span class="icon">📦</span> Products
|
||||
</NavLink>
|
||||
|
||||
<NavLink href="/about" Match="NavLinkMatch.None">
|
||||
About
|
||||
</NavLink>
|
||||
|
||||
@code {
|
||||
// CSS class applied to active NavLink: active
|
||||
}
|
||||
```
|
||||
|
||||
**Match options:**
|
||||
- `NavLinkMatch.All` - Exact URL match required
|
||||
- `NavLinkMatch.Prefix` - URL starts with href (default)
|
||||
- `NavLinkMatch.None` - Never highlights
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
a.active {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
### Listen to Location Changes
|
||||
|
||||
```csharp
|
||||
@implements IDisposable
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<p>Current location: @Navigation.Uri</p>
|
||||
|
||||
@code {
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.LocationChanged += LocationChanged;
|
||||
}
|
||||
|
||||
private void LocationChanged(object? sender, LocationChangedEventArgs e)
|
||||
{
|
||||
Console.WriteLine($"New location: {e.Location}");
|
||||
|
||||
// React to navigation
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
Navigation.LocationChanged -= LocationChanged;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Query Strings
|
||||
|
||||
### Reading Query Parameters
|
||||
|
||||
```csharp
|
||||
@page "/search"
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<p>Search results for: @searchQuery</p>
|
||||
|
||||
@code {
|
||||
private string? searchQuery;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
||||
var query = System.Web.HttpUtility.ParseQueryString(uri.Query);
|
||||
searchQuery = query["q"];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Usage:** `/search?q=blazor` → `searchQuery = "blazor"`
|
||||
|
||||
### Building Query Strings
|
||||
|
||||
```csharp
|
||||
private void Search(string term)
|
||||
{
|
||||
Navigation.NavigateTo($"/search?q={Uri.EscapeDataString(term)}");
|
||||
}
|
||||
|
||||
// Or use QueryHelpers (in .NET 6+)
|
||||
var query = new Dictionary<string, string>
|
||||
{
|
||||
{ "q", "blazor" },
|
||||
{ "page", "1" }
|
||||
};
|
||||
|
||||
var url = NavigationManager.GetUriWithQueryParameters("/search", query);
|
||||
Navigation.NavigateTo(url);
|
||||
```
|
||||
|
||||
### Multiple Query Parameters
|
||||
|
||||
```csharp
|
||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
||||
var query = System.Web.HttpUtility.ParseQueryString(uri.Query);
|
||||
|
||||
var category = query["category"];
|
||||
var page = int.TryParse(query["page"], out var p) ? p : 1;
|
||||
var sort = query["sort"] ?? "name";
|
||||
```
|
||||
|
||||
**Usage:** `/products?category=electronics&page=2&sort=price`
|
||||
|
||||
## Router Configuration
|
||||
|
||||
The Router component in `App.razor` configures routing:
|
||||
|
||||
```csharp
|
||||
<!-- App.razor -->
|
||||
<Router AppAssembly="@typeof(App).Assembly"
|
||||
AdditionalAssemblies="@additionalAssemblies"
|
||||
OnNavigateAsync="@OnNavigateAsync">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
<PageTitle>@pageTitle</PageTitle>
|
||||
</Found>
|
||||
<NotFound>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<p>Page not found</p>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
|
||||
@code {
|
||||
private List<Assembly>? additionalAssemblies;
|
||||
private string pageTitle = "Loading...";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Load assemblies dynamically if needed
|
||||
additionalAssemblies = new List<Assembly>
|
||||
{
|
||||
typeof(SomeOtherAssembly).Assembly
|
||||
};
|
||||
}
|
||||
|
||||
private async Task OnNavigateAsync(NavigationContext context)
|
||||
{
|
||||
// Can be used for lazy loading assemblies
|
||||
// Not commonly needed
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Layouts
|
||||
|
||||
Layouts are parent components that wrap pages.
|
||||
|
||||
### Define a Layout
|
||||
|
||||
```csharp
|
||||
<!-- Layouts/MainLayout.razor -->
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<header>@Header</header>
|
||||
<nav>@Navigation</nav>
|
||||
|
||||
<main>@Body</main>
|
||||
|
||||
<footer>@Footer</footer>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public RenderFragment? Header { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? Navigation { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? Body { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? Footer { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Apply Layout to Page
|
||||
|
||||
```csharp
|
||||
@page "/products"
|
||||
@layout MainLayout
|
||||
|
||||
<h2>Products</h2>
|
||||
```
|
||||
|
||||
### Apply Layout to Multiple Pages
|
||||
|
||||
```csharp
|
||||
<!-- _Imports.razor -->
|
||||
@layout MainLayout
|
||||
```
|
||||
|
||||
Add this line to `_Imports.razor` to apply layout to all components in folder and below.
|
||||
|
||||
### Nested Layouts
|
||||
|
||||
```csharp
|
||||
<!-- AdminLayout inherits from MainLayout -->
|
||||
@inherits MainLayout
|
||||
|
||||
<aside>Admin sidebar</aside>
|
||||
@Body
|
||||
```
|
||||
|
||||
## Page Titles
|
||||
|
||||
Update page title (browser tab) dynamically:
|
||||
|
||||
```csharp
|
||||
@page "/products/{id}"
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>@title</PageTitle>
|
||||
|
||||
<h1>@title</h1>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? id { get; set; }
|
||||
|
||||
private string? title;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
title = await LoadProductTitleAsync(id);
|
||||
}
|
||||
|
||||
private async Task<string> LoadProductTitleAsync(string? id)
|
||||
{
|
||||
// Load from service
|
||||
return $"Product {id}";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Common Routing Patterns
|
||||
|
||||
### Master-Detail Pattern
|
||||
|
||||
```csharp
|
||||
@page "/products"
|
||||
@page "/products/{id}"
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr;">
|
||||
<ProductList OnSelectProduct="@SelectProduct" />
|
||||
@if (selectedId != null)
|
||||
{
|
||||
<ProductDetail Id="@selectedId" />
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? id { get; set; }
|
||||
|
||||
private string? selectedId;
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
selectedId = id;
|
||||
}
|
||||
|
||||
private void SelectProduct(string productId)
|
||||
{
|
||||
Navigation.NavigateTo($"/products/{productId}");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Breadcrumb Navigation
|
||||
|
||||
```csharp
|
||||
@page "/category/{categoryId}/product/{productId}"
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/">Home</a> /
|
||||
<a href="/category/@categoryId">@categoryName</a> /
|
||||
<span>@productName</span>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string? categoryId { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string? productId { get; set; }
|
||||
|
||||
private string? categoryName;
|
||||
private string? productName;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
categoryName = await LoadCategoryAsync(categoryId);
|
||||
productName = await LoadProductAsync(productId);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tab-Based Navigation
|
||||
|
||||
```csharp
|
||||
@page "/settings"
|
||||
|
||||
<div class="tabs">
|
||||
<NavLink href="/settings/profile" Match="NavLinkMatch.All">Profile</NavLink>
|
||||
<NavLink href="/settings/security" Match="NavLinkMatch.All">Security</NavLink>
|
||||
<NavLink href="/settings/notifications" Match="NavLinkMatch.All">Notifications</NavLink>
|
||||
</div>
|
||||
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(SettingsLayout)" />
|
||||
</Found>
|
||||
</Router>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [components-lifecycle.md](components-lifecycle.md) for parameter handling. See [authentication-authorization.md](authentication-authorization.md) for route authorization.
|
||||
@@ -0,0 +1,575 @@
|
||||
# Blazor State Management & Events
|
||||
|
||||
## Component State
|
||||
|
||||
State represents the data that a component manages and renders.
|
||||
|
||||
### Local Component State
|
||||
|
||||
```csharp
|
||||
@page "/counter"
|
||||
|
||||
<p>Count: @count</p>
|
||||
<button @onclick="Increment">Click me</button>
|
||||
|
||||
@code {
|
||||
private int count = 0;
|
||||
|
||||
private void Increment()
|
||||
{
|
||||
count++;
|
||||
// Re-render happens automatically after event handler
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**How it works:**
|
||||
- Blazor detects state change during event handler execution
|
||||
- Automatically calls `StateHasChanged()` after handler completes
|
||||
- Component re-renders with new state
|
||||
|
||||
### StateHasChanged() for External Updates
|
||||
|
||||
When state updates from outside Blazor's event system, call `StateHasChanged()` explicitly:
|
||||
|
||||
```csharp
|
||||
@implements IDisposable
|
||||
@inject IJSRuntime JS
|
||||
|
||||
private string? externalData;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
// Subscribe to external event
|
||||
JS.InvokeVoidAsync("subscribeToEvent", DotNetObjectReference.Create(this));
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public void NotifyUpdate(string data)
|
||||
{
|
||||
externalData = data;
|
||||
// Blazor doesn't know about JS update, must call explicitly
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
// Clean up external subscriptions
|
||||
}
|
||||
```
|
||||
|
||||
### Thread-Safe State Updates with InvokeAsync()
|
||||
|
||||
When updating state from background threads (timers, async tasks outside event handlers):
|
||||
|
||||
```csharp
|
||||
@implements IDisposable
|
||||
|
||||
private Timer? timer;
|
||||
private int count = 0;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
// Timer running on background thread
|
||||
timer = new Timer(_ => UpdateCount(), null, TimeSpan.Zero, TimeSpan.FromSeconds(1));
|
||||
}
|
||||
|
||||
private void UpdateCount()
|
||||
{
|
||||
// WRONG - can't update state from background thread directly
|
||||
// count++;
|
||||
|
||||
// CORRECT - use InvokeAsync to marshal to UI thread
|
||||
InvokeAsync(() =>
|
||||
{
|
||||
count++;
|
||||
StateHasChanged();
|
||||
});
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
timer?.Dispose();
|
||||
}
|
||||
```
|
||||
|
||||
### State Immutability Pattern
|
||||
|
||||
For complex state (objects, lists), follow immutability pattern:
|
||||
|
||||
```csharp
|
||||
@code {
|
||||
private List<Item> items = [];
|
||||
|
||||
// WRONG - mutates in place, may not trigger re-render
|
||||
private void AddItem()
|
||||
{
|
||||
items.Add(new Item { Name = "New" });
|
||||
}
|
||||
|
||||
// CORRECT - create new collection
|
||||
private void AddItem()
|
||||
{
|
||||
items = items.Append(new Item { Name = "New" }).ToList();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Event Handling
|
||||
|
||||
### Basic Click Handler
|
||||
|
||||
```csharp
|
||||
<button @onclick="HandleClick">Click me</button>
|
||||
|
||||
@code {
|
||||
private void HandleClick()
|
||||
{
|
||||
// Event handler logic
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### EventCallback Pattern (Recommended)
|
||||
|
||||
EventCallback is the proper way to notify parent components of events:
|
||||
|
||||
```csharp
|
||||
<!-- Child component -->
|
||||
<button @onclick="OnClick">Click me</button>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public EventCallback<string> OnValueChanged { get; set; }
|
||||
|
||||
private async Task OnClick()
|
||||
{
|
||||
await OnValueChanged.InvokeAsync("New Value");
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Parent component -->
|
||||
<ChildComponent OnValueChanged="@HandleValueChanged" />
|
||||
|
||||
@code {
|
||||
private void HandleValueChanged(string value)
|
||||
{
|
||||
// Handle value change
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### EventCallback with Arguments
|
||||
|
||||
```csharp
|
||||
<!-- Child -->
|
||||
<button @onclick="NotifyParent">Send Data</button>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public EventCallback<CustomArgs> OnDataChanged { get; set; }
|
||||
|
||||
private async Task NotifyParent()
|
||||
{
|
||||
var args = new CustomArgs { Id = 123, Name = "Test" };
|
||||
await OnValueChanged.InvokeAsync(args);
|
||||
}
|
||||
}
|
||||
|
||||
public class CustomArgs
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string? Name { get; set; }
|
||||
}
|
||||
|
||||
<!-- Parent -->
|
||||
<ChildComponent OnDataChanged="@(args => HandleData(args.Id, args.Name))" />
|
||||
|
||||
@code {
|
||||
private void HandleData(int id, string? name)
|
||||
{
|
||||
// Process data
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Async Event Handlers
|
||||
|
||||
Always use async properly with EventCallback:
|
||||
|
||||
```csharp
|
||||
<!-- Good - async handler, proper awaiting -->
|
||||
<button @onclick="SaveAsync">Save</button>
|
||||
|
||||
@code {
|
||||
private async Task SaveAsync()
|
||||
{
|
||||
isLoading = true;
|
||||
try
|
||||
{
|
||||
await Service.SaveDataAsync(data);
|
||||
successMessage = "Saved!";
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
errorMessage = ex.Message;
|
||||
}
|
||||
finally
|
||||
{
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Common Event Handlers
|
||||
|
||||
```csharp
|
||||
<!-- Click -->
|
||||
<button @onclick="HandleClick">Click</button>
|
||||
|
||||
<!-- Double click -->
|
||||
<div @ondblclick="HandleDoubleClick">Double click</div>
|
||||
|
||||
<!-- Focus/Blur -->
|
||||
<input @onfocus="HandleFocus" @onblur="HandleBlur" />
|
||||
|
||||
<!-- Key events -->
|
||||
<input @onkeydown="HandleKeyDown" @onkeyup="HandleKeyUp" />
|
||||
|
||||
<!-- Mouse events -->
|
||||
<div @onmouseover="HandleMouseOver" @onmouseout="HandleMouseOut" />
|
||||
|
||||
<!-- Change -->
|
||||
<select @onchange="HandleChange">
|
||||
<option>Option 1</option>
|
||||
</select>
|
||||
|
||||
<!-- Submit -->
|
||||
<form @onsubmit="HandleSubmit">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### preventDefault and stopPropagation
|
||||
|
||||
```csharp
|
||||
<!-- Prevent form submission -->
|
||||
<form @onsubmit:preventDefault="true" @onsubmit="HandleSubmit">
|
||||
<input type="text" />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<!-- Stop event propagation -->
|
||||
<div @onclick="ParentClick">
|
||||
<button @onclick="ChildClick" @onclick:stopPropagation="true">
|
||||
Click - won't bubble
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Data Binding
|
||||
|
||||
### Two-Way Binding (@bind)
|
||||
|
||||
```csharp
|
||||
<input @bind="name" />
|
||||
<p>You entered: @name</p>
|
||||
|
||||
@code {
|
||||
private string name = "";
|
||||
}
|
||||
```
|
||||
|
||||
**How it works:**
|
||||
- `@bind` = `@bind-value` + `@bind-value:event="onchange"`
|
||||
- Sets value property, listens to onchange event
|
||||
- Automatic two-way synchronization
|
||||
|
||||
### Custom Events with @bind
|
||||
|
||||
```csharp
|
||||
<input @bind="value" @bind:event="oninput" />
|
||||
|
||||
@code {
|
||||
private string value = "";
|
||||
}
|
||||
```
|
||||
|
||||
Events: `onchange` (default), `oninput` (real-time), `onblur`, etc.
|
||||
|
||||
### Numeric Binding
|
||||
|
||||
```csharp
|
||||
<input @bind="age" @bind:culture="CultureInfo.InvariantCulture" />
|
||||
|
||||
@code {
|
||||
private int age = 0;
|
||||
}
|
||||
```
|
||||
|
||||
### DateTime Binding
|
||||
|
||||
```csharp
|
||||
<input type="date" @bind="date" />
|
||||
<input type="datetime-local" @bind="dateTime" />
|
||||
|
||||
@code {
|
||||
private DateOnly date = DateOnly.FromDateTime(DateTime.Now);
|
||||
private DateTime dateTime = DateTime.Now;
|
||||
}
|
||||
```
|
||||
|
||||
### Binding with Format Specifiers
|
||||
|
||||
```csharp
|
||||
<input @bind="price" @bind:format="N2" />
|
||||
<p>Price: @price.ToString("C")</p>
|
||||
|
||||
@code {
|
||||
private decimal price = 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Bind Modifiers
|
||||
|
||||
```csharp
|
||||
<!-- @bind:get / @bind:set for custom logic -->
|
||||
<input @bind="@value"
|
||||
@bind:get="parsedValue"
|
||||
@bind:set="@SetValue" />
|
||||
|
||||
@code {
|
||||
private string value = "";
|
||||
|
||||
private string parsedValue
|
||||
{
|
||||
get => value.ToUpper();
|
||||
}
|
||||
|
||||
private void SetValue(string val)
|
||||
{
|
||||
value = val.ToLower();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Cascading Values with Events
|
||||
|
||||
Provide shared state and event callbacks to child components:
|
||||
|
||||
```csharp
|
||||
<!-- Parent - AppState provider -->
|
||||
<CascadingValue Value="@appState">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
|
||||
@code {
|
||||
private AppState appState = new();
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
}
|
||||
|
||||
<!-- AppState service -->
|
||||
public class AppState
|
||||
{
|
||||
private string _username = "";
|
||||
public event Action? OnChange;
|
||||
|
||||
public string Username
|
||||
{
|
||||
get => _username;
|
||||
set
|
||||
{
|
||||
if (_username != value)
|
||||
{
|
||||
_username = value;
|
||||
NotifyStateChanged();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public void NotifyStateChanged() => OnChange?.Invoke();
|
||||
}
|
||||
|
||||
<!-- Child component - subscribe to state changes -->
|
||||
@implements IDisposable
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
public AppState? AppState { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (AppState != null)
|
||||
{
|
||||
AppState.OnChange += StateHasChanged;
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
if (AppState != null)
|
||||
{
|
||||
AppState.OnChange -= StateHasChanged;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Service-Based State Management
|
||||
|
||||
For application-wide state, use services:
|
||||
|
||||
```csharp
|
||||
// Program.cs
|
||||
builder.Services.AddScoped<AppState>();
|
||||
|
||||
// AppState service
|
||||
public class AppState
|
||||
{
|
||||
private string _theme = "light";
|
||||
private User? _currentUser;
|
||||
|
||||
public event Func<Task>? OnStateChange;
|
||||
|
||||
public string Theme
|
||||
{
|
||||
get => _theme;
|
||||
set
|
||||
{
|
||||
if (_theme != value)
|
||||
{
|
||||
_theme = value;
|
||||
NotifyStateChanged();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public User? CurrentUser
|
||||
{
|
||||
get => _currentUser;
|
||||
set
|
||||
{
|
||||
if (_currentUser != value)
|
||||
{
|
||||
_currentUser = value;
|
||||
NotifyStateChanged();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task NotifyStateChanged()
|
||||
{
|
||||
if (OnStateChange != null)
|
||||
{
|
||||
await OnStateChange.Invoke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Component using AppState
|
||||
@inject AppState AppState
|
||||
@implements IAsyncDisposable
|
||||
|
||||
@code {
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
AppState.OnStateChange += StateHasChanged;
|
||||
AppState.CurrentUser = await LoadUserAsync();
|
||||
}
|
||||
|
||||
async ValueTask IAsyncDisposable.DisposeAsync()
|
||||
{
|
||||
if (AppState != null)
|
||||
{
|
||||
AppState.OnStateChange -= StateHasChanged;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Parent-Child Communication Pattern
|
||||
|
||||
**Data flow:** Parents pass data DOWN via parameters, children notify UP via events.
|
||||
|
||||
```csharp
|
||||
<!-- Parent -->
|
||||
@page "/parent"
|
||||
|
||||
<h2>Parent: @selectedId</h2>
|
||||
<Child SelectedId="@selectedId"
|
||||
OnIdChanged="@HandleIdChanged" />
|
||||
|
||||
@code {
|
||||
private int selectedId = 0;
|
||||
|
||||
private async Task HandleIdChanged(int newId)
|
||||
{
|
||||
selectedId = newId;
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Child -->
|
||||
<select @onchange="OnSelectionChanged">
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<option value="@item.Id">@item.Name</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public int SelectedId { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<int> OnIdChanged { get; set; }
|
||||
|
||||
private List<Item> Items { get; set; } = [];
|
||||
|
||||
private async Task OnSelectionChanged(ChangeEventArgs args)
|
||||
{
|
||||
var newId = int.Parse(args.Value?.ToString() ?? "0");
|
||||
await OnIdChanged.InvokeAsync(newId);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Always Use EventCallback
|
||||
- ✅ `[Parameter] public EventCallback OnEvent { get; set; }`
|
||||
- ❌ `[Parameter] public Action? OnEvent { get; set; }`
|
||||
|
||||
EventCallback handles async properly and integrates better with Blazor's rendering pipeline.
|
||||
|
||||
### Keep Event Handlers Focused
|
||||
- Do one thing per handler
|
||||
- Move complex logic to services
|
||||
- Keep components as thin view layers
|
||||
|
||||
### Unsubscribe from Events
|
||||
Always clean up subscriptions to prevent memory leaks:
|
||||
|
||||
```csharp
|
||||
@implements IDisposable
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Service.OnChange += HandleChange;
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
Service.OnChange -= HandleChange;
|
||||
}
|
||||
```
|
||||
|
||||
### Use Immutable Updates
|
||||
- Create new objects/collections for state updates
|
||||
- Don't mutate objects in place
|
||||
- Helps with change detection and debugging
|
||||
|
||||
---
|
||||
|
||||
**Related Resources:** See [components-lifecycle.md](components-lifecycle.md) for component parameters and cascading values. See [forms-validation.md](forms-validation.md) for form event handling.
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
name: nexus-architecture-standards
|
||||
description: Guidelines and automated checks for maintaining Clean Architecture and SaaS standards in the NexusReader project.
|
||||
tags: [Architecture, CleanArchitecture, .NET, MediatR, SaaS, MultiTenancy]
|
||||
version: 1.0.0
|
||||
---
|
||||
|
||||
# NexusReader Architecture Standards
|
||||
|
||||
This skill defines the architectural guardrails for the NexusReader project to ensure consistency, scalability, and security.
|
||||
|
||||
## Core Rules
|
||||
|
||||
### 1. Clean Architecture Layers
|
||||
- **Domain**: Pure business logic, entities, and enums. Zero dependencies on other layers.
|
||||
- **Application**: Use cases, MediatR handlers, and interfaces. Depends ONLY on Domain.
|
||||
- **Infrastructure**: Implementation details (DB context, AI services, Auth). Depends on Application and Domain.
|
||||
- **Web/Mobile**: Presentation layer. Depends on Application (and Infrastructure for DI setup).
|
||||
|
||||
> [!CAUTION]
|
||||
> **Application MUST NOT depend on Infrastructure.** This is a common failure mode. Always use abstractions (interfaces) in Application and implement them in Infrastructure.
|
||||
|
||||
### 2. Multi-Tenancy (Tenant Isolation)
|
||||
- Every entity related to user data MUST have a `TenantId` property.
|
||||
- Every query MUST filter by `TenantId` to prevent data leakage.
|
||||
- Default `TenantId` is "global" for shared resources.
|
||||
|
||||
### 3. Error Handling
|
||||
- Use `FluentResults` (`Result<T>`) for all Application services and handlers.
|
||||
- Avoid throwing exceptions for expected business failures; use `Result.Fail()`.
|
||||
|
||||
- **Commands**: State-changing operations. Should return `Result` or `Result<T>`.
|
||||
+
|
||||
+### 5. Async Operations (Zero Tolerance for `async void`)
|
||||
+- All asynchronous operations MUST return `Task` or `ValueTask`.
|
||||
+- Event handlers MUST use `Func<Task>` or async-compatible patterns.
|
||||
+- UI components MUST await all service calls and use `InvokeAsync(StateHasChanged)` for state updates within async contexts.
|
||||
|
||||
### 6. Database Schema Changes
|
||||
- Every change to a Domain entity or DbContext MUST be followed by the generation of a new EF Core migration.
|
||||
- **Mandatory Commands**:
|
||||
- `dotnet ef migrations add <MigrationName> --project src/NexusReader.Data --startup-project src/NexusReader.Web`
|
||||
- `dotnet ef database update --project src/NexusReader.Data --startup-project src/NexusReader.Web`
|
||||
- Ensure the migration is applied to all local development environments before proceeding with feature verification.
|
||||
|
||||
## Audit Scripts
|
||||
- [ArchCheck.sh](scripts/arch_check.sh): A shell script to scan for illegal cross-layer imports.
|
||||
|
||||
## Reference Materials
|
||||
- [Layer Dependency Matrix](artifacts/layer_matrix.md)
|
||||
@@ -1,15 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Simple script to check for Clean Architecture violations in NexusReader
|
||||
|
||||
APP_DIR="src/NexusReader.Application"
|
||||
VIOLATIONS=$(grep -r "using NexusReader.Infrastructure" "$APP_DIR")
|
||||
|
||||
if [ -n "$VIOLATIONS" ]; then
|
||||
echo "ERROR: Clean Architecture violations found in $APP_DIR:"
|
||||
echo "$VIOLATIONS"
|
||||
exit 1
|
||||
else
|
||||
echo "SUCCESS: No illegal Infrastructure dependencies found in Application layer."
|
||||
exit 0
|
||||
fi
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
name: nexus-dotnet-architect
|
||||
description: Guides the development of production-grade .NET 10 APIs and microservices for the Nexus project, enforcing Clean Architecture, CQRS, Result Pattern, Mapster, no async void, specific project standards like Multi-Tenancy and EF Core migrations, and backend development best practices like caching, resilience, observability, and AI-powered code analysis. Use when building backend services or APIs within the Nexus ecosystem.
|
||||
---
|
||||
|
||||
# Nexus Dotnet Architect Skill
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides expert guidance for developing production-grade .NET 10 APIs and microservices within the Nexus project ecosystem. It enforces a strict adherence to the defined architecture, technical constraints, and development workflow, ensuring high performance, maintainability, and scalability.
|
||||
|
||||
## Core Principles & Constraints
|
||||
|
||||
This skill mandates the following architectural and development standards:
|
||||
|
||||
### Architecture
|
||||
|
||||
- **Clean Architecture:** Strict separation of concerns: `Domain` -> `Application` <- `Infrastructure`.
|
||||
- **CQRS Pattern:** Mandatory use of `MediatR`. All business logic must reside in handlers, not UI components.
|
||||
- **Result Pattern:** Zero exceptions for flow control. All handlers must return `Result<T>` via `FluentResult`.
|
||||
- **Mapping:** Exclusive use of `Mapster`. No other mapping libraries are permitted.
|
||||
|
||||
### Technical Constraints
|
||||
|
||||
- **Platform:** Target .NET 10 with **Native AOT** compatibility. Optimize for mobile performance.
|
||||
- **UI Framework:** Blazor Component Model. Use isolated Razor Components (`.razor` + `.razor.css`). No raw HTML/CSS in components.
|
||||
- **Directory Structure:** `/src` for application code and `/tests` for testing code at the solution root level.
|
||||
|
||||
### Development Workflow
|
||||
|
||||
- **Verification-Led:** Define tests and verification steps *before* writing feature code.
|
||||
- **Step-by-Step Execution:** Break complex tasks into manageable, verifiable chunks.
|
||||
- **Layer Integrity:** Constantly check for and prevent illegal cross-layer dependencies (e.g., `Application` depending on `Infrastructure`).
|
||||
- **Mandatory Build Gate:** After **every** code change, run `dotnet build NexusReader.slnx --no-restore` from the solution root. The agent must not proceed if there are any `error CS*` compiler errors. Build warnings are acceptable.
|
||||
|
||||
### API & Microservice Focus
|
||||
|
||||
- Develop production-grade APIs and microservices using C# and ASP.NET Core.
|
||||
- Leverage modern C# features.
|
||||
- Implement robust data access patterns, including EF Core and Dapper.
|
||||
- Incorporate caching strategies and performance optimization.
|
||||
|
||||
## Project Specific Standards
|
||||
|
||||
### Multi-Tenancy (Tenant Isolation)
|
||||
|
||||
- Every entity related to user data MUST have a `TenantId` property.
|
||||
- Every query MUST filter by `TenantId` to prevent data leakage.
|
||||
- Default `TenantId` is "global" for shared resources.
|
||||
|
||||
### Database Schema Changes
|
||||
|
||||
- Every change to a Domain entity or DbContext MUST be followed by the generation of a new EF Core migration.
|
||||
- **Mandatory Commands**:
|
||||
- `dotnet ef migrations add <MigrationName> --project src/NexusReader.Data --startup-project src/NexusReader.Web`
|
||||
- `dotnet ef database update --project src/NexusReader.Data --startup-project src/NexusReader.Web`
|
||||
- Ensure the migration is applied to all local development environments before proceeding with feature verification.
|
||||
|
||||
### Auditing & Verification
|
||||
|
||||
- **Audit Scripts:** Use `src/.agent/skills/nexus-architecture-standards/scripts/arch_check.sh` (or equivalent logic) to scan for illegal cross-layer imports. This script should be run regularly to maintain layer integrity.
|
||||
- **Reference Materials:** Refer to `src/.agent/skills/nexus-architecture-standards/artifacts/layer_matrix.md` for a clear definition of layer dependencies.
|
||||
|
||||
## Backend Development Patterns
|
||||
|
||||
### Architecture & Design
|
||||
|
||||
- **API Design:** Follow RESTful principles, use clear and consistent naming conventions.
|
||||
- **Microservices Principles:** Design for independent deployability, scalability, and fault isolation.
|
||||
- **Domain-Driven Design (DDD):** Apply DDD concepts where appropriate to model complex business domains.
|
||||
|
||||
### Dependency Injection
|
||||
|
||||
- Utilize the built-in .NET Core Dependency Injection container.
|
||||
- Register services with appropriate lifetimes (Scoped, Singleton, Transient).
|
||||
- Prefer constructor injection.
|
||||
|
||||
### Caching
|
||||
|
||||
- Implement distributed caching using **Redis** for improved performance and reduced database load.
|
||||
- Apply caching strategies judiciously (e.g., cache-aside, read-through, write-through).
|
||||
|
||||
### Database Optimization
|
||||
|
||||
- **Entity Framework Core (EF Core):** Optimize queries, use `AsNoTracking()`, leverage projections, and manage migrations effectively.
|
||||
- **Dapper:** Utilize Dapper for performance-critical queries where EF Core might be too slow.
|
||||
- **Connection Pooling:** Ensure database connections are managed efficiently.
|
||||
|
||||
### Resilience Patterns
|
||||
|
||||
- **Retry Policies:** Implement retry logic for transient failures (e.g., network issues, temporary service unavailability) using libraries like Polly.
|
||||
- **Circuit Breaker:** Protect against cascading failures by implementing circuit breaker patterns.
|
||||
- **Timeouts:** Configure appropriate timeouts for external service calls and database operations.
|
||||
|
||||
### Observability
|
||||
|
||||
- **Logging:** Implement structured logging using a robust logging framework (e.g., Serilog).
|
||||
- **Monitoring:** Integrate with monitoring solutions (e.g., Application Insights, Prometheus) for metrics and performance tracking.
|
||||
- **Distributed Tracing:** Enable distributed tracing to track requests across multiple services.
|
||||
|
||||
## Code Review & Quality Assurance
|
||||
|
||||
### Static Analysis
|
||||
|
||||
- Scan code for common bugs, anti-patterns, and style violations.
|
||||
- Ensure adherence to project coding standards.
|
||||
|
||||
### Security Review (OWASP)
|
||||
|
||||
- Identify potential security vulnerabilities based on OWASP Top 10 guidelines.
|
||||
- Check for common security flaws like injection vulnerabilities, broken authentication, etc.
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
- Analyze code for performance bottlenecks.
|
||||
- Suggest improvements for efficiency and resource utilization.
|
||||
|
||||
### Infrastructure-as-Code (IaC) Assessment
|
||||
|
||||
- Review IaC definitions (e.g., Terraform, Dockerfile) for security and best practices.
|
||||
|
||||
## Review Process
|
||||
|
||||
The code reviewer follows a structured, 10-step approach to provide feedback:
|
||||
|
||||
1. **Understand Context:** Analyze the code and its purpose.
|
||||
2. **Static Analysis:** Perform initial checks for common issues.
|
||||
3. **Security Scan:** Identify potential security vulnerabilities.
|
||||
4. **Performance Check:** Evaluate for performance bottlenecks.
|
||||
5. **IaC Review:** Assess infrastructure code if applicable.
|
||||
6. **Best Practices Check:** Verify adherence to established patterns.
|
||||
7. **Constructive Feedback:** Provide clear, actionable suggestions.
|
||||
8. **Prioritization:** Rank feedback by severity (critical, high, medium, low).
|
||||
9. **Educational Tone:** Explain *why* a change is recommended.
|
||||
10. **Final Summary:** Consolidate findings and recommendations.
|
||||
|
||||
## Resources
|
||||
|
||||
- **EF Core Best Practices:** See `references/ef-core-best-practices.md` for detailed guidance on optimizing EF Core usage.
|
||||
- **Implementation Playbook:** Refer to `resources/implementation-playbook.md` for detailed examples and implementation guidance.
|
||||
@@ -0,0 +1,355 @@
|
||||
# Entity Framework Core Best Practices
|
||||
|
||||
Performance optimization and best practices for EF Core in production applications.
|
||||
|
||||
## Query Optimization
|
||||
|
||||
### 1. Use AsNoTracking for Read-Only Queries
|
||||
|
||||
```csharp
|
||||
// ✅ Good - No change tracking overhead
|
||||
var products = await _context.Products
|
||||
.AsNoTracking()
|
||||
.Where(p => p.CategoryId == categoryId)
|
||||
.ToListAsync(ct);
|
||||
|
||||
// ❌ Bad - Unnecessary tracking for read-only data
|
||||
var products = await _context.Products
|
||||
.Where(p => p.CategoryId == categoryId)
|
||||
.ToListAsync(ct);
|
||||
```
|
||||
|
||||
### 2. Select Only Needed Columns
|
||||
|
||||
```csharp
|
||||
// ✅ Good - Project to DTO
|
||||
var products = await _context.Products
|
||||
.AsNoTracking()
|
||||
.Where(p => p.CategoryId == categoryId)
|
||||
.Select(p => new ProductDto
|
||||
{
|
||||
Id = p.Id,
|
||||
Name = p.Name,
|
||||
Price = p.Price
|
||||
})
|
||||
.ToListAsync(ct);
|
||||
|
||||
// ❌ Bad - Fetching all columns
|
||||
var products = await _context.Products
|
||||
.Where(p => p.CategoryId == categoryId)
|
||||
.ToListAsync(ct);
|
||||
```
|
||||
|
||||
### 3. Avoid N+1 Queries with Eager Loading
|
||||
|
||||
```csharp
|
||||
// ✅ Good - Single query with Include
|
||||
var orders = await _context.Orders
|
||||
.AsNoTracking()
|
||||
.Include(o => o.Items)
|
||||
.ThenInclude(i => i.Product)
|
||||
.Where(o => o.CustomerId == customerId)
|
||||
.ToListAsync(ct);
|
||||
|
||||
// ❌ Bad - N+1 queries (lazy loading)
|
||||
var orders = await _context.Orders
|
||||
.Where(o => o.CustomerId == customerId)
|
||||
.ToListAsync(ct);
|
||||
|
||||
foreach (var order in orders)
|
||||
{
|
||||
// Each iteration triggers a separate query!
|
||||
var items = order.Items.ToList();
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Use Split Queries for Large Includes
|
||||
|
||||
```csharp
|
||||
// ✅ Good - Prevents cartesian explosion
|
||||
var orders = await _context.Orders
|
||||
.AsNoTracking()
|
||||
.Include(o => o.Items)
|
||||
.Include(o => o.Payments)
|
||||
.Include(o => o.ShippingHistory)
|
||||
.AsSplitQuery() // Executes as multiple queries
|
||||
.Where(o => o.CustomerId == customerId)
|
||||
.ToListAsync(ct);
|
||||
```
|
||||
|
||||
### 5. Use Compiled Queries for Hot Paths
|
||||
|
||||
```csharp
|
||||
public class ProductRepository
|
||||
{
|
||||
// Compile once, reuse many times
|
||||
private static readonly Func<AppDbContext, string, Task<Product?>> GetByIdQuery =
|
||||
EF.CompileAsyncQuery((AppDbContext ctx, string id) =>
|
||||
ctx.Products.AsNoTracking().FirstOrDefault(p => p.Id == id));
|
||||
|
||||
private static readonly Func<AppDbContext, int, IAsyncEnumerable<Product>> GetByCategoryQuery =
|
||||
EF.CompileAsyncQuery((AppDbContext ctx, int categoryId) =>
|
||||
ctx.Products.AsNoTracking().Where(p => p.CategoryId == categoryId));
|
||||
|
||||
public Task<Product?> GetByIdAsync(string id, CancellationToken ct)
|
||||
=> GetByIdQuery(_context, id);
|
||||
|
||||
public IAsyncEnumerable<Product> GetByCategoryAsync(int categoryId)
|
||||
=> GetByCategoryQuery(_context, categoryId);
|
||||
}
|
||||
```
|
||||
|
||||
## Batch Operations
|
||||
|
||||
### 6. Use ExecuteUpdate/ExecuteDelete (.NET 7+)
|
||||
|
||||
```csharp
|
||||
// ✅ Good - Single SQL UPDATE
|
||||
await _context.Products
|
||||
.Where(p => p.CategoryId == oldCategoryId)
|
||||
.ExecuteUpdateAsync(s => s
|
||||
.SetProperty(p => p.CategoryId, newCategoryId)
|
||||
.SetProperty(p => p.UpdatedAt, DateTime.UtcNow),
|
||||
ct);
|
||||
|
||||
// ✅ Good - Single SQL DELETE
|
||||
await _context.Products
|
||||
.Where(p => p.IsDeleted && p.UpdatedAt < cutoffDate)
|
||||
.ExecuteDeleteAsync(ct);
|
||||
|
||||
// ❌ Bad - Loads all entities into memory
|
||||
var products = await _context.Products
|
||||
.Where(p => p.CategoryId == oldCategoryId)
|
||||
.ToListAsync(ct);
|
||||
|
||||
foreach (var product in products)
|
||||
{
|
||||
product.CategoryId = newCategoryId;
|
||||
}
|
||||
await _context.SaveChangesAsync(ct);
|
||||
```
|
||||
|
||||
### 7. Bulk Insert with EFCore.BulkExtensions
|
||||
|
||||
```csharp
|
||||
// Using EFCore.BulkExtensions package
|
||||
var products = GenerateLargeProductList();
|
||||
|
||||
// ✅ Good - Bulk insert (much faster for large datasets)
|
||||
await _context.BulkInsertAsync(products, ct);
|
||||
|
||||
// ❌ Bad - Individual inserts
|
||||
foreach (var product in products)
|
||||
{
|
||||
_context.Products.Add(product);
|
||||
}
|
||||
await _context.SaveChangesAsync(ct);
|
||||
```
|
||||
|
||||
## Connection Management
|
||||
|
||||
### 8. Configure Connection Pooling
|
||||
|
||||
```csharp
|
||||
services.AddDbContext<AppDbContext>(options =>
|
||||
{
|
||||
options.UseSqlServer(connectionString, sqlOptions =>
|
||||
{
|
||||
sqlOptions.EnableRetryOnFailure(
|
||||
maxRetryCount: 3,
|
||||
maxRetryDelay: TimeSpan.FromSeconds(10),
|
||||
errorNumbersToAdd: null);
|
||||
|
||||
sqlOptions.CommandTimeout(30);
|
||||
});
|
||||
|
||||
// Performance settings
|
||||
options.UseQueryTrackingBehavior(QueryTrackingBehavior.NoTracking);
|
||||
|
||||
// Development only
|
||||
if (env.IsDevelopment())
|
||||
{
|
||||
options.EnableSensitiveDataLogging();
|
||||
options.EnableDetailedErrors();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 9. Use DbContext Pooling
|
||||
|
||||
```csharp
|
||||
// ✅ Good - Context pooling (reduces allocation overhead)
|
||||
services.AddDbContextPool<AppDbContext>(options =>
|
||||
{
|
||||
options.UseSqlServer(connectionString);
|
||||
}, poolSize: 128);
|
||||
|
||||
// Instead of AddDbContext
|
||||
```
|
||||
|
||||
## Concurrency and Transactions
|
||||
|
||||
### 10. Handle Concurrency with Row Versioning
|
||||
|
||||
```csharp
|
||||
public class Product
|
||||
{
|
||||
public string Id { get; set; }
|
||||
public string Name { get; set; }
|
||||
|
||||
[Timestamp]
|
||||
public byte[] RowVersion { get; set; } // SQL Server rowversion
|
||||
}
|
||||
|
||||
// Or with Fluent API
|
||||
builder.Property(p => p.RowVersion)
|
||||
.IsRowVersion();
|
||||
|
||||
// Handle concurrency conflicts
|
||||
try
|
||||
{
|
||||
await _context.SaveChangesAsync(ct);
|
||||
}
|
||||
catch (DbUpdateConcurrencyException ex)
|
||||
{
|
||||
var entry = ex.Entries.Single();
|
||||
var databaseValues = await entry.GetDatabaseValuesAsync(ct);
|
||||
|
||||
if (databaseValues == null)
|
||||
{
|
||||
// Entity was deleted
|
||||
throw new NotFoundException("Product was deleted by another user");
|
||||
}
|
||||
|
||||
// Client wins - overwrite database values
|
||||
entry.OriginalValues.SetValues(databaseValues);
|
||||
await _context.SaveChangesAsync(ct);
|
||||
}
|
||||
```
|
||||
|
||||
### 11. Use Explicit Transactions When Needed
|
||||
|
||||
```csharp
|
||||
await using var transaction = await _context.Database.BeginTransactionAsync(ct);
|
||||
|
||||
try
|
||||
{
|
||||
// Multiple operations
|
||||
_context.Orders.Add(order);
|
||||
await _context.SaveChangesAsync(ct);
|
||||
|
||||
await _context.OrderItems.AddRangeAsync(items, ct);
|
||||
await _context.SaveChangesAsync(ct);
|
||||
|
||||
await _paymentService.ProcessAsync(order.Id, ct);
|
||||
|
||||
await transaction.CommitAsync(ct);
|
||||
}
|
||||
catch
|
||||
{
|
||||
await transaction.RollbackAsync(ct);
|
||||
throw;
|
||||
}
|
||||
```
|
||||
|
||||
## Indexing Strategy
|
||||
|
||||
### 12. Create Indexes for Query Patterns
|
||||
|
||||
```csharp
|
||||
public class ProductConfiguration : IEntityTypeConfiguration<Product>
|
||||
{
|
||||
public void Configure(EntityTypeBuilder<Product> builder)
|
||||
{
|
||||
// Unique index
|
||||
builder.HasIndex(p => p.Sku)
|
||||
.IsUnique();
|
||||
|
||||
// Composite index for common query patterns
|
||||
builder.HasIndex(p => new { p.CategoryId, p.Name });
|
||||
|
||||
// Filtered index (SQL Server)
|
||||
builder.HasIndex(p => p.Price)
|
||||
.HasFilter("[IsDeleted] = 0");
|
||||
|
||||
// Include columns for covering index
|
||||
builder.HasIndex(p => p.CategoryId)
|
||||
.IncludeProperties(p => new { p.Name, p.Price });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Common Anti-Patterns to Avoid
|
||||
|
||||
### ❌ Calling ToList() Too Early
|
||||
|
||||
```csharp
|
||||
// ❌ Bad - Materializes all products then filters in memory
|
||||
var products = _context.Products.ToList()
|
||||
.Where(p => p.Price > 100);
|
||||
|
||||
// ✅ Good - Filter in SQL
|
||||
var products = await _context.Products
|
||||
.Where(p => p.Price > 100)
|
||||
.ToListAsync(ct);
|
||||
```
|
||||
|
||||
### ❌ Using Contains with Large Collections
|
||||
|
||||
```csharp
|
||||
// ❌ Bad - Generates massive IN clause
|
||||
var ids = GetThousandsOfIds();
|
||||
var products = await _context.Products
|
||||
.Where(p => ids.Contains(p.Id))
|
||||
.ToListAsync(ct);
|
||||
|
||||
// ✅ Good - Use temp table or batch queries
|
||||
var products = new List<Product>();
|
||||
foreach (var batch in ids.Chunk(100))
|
||||
{
|
||||
var batchResults = await _context.Products
|
||||
.Where(p => batch.Contains(p.Id))
|
||||
.ToListAsync(ct);
|
||||
products.AddRange(batchResults);
|
||||
}
|
||||
```
|
||||
|
||||
### ❌ String Concatenation in Queries
|
||||
|
||||
```csharp
|
||||
// ❌ Bad - Can't use index
|
||||
var products = await _context.Products
|
||||
.Where(p => (p.FirstName + " " + p.LastName).Contains(searchTerm))
|
||||
.ToListAsync(ct);
|
||||
|
||||
// ✅ Good - Use computed column with index
|
||||
builder.Property(p => p.FullName)
|
||||
.HasComputedColumnSql("[FirstName] + ' ' + [LastName]");
|
||||
builder.HasIndex(p => p.FullName);
|
||||
```
|
||||
|
||||
## Monitoring and Diagnostics
|
||||
|
||||
```csharp
|
||||
// Log slow queries
|
||||
services.AddDbContext<AppDbContext>(options =>
|
||||
{
|
||||
options.UseSqlServer(connectionString);
|
||||
|
||||
options.LogTo(
|
||||
filter: (eventId, level) => eventId.Id == CoreEventId.QueryExecutionPlanned.Id,
|
||||
logger: (eventData) =>
|
||||
{
|
||||
if (eventData is QueryExpressionEventData queryData)
|
||||
{
|
||||
var duration = queryData.Duration;
|
||||
if (duration > TimeSpan.FromSeconds(1))
|
||||
{
|
||||
_logger.LogWarning("Slow query detected: {Duration}ms - {Query}",
|
||||
duration.TotalMilliseconds,
|
||||
queryData.Expression);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,801 @@
|
||||
# .NET Backend Development Patterns Implementation Playbook
|
||||
|
||||
This file contains detailed patterns, checklists, and code samples referenced by the skill.
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### 1. Project Structure (Clean Architecture)
|
||||
|
||||
```
|
||||
src/
|
||||
├── Domain/ # Core business logic (no dependencies)
|
||||
│ ├── Entities/
|
||||
│ ├── Interfaces/
|
||||
│ ├── Exceptions/
|
||||
│ └── ValueObjects/
|
||||
├── Application/ # Use cases, DTOs, validation
|
||||
│ ├── Services/
|
||||
│ ├── DTOs/
|
||||
│ ├── Validators/
|
||||
│ └── Interfaces/
|
||||
├── Infrastructure/ # External implementations
|
||||
│ ├── Data/ # EF Core, Dapper repositories
|
||||
│ ├── Caching/ # Redis, Memory cache
|
||||
│ ├── External/ # HTTP clients, third-party APIs
|
||||
│ └── DependencyInjection/ # Service registration
|
||||
└── Api/ # Entry point
|
||||
├── Controllers/ # Or MinimalAPI endpoints
|
||||
├── Middleware/
|
||||
├── Filters/
|
||||
└── Program.cs
|
||||
```
|
||||
|
||||
### 2. Dependency Injection Patterns
|
||||
|
||||
```csharp
|
||||
// Service registration by lifetime
|
||||
public static class ServiceCollectionExtensions
|
||||
{
|
||||
public static IServiceCollection AddApplicationServices(
|
||||
this IServiceCollection services,
|
||||
IConfiguration configuration)
|
||||
{
|
||||
// Scoped: One instance per HTTP request
|
||||
services.AddScoped<IProductService, ProductService>();
|
||||
services.AddScoped<IOrderService, OrderService>();
|
||||
|
||||
// Singleton: One instance for app lifetime
|
||||
services.AddSingleton<ICacheService, RedisCacheService>();
|
||||
services.AddSingleton<IConnectionMultiplexer>(_ =>
|
||||
ConnectionMultiplexer.Connect(configuration["Redis:Connection"]!));
|
||||
|
||||
// Transient: New instance every time
|
||||
services.AddTransient<IValidator<CreateOrderRequest>, CreateOrderValidator>();
|
||||
|
||||
// Options pattern for configuration
|
||||
services.Configure<CatalogOptions>(configuration.GetSection("Catalog"));
|
||||
services.Configure<RedisOptions>(configuration.GetSection("Redis"));
|
||||
|
||||
// Factory pattern for conditional creation
|
||||
services.AddScoped<IPriceCalculator>(sp =>
|
||||
{
|
||||
var options = sp.GetRequiredService<IOptions<PricingOptions>>().Value;
|
||||
return options.UseNewEngine
|
||||
? sp.GetRequiredService<NewPriceCalculator>()
|
||||
: sp.GetRequiredService<LegacyPriceCalculator>();
|
||||
});
|
||||
|
||||
// Keyed services (.NET 8+)
|
||||
services.AddKeyedScoped<IPaymentProcessor, StripeProcessor>("stripe");
|
||||
services.AddKeyedScoped<IPaymentProcessor, PayPalProcessor>("paypal");
|
||||
|
||||
return services;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage with keyed services
|
||||
public class CheckoutService
|
||||
{
|
||||
public CheckoutService(
|
||||
[FromKeyedServices("stripe")] IPaymentProcessor stripeProcessor)
|
||||
{
|
||||
_processor = stripeProcessor;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Async/Await Patterns
|
||||
|
||||
```csharp
|
||||
// ✅ CORRECT: Async all the way down
|
||||
public async Task<Product> GetProductAsync(string id, CancellationToken ct = default)
|
||||
{
|
||||
return await _repository.GetByIdAsync(id, ct);
|
||||
}
|
||||
|
||||
// ✅ CORRECT: Parallel execution with WhenAll
|
||||
public async Task<(Stock, Price)> GetStockAndPriceAsync(
|
||||
string productId,
|
||||
CancellationToken ct = default)
|
||||
{
|
||||
var stockTask = _stockService.GetAsync(productId, ct);
|
||||
var priceTask = _priceService.GetAsync(productId, ct);
|
||||
|
||||
await Task.WhenAll(stockTask, priceTask);
|
||||
|
||||
return (await stockTask, await priceTask);
|
||||
}
|
||||
|
||||
// ✅ CORRECT: ConfigureAwait in libraries
|
||||
public async Task<T> LibraryMethodAsync<T>(CancellationToken ct = default)
|
||||
{
|
||||
var result = await _httpClient.GetAsync(url, ct).ConfigureAwait(false);
|
||||
return await result.Content.ReadFromJsonAsync<T>(ct).ConfigureAwait(false);
|
||||
}
|
||||
|
||||
// ✅ CORRECT: ValueTask for hot paths with caching
|
||||
public ValueTask<Product?> GetCachedProductAsync(string id)
|
||||
{
|
||||
if (_cache.TryGetValue(id, out Product? product))
|
||||
return ValueTask.FromResult(product);
|
||||
|
||||
return new ValueTask<Product?>(GetFromDatabaseAsync(id));
|
||||
}
|
||||
|
||||
// ❌ WRONG: Blocking on async (deadlock risk)
|
||||
var result = GetProductAsync(id).Result; // NEVER do this
|
||||
var result2 = GetProductAsync(id).GetAwaiter().GetResult(); // Also bad
|
||||
|
||||
// ❌ WRONG: async void (except event handlers)
|
||||
public async void ProcessOrder() { } // Exceptions are lost
|
||||
|
||||
// ❌ WRONG: Unnecessary Task.Run for already async code
|
||||
await Task.Run(async () => await GetDataAsync()); // Wastes thread
|
||||
```
|
||||
|
||||
### 4. Configuration with IOptions
|
||||
|
||||
```csharp
|
||||
// Configuration classes
|
||||
public class CatalogOptions
|
||||
{
|
||||
public const string SectionName = "Catalog";
|
||||
|
||||
public int DefaultPageSize { get; set; } = 50;
|
||||
public int MaxPageSize { get; set; } = 200;
|
||||
public TimeSpan CacheDuration { get; set; } = TimeSpan.FromMinutes(15);
|
||||
public bool EnableEnrichment { get; set; } = true;
|
||||
}
|
||||
|
||||
public class RedisOptions
|
||||
{
|
||||
public const string SectionName = "Redis";
|
||||
|
||||
public string Connection { get; set; } = "localhost:6379";
|
||||
public string KeyPrefix { get; set; } = "mcp:";
|
||||
public int Database { get; set; } = 0;
|
||||
}
|
||||
|
||||
// appsettings.json
|
||||
{
|
||||
"Catalog": {
|
||||
"DefaultPageSize": 50,
|
||||
"MaxPageSize": 200,
|
||||
"CacheDuration": "00:15:00",
|
||||
"EnableEnrichment": true
|
||||
},
|
||||
"Redis": {
|
||||
"Connection": "localhost:6379",
|
||||
"KeyPrefix": "mcp:",
|
||||
"Database": 0
|
||||
}
|
||||
}
|
||||
|
||||
// Registration
|
||||
services.Configure<CatalogOptions>(configuration.GetSection(CatalogOptions.SectionName));
|
||||
services.Configure<RedisOptions>(configuration.GetSection(RedisOptions.SectionName));
|
||||
|
||||
// Usage with IOptions (singleton, read once at startup)
|
||||
public class CatalogService
|
||||
{
|
||||
private readonly CatalogOptions _options;
|
||||
|
||||
public CatalogService(IOptions<CatalogOptions> options)
|
||||
{
|
||||
_options = options.Value;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage with IOptionsSnapshot (scoped, re-reads on each request)
|
||||
public class DynamicService
|
||||
{
|
||||
private readonly CatalogOptions _options;
|
||||
|
||||
public DynamicService(IOptionsSnapshot<CatalogOptions> options)
|
||||
{
|
||||
_options = options.Value; // Fresh value per request
|
||||
}
|
||||
}
|
||||
|
||||
// Usage with IOptionsMonitor (singleton, notified on changes)
|
||||
public class MonitoredService
|
||||
{
|
||||
private CatalogOptions _options;
|
||||
|
||||
public MonitoredService(IOptionsMonitor<CatalogOptions> monitor)
|
||||
{
|
||||
_options = monitor.CurrentValue;
|
||||
monitor.OnChange(newOptions => _options = newOptions);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Result Pattern (Avoiding Exceptions for Flow Control)
|
||||
|
||||
```csharp
|
||||
// Generic Result type
|
||||
public class Result<T>
|
||||
{
|
||||
public bool IsSuccess { get; }
|
||||
public T? Value { get; }
|
||||
public string? Error { get; }
|
||||
public string? ErrorCode { get; }
|
||||
|
||||
private Result(bool isSuccess, T? value, string? error, string? errorCode)
|
||||
{
|
||||
IsSuccess = isSuccess;
|
||||
Value = value;
|
||||
Error = error;
|
||||
ErrorCode = errorCode;
|
||||
}
|
||||
|
||||
public static Result<T> Success(T value) => new(true, value, null, null);
|
||||
public static Result<T> Failure(string error, string? code = null) => new(false, default, error, code);
|
||||
|
||||
public Result<TNew> Map<TNew>(Func<T, TNew> mapper) =>
|
||||
IsSuccess ? Result<TNew>.Success(mapper(Value!)) : Result<TNew>.Failure(Error!, ErrorCode);
|
||||
|
||||
public async Task<Result<TNew>> MapAsync<TNew>(Func<T, Task<TNew>> mapper) =>
|
||||
IsSuccess ? Result<TNew>.Success(await mapper(Value!)) : Result<TNew>.Failure(Error!, ErrorCode);
|
||||
}
|
||||
|
||||
// Usage in service
|
||||
public async Task<Result<Order>> CreateOrderAsync(CreateOrderRequest request, CancellationToken ct)
|
||||
{
|
||||
// Validation
|
||||
var validation = await _validator.ValidateAsync(request, ct);
|
||||
if (!validation.IsValid)
|
||||
return Result<Order>.Failure(
|
||||
validation.Errors.First().ErrorMessage,
|
||||
"VALIDATION_ERROR");
|
||||
|
||||
// Business rule check
|
||||
var stock = await _stockService.CheckAsync(request.ProductId, request.Quantity, ct);
|
||||
if (!stock.IsAvailable)
|
||||
return Result<Order>.Failure(
|
||||
$"Insufficient stock: {stock.Available} available, {request.Quantity} requested",
|
||||
"INSUFFICIENT_STOCK");
|
||||
|
||||
// Create order
|
||||
var order = await _repository.CreateAsync(request.ToEntity(), ct);
|
||||
|
||||
return Result<Order>.Success(order);
|
||||
}
|
||||
|
||||
// Usage in controller/endpoint
|
||||
app.MapPost("/orders", async (
|
||||
CreateOrderRequest request,
|
||||
IOrderService orderService,
|
||||
CancellationToken ct) =>
|
||||
{
|
||||
var result = await orderService.CreateOrderAsync(request, ct);
|
||||
|
||||
return result.IsSuccess
|
||||
? Results.Created($"/orders/{result.Value!.Id}", result.Value)
|
||||
: Results.BadRequest(new { error = result.Error, code = result.ErrorCode });
|
||||
});
|
||||
```
|
||||
|
||||
## Data Access Patterns
|
||||
|
||||
### Entity Framework Core
|
||||
|
||||
```csharp
|
||||
// DbContext configuration
|
||||
public class AppDbContext : DbContext
|
||||
{
|
||||
public DbSet<Product> Products => Set<Product>();
|
||||
public DbSet<Order> Orders => Set<Order>();
|
||||
|
||||
protected override void OnModelCreating(ModelBuilder modelBuilder)
|
||||
{
|
||||
// Apply all configurations from assembly
|
||||
modelBuilder.ApplyConfigurationsFromAssembly(typeof(AppDbContext).Assembly);
|
||||
|
||||
// Global query filters
|
||||
modelBuilder.Entity<Product>().HasQueryFilter(p => !p.IsDeleted);
|
||||
}
|
||||
}
|
||||
|
||||
// Entity configuration
|
||||
public class ProductConfiguration : IEntityTypeConfiguration<Product>
|
||||
{
|
||||
public void Configure(EntityTypeBuilder<Product> builder)
|
||||
{
|
||||
builder.ToTable("Products");
|
||||
|
||||
builder.HasKey(p => p.Id);
|
||||
builder.Property(p => p.Id).HasMaxLength(40);
|
||||
builder.Property(p => p.Name).HasMaxLength(200).IsRequired();
|
||||
builder.Property(p => p.Price).HasPrecision(18, 2);
|
||||
|
||||
builder.HasIndex(p => p.Sku).IsUnique();
|
||||
builder.HasIndex(p => new { p.CategoryId, p.Name });
|
||||
|
||||
builder.HasMany(p => p.OrderItems)
|
||||
.WithOne(oi => oi.Product)
|
||||
.HasForeignKey(oi => oi.ProductId);
|
||||
}
|
||||
}
|
||||
|
||||
// Repository with EF Core
|
||||
public class ProductRepository : IProductRepository
|
||||
{
|
||||
private readonly AppDbContext _context;
|
||||
|
||||
public async Task<Product?> GetByIdAsync(string id, CancellationToken ct = default)
|
||||
{
|
||||
return await _context.Products
|
||||
.AsNoTracking()
|
||||
.FirstOrDefaultAsync(p => p.Id == id, ct);
|
||||
}
|
||||
|
||||
public async Task<IReadOnlyList<Product>> SearchAsync(
|
||||
ProductSearchCriteria criteria,
|
||||
CancellationToken ct = default)
|
||||
{
|
||||
var query = _context.Products.AsNoTracking();
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(criteria.SearchTerm))
|
||||
query = query.Where(p => EF.Functions.Like(p.Name, $"%{criteria.SearchTerm}%"));
|
||||
|
||||
if (criteria.CategoryId.HasValue)
|
||||
query = query.Where(p => p.CategoryId == criteria.CategoryId);
|
||||
|
||||
if (criteria.MinPrice.HasValue)
|
||||
query = query.Where(p => p.Price >= criteria.MinPrice);
|
||||
|
||||
if (criteria.MaxPrice.HasValue)
|
||||
query = query.Where(p => p.Price <= criteria.MaxPrice);
|
||||
|
||||
return await query
|
||||
.OrderBy(p => p.Name)
|
||||
.Skip((criteria.Page - 1) * criteria.PageSize)
|
||||
.Take(criteria.PageSize)
|
||||
.ToListAsync(ct);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Dapper for Performance
|
||||
|
||||
```csharp
|
||||
public class DapperProductRepository : IProductRepository
|
||||
{
|
||||
private readonly IDbConnection _connection;
|
||||
|
||||
public async Task<Product?> GetByIdAsync(string id, CancellationToken ct = default)
|
||||
{
|
||||
const string sql = """
|
||||
SELECT Id, Name, Sku, Price, CategoryId, Stock, CreatedAt
|
||||
FROM Products
|
||||
WHERE Id = @Id AND IsDeleted = 0
|
||||
""";
|
||||
|
||||
return await _connection.QueryFirstOrDefaultAsync<Product>(
|
||||
new CommandDefinition(sql, new { Id = id }, cancellationToken: ct));
|
||||
}
|
||||
|
||||
public async Task<IReadOnlyList<Product>> SearchAsync(
|
||||
ProductSearchCriteria criteria,
|
||||
CancellationToken ct = default)
|
||||
{
|
||||
var sql = new StringBuilder("""
|
||||
SELECT Id, Name, Sku, Price, CategoryId, Stock, CreatedAt
|
||||
FROM Products
|
||||
WHERE IsDeleted = 0
|
||||
""");
|
||||
|
||||
var parameters = new DynamicParameters();
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(criteria.SearchTerm))
|
||||
{
|
||||
sql.Append(" AND Name LIKE @SearchTerm");
|
||||
parameters.Add("SearchTerm", $"%{criteria.SearchTerm}%");
|
||||
}
|
||||
|
||||
if (criteria.CategoryId.HasValue)
|
||||
{
|
||||
sql.Append(" AND CategoryId = @CategoryId");
|
||||
parameters.Add("CategoryId", criteria.CategoryId);
|
||||
}
|
||||
|
||||
if (criteria.MinPrice.HasValue)
|
||||
{
|
||||
sql.Append(" AND Price >= @MinPrice");
|
||||
parameters.Add("MinPrice", criteria.MinPrice);
|
||||
}
|
||||
|
||||
if (criteria.MaxPrice.HasValue)
|
||||
{
|
||||
sql.Append(" AND Price <= @MaxPrice");
|
||||
parameters.Add("MaxPrice", criteria.MaxPrice);
|
||||
}
|
||||
|
||||
sql.Append(" ORDER BY Name OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY");
|
||||
parameters.Add("Offset", (criteria.Page - 1) * criteria.PageSize);
|
||||
parameters.Add("PageSize", criteria.PageSize);
|
||||
|
||||
var results = await _connection.QueryAsync<Product>(
|
||||
new CommandDefinition(sql.ToString(), parameters, cancellationToken: ct));
|
||||
|
||||
return results.ToList();
|
||||
}
|
||||
|
||||
// Multi-mapping for related data
|
||||
public async Task<Order?> GetOrderWithItemsAsync(int orderId, CancellationToken ct = default)
|
||||
{
|
||||
const string sql = """
|
||||
SELECT o.*, oi.*, p.*
|
||||
FROM Orders o
|
||||
LEFT JOIN OrderItems oi ON o.Id = oi.OrderId
|
||||
LEFT JOIN Products p ON oi.ProductId = p.Id
|
||||
WHERE o.Id = @OrderId
|
||||
""";
|
||||
|
||||
var orderDictionary = new Dictionary<int, Order>();
|
||||
|
||||
await _connection.QueryAsync<Order, OrderItem, Product, Order>(
|
||||
new CommandDefinition(sql, new { OrderId = orderId }, cancellationToken: ct),
|
||||
(order, item, product) =>
|
||||
{
|
||||
if (!orderDictionary.TryGetValue(order.Id, out var existingOrder))
|
||||
{
|
||||
existingOrder = order;
|
||||
existingOrder.Items = new List<OrderItem>();
|
||||
orderDictionary.Add(order.Id, existingOrder);
|
||||
}
|
||||
|
||||
if (item != null)
|
||||
{
|
||||
item.Product = product;
|
||||
existingOrder.Items.Add(item);
|
||||
}
|
||||
|
||||
return existingOrder;
|
||||
},
|
||||
splitOn: "Id,Id");
|
||||
|
||||
return orderDictionary.Values.FirstOrDefault();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Caching Patterns
|
||||
|
||||
### Multi-Level Cache with Redis
|
||||
|
||||
```csharp
|
||||
public class CachedProductService : IProductService
|
||||
{
|
||||
private readonly IProductRepository _repository;
|
||||
private readonly IMemoryCache _memoryCache;
|
||||
private readonly IDistributedCache _distributedCache;
|
||||
private readonly ILogger<CachedProductService> _logger;
|
||||
|
||||
private static readonly TimeSpan MemoryCacheDuration = TimeSpan.FromMinutes(1);
|
||||
private static readonly TimeSpan DistributedCacheDuration = TimeSpan.FromMinutes(15);
|
||||
|
||||
public async Task<Product?> GetByIdAsync(string id, CancellationToken ct = default)
|
||||
{
|
||||
var cacheKey = $"product:{id}";
|
||||
|
||||
// L1: Memory cache (in-process, fastest)
|
||||
if (_memoryCache.TryGetValue(cacheKey, out Product? cached))
|
||||
{
|
||||
_logger.LogDebug("L1 cache hit for {CacheKey}", cacheKey);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// L2: Distributed cache (Redis)
|
||||
var distributed = await _distributedCache.GetStringAsync(cacheKey, ct);
|
||||
if (distributed != null)
|
||||
{
|
||||
_logger.LogDebug("L2 cache hit for {CacheKey}", cacheKey);
|
||||
var product = JsonSerializer.Deserialize<Product>(distributed);
|
||||
|
||||
// Populate L1
|
||||
_memoryCache.Set(cacheKey, product, MemoryCacheDuration);
|
||||
return product;
|
||||
}
|
||||
|
||||
// L3: Database
|
||||
_logger.LogDebug("Cache miss for {CacheKey}, fetching from database", cacheKey);
|
||||
var fromDb = await _repository.GetByIdAsync(id, ct);
|
||||
|
||||
if (fromDb != null)
|
||||
{
|
||||
var serialized = JsonSerializer.Serialize(fromDb);
|
||||
|
||||
// Populate both caches
|
||||
await _distributedCache.SetStringAsync(
|
||||
cacheKey,
|
||||
serialized,
|
||||
new DistributedCacheEntryOptions
|
||||
{
|
||||
AbsoluteExpirationRelativeToNow = DistributedCacheDuration
|
||||
},
|
||||
ct);
|
||||
|
||||
_memoryCache.Set(cacheKey, fromDb, MemoryCacheDuration);
|
||||
}
|
||||
|
||||
return fromDb;
|
||||
}
|
||||
|
||||
public async Task InvalidateAsync(string id, CancellationToken ct = default)
|
||||
{
|
||||
var cacheKey = $"product:{id}";
|
||||
|
||||
_memoryCache.Remove(cacheKey);
|
||||
await _distributedCache.RemoveAsync(cacheKey, ct);
|
||||
|
||||
_logger.LogInformation("Invalidated cache for {CacheKey}", cacheKey);
|
||||
}
|
||||
}
|
||||
|
||||
// Stale-while-revalidate pattern
|
||||
public class StaleWhileRevalidateCache<T>
|
||||
{
|
||||
private readonly IDistributedCache _cache;
|
||||
private readonly TimeSpan _freshDuration;
|
||||
private readonly TimeSpan _staleDuration;
|
||||
|
||||
public async Task<T?> GetOrCreateAsync(
|
||||
string key,
|
||||
Func<CancellationToken, Task<T>> factory,
|
||||
CancellationToken ct = default)
|
||||
{
|
||||
var cached = await _cache.GetStringAsync(key, ct);
|
||||
|
||||
if (cached != null)
|
||||
{
|
||||
var entry = JsonSerializer.Deserialize<CacheEntry<T>>(cached)!;
|
||||
|
||||
if (entry.IsStale && !entry.IsExpired)
|
||||
{
|
||||
// Return stale data immediately, refresh in background
|
||||
_ = Task.Run(async () =>
|
||||
{
|
||||
var fresh = await factory(CancellationToken.None);
|
||||
await SetAsync(key, fresh, CancellationToken.None);
|
||||
});
|
||||
}
|
||||
|
||||
if (!entry.IsExpired)
|
||||
return entry.Value;
|
||||
}
|
||||
|
||||
// Cache miss or expired
|
||||
var value = await factory(ct);
|
||||
await SetAsync(key, value, ct);
|
||||
return value;
|
||||
}
|
||||
|
||||
private record CacheEntry<TValue>(TValue Value, DateTime CreatedAt)
|
||||
{
|
||||
public bool IsStale => DateTime.UtcNow - CreatedAt > _freshDuration;
|
||||
public bool IsExpired => DateTime.UtcNow - CreatedAt > _staleDuration;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Patterns
|
||||
|
||||
### Unit Tests with xUnit and Moq
|
||||
|
||||
```csharp
|
||||
public class OrderServiceTests
|
||||
{
|
||||
private readonly Mock<IOrderRepository> _mockRepository;
|
||||
private readonly Mock<IStockService> _mockStockService;
|
||||
private readonly Mock<IValidator<CreateOrderRequest>> _mockValidator;
|
||||
private readonly OrderService _sut; // System Under Test
|
||||
|
||||
public OrderServiceTests()
|
||||
{
|
||||
_mockRepository = new Mock<IOrderRepository>();
|
||||
_mockStockService = new Mock<IStockService>();
|
||||
_mockValidator = new Mock<IValidator<CreateOrderRequest>>();
|
||||
|
||||
// Default: validation passes
|
||||
_mockValidator
|
||||
.Setup(v => v.ValidateAsync(It.IsAny<CreateOrderRequest>(), It.IsAny<CancellationToken>()))
|
||||
.ReturnsAsync(new ValidationResult());
|
||||
|
||||
_sut = new OrderService(
|
||||
_mockRepository.Object,
|
||||
_mockStockService.Object,
|
||||
_mockValidator.Object);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task CreateOrderAsync_WithValidRequest_ReturnsSuccess()
|
||||
{
|
||||
// Arrange
|
||||
var request = new CreateOrderRequest
|
||||
{
|
||||
ProductId = "PROD-001",
|
||||
Quantity = 5,
|
||||
CustomerOrderCode = "ORD-2024-001"
|
||||
};
|
||||
|
||||
_mockStockService
|
||||
.Setup(s => s.CheckAsync("PROD-001", 5, It.IsAny<CancellationToken>()))
|
||||
.ReturnsAsync(new StockResult { IsAvailable = true, Available = 10 });
|
||||
|
||||
_mockRepository
|
||||
.Setup(r => r.CreateAsync(It.IsAny<Order>(), It.IsAny<CancellationToken>()))
|
||||
.ReturnsAsync(new Order { Id = 1, CustomerOrderCode = "ORD-2024-001" });
|
||||
|
||||
// Act
|
||||
var result = await _sut.CreateOrderAsync(request);
|
||||
|
||||
// Assert
|
||||
Assert.True(result.IsSuccess);
|
||||
Assert.NotNull(result.Value);
|
||||
Assert.Equal(1, result.Value.Id);
|
||||
|
||||
_mockRepository.Verify(
|
||||
r => r.CreateAsync(It.Is<Order>(o => o.CustomerOrderCode == "ORD-2024-001"),
|
||||
It.IsAny<CancellationToken>()),
|
||||
Times.Once);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task CreateOrderAsync_WithInsufficientStock_ReturnsFailure()
|
||||
{
|
||||
// Arrange
|
||||
var request = new CreateOrderRequest { ProductId = "PROD-001", Quantity = 100 };
|
||||
|
||||
_mockStockService
|
||||
.Setup(s => s.CheckAsync(It.IsAny<string>(), It.IsAny<int>(), It.IsAny<CancellationToken>()))
|
||||
.ReturnsAsync(new StockResult { IsAvailable = false, Available = 5 });
|
||||
|
||||
// Act
|
||||
var result = await _sut.CreateOrderAsync(request);
|
||||
|
||||
// Assert
|
||||
Assert.False(result.IsSuccess);
|
||||
Assert.Equal("INSUFFICIENT_STOCK", result.ErrorCode);
|
||||
Assert.Contains("5 available", result.Error);
|
||||
|
||||
_mockRepository.Verify(
|
||||
r => r.CreateAsync(It.IsAny<Order>(), It.IsAny<CancellationToken>()),
|
||||
Times.Never);
|
||||
}
|
||||
|
||||
[Theory]
|
||||
[InlineData(0)]
|
||||
[InlineData(-1)]
|
||||
[InlineData(-100)]
|
||||
public async Task CreateOrderAsync_WithInvalidQuantity_ReturnsValidationError(int quantity)
|
||||
{
|
||||
// Arrange
|
||||
var request = new CreateOrderRequest { ProductId = "PROD-001", Quantity = quantity };
|
||||
|
||||
_mockValidator
|
||||
.Setup(v => v.ValidateAsync(request, It.IsAny<CancellationToken>()))
|
||||
.ReturnsAsync(new ValidationResult(new[]
|
||||
{
|
||||
new ValidationFailure("Quantity", "Quantity must be greater than 0")
|
||||
}));
|
||||
|
||||
// Act
|
||||
var result = await _sut.CreateOrderAsync(request);
|
||||
|
||||
// Assert
|
||||
Assert.False(result.IsSuccess);
|
||||
Assert.Equal("VALIDATION_ERROR", result.ErrorCode);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Integration Tests with WebApplicationFactory
|
||||
|
||||
```csharp
|
||||
public class ProductsApiTests : IClassFixture<WebApplicationFactory<Program>>
|
||||
{
|
||||
private readonly WebApplicationFactory<Program> _factory;
|
||||
private readonly HttpClient _client;
|
||||
|
||||
public ProductsApiTests(WebApplicationFactory<Program> factory)
|
||||
{
|
||||
_factory = factory.WithWebHostBuilder(builder =>
|
||||
{
|
||||
builder.ConfigureServices(services =>
|
||||
{
|
||||
// Replace real database with in-memory
|
||||
services.RemoveAll<DbContextOptions<AppDbContext>>();
|
||||
services.AddDbContext<AppDbContext>(options =>
|
||||
options.UseInMemoryDatabase("TestDb"));
|
||||
|
||||
// Replace Redis with memory cache
|
||||
services.RemoveAll<IDistributedCache>();
|
||||
services.AddDistributedMemoryCache();
|
||||
});
|
||||
});
|
||||
|
||||
_client = _factory.CreateClient();
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task GetProduct_WithValidId_ReturnsProduct()
|
||||
{
|
||||
// Arrange
|
||||
using var scope = _factory.Services.CreateScope();
|
||||
var context = scope.ServiceProvider.GetRequiredService<AppDbContext>();
|
||||
|
||||
context.Products.Add(new Product
|
||||
{
|
||||
Id = "TEST-001",
|
||||
Name = "Test Product",
|
||||
Price = 99.99m
|
||||
});
|
||||
await context.SaveChangesAsync();
|
||||
|
||||
// Act
|
||||
var response = await _client.GetAsync("/api/products/TEST-001");
|
||||
|
||||
// Assert
|
||||
response.EnsureSuccessStatusCode();
|
||||
var product = await response.Content.ReadFromJsonAsync<Product>();
|
||||
Assert.Equal("Test Product", product!.Name);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task GetProduct_WithInvalidId_Returns404()
|
||||
{
|
||||
// Act
|
||||
var response = await _client.GetAsync("/api/products/NONEXISTENT");
|
||||
|
||||
// Assert
|
||||
Assert.Equal(HttpStatusCode.NotFound, response.StatusCode);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### DO
|
||||
|
||||
1. **Use async/await** all the way through the call stack
|
||||
2. **Inject dependencies** through constructor injection
|
||||
3. **Use IOptions<T>** for typed configuration
|
||||
4. **Return Result types** instead of throwing exceptions for business logic
|
||||
5. **Use CancellationToken** in all async methods
|
||||
6. **Prefer Dapper** for read-heavy, performance-critical queries
|
||||
7. **Use EF Core** for complex domain models with change tracking
|
||||
8. **Cache aggressively** with proper invalidation strategies
|
||||
9. **Write unit tests** for business logic, integration tests for APIs
|
||||
10. **Use record types** for DTOs and immutable data
|
||||
|
||||
### DON'T
|
||||
|
||||
1. **Don't block on async** with `.Result` or `.Wait()`
|
||||
2. **Don't use async void** except for event handlers
|
||||
3. **Don't catch generic Exception** without re-throwing or logging
|
||||
4. **Don't hardcode** configuration values
|
||||
5. **Don't expose EF entities** directly in APIs (use DTOs)
|
||||
6. **Don't forget** `AsNoTracking()` for read-only queries
|
||||
7. **Don't ignore** CancellationToken parameters
|
||||
8. **Don't create** `new HttpClient()` manually (use IHttpClientFactory)
|
||||
9. **Don't mix** sync and async code unnecessarily
|
||||
10. **Don't skip** validation at API boundaries
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- **N+1 Queries**: Use `.Include()` or explicit joins
|
||||
- **Memory Leaks**: Dispose IDisposable resources, use `using`
|
||||
- **Deadlocks**: Don't mix sync and async, use ConfigureAwait(false) in libraries
|
||||
- **Over-fetching**: Select only needed columns, use projections
|
||||
- **Missing Indexes**: Check query plans, add indexes for common filters
|
||||
- **Timeout Issues**: Configure appropriate timeouts for HTTP clients
|
||||
- **Cache Stampede**: Use distributed locks for cache population
|
||||
|
||||
## Resources
|
||||
|
||||
- **assets/service-template.cs.template**: Complete service implementation template
|
||||
- **assets/repository-template.cs.template**: Repository pattern implementation
|
||||
- **references/ef-core-best-practices.md**: EF Core optimization guide
|
||||
- **references/dapper-patterns.md**: Advanced Dapper usage patterns
|
||||
Reference in New Issue
Block a user