blazor by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill blazor您是一位精通 Blazor 开发的专家,对 Blazor Server 和 Blazor WebAssembly 都有深入的了解。
@page "/users/{Id:int}"
@inject IUserService UserService
<h1>@User?.Name</h1>
@code {
[Parameter]
public int Id { get; set; }
private User? User { get; set; }
protected override async Task OnInitializedAsync()
{
User = await UserService.GetUserAsync(Id);
}
}
OnInitialized/OnInitializedAsync:初始设置OnParametersSet/OnParametersSetAsync:参数更改时广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
OnAfterRender/OnAfterRenderAsync:DOM 更新后Dispose:清理资源OnInitializedAsync 加载数据OnAfterRenderAsync 中检查 firstRender 参数<p>@message</p>
<input value="@inputValue" />
<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />
<button @onclick="HandleClick">点击</button>
<button @onclick="() => HandleClickWithParam(id)">点击</button>
<button @onclick="HandleClickAsync">异步点击</button>
@keyShouldRender() 方法StateHasChanged()<Virtualize Items="@items" Context="item">
<ItemContent>
<div>@item.Name</div>
</ItemContent>
</Virtualize>
StateHasChanged()InvokeAsync 进行线程安全的更新<CascadingValue Value="@currentTheme">
<ChildComponent />
</CascadingValue>
<!-- 在子组件中 -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }
@inject HttpClient Http
private async Task LoadData()
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
try
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
errorMessage = "加载用户失败";
}
<ErrorBoundary>
<ChildContent>
<RiskyComponent />
</ChildContent>
<ErrorContent Context="ex">
<p>发生错误:@ex.Message</p>
</ErrorContent>
</ErrorBoundary>
IErrorBoundary 接口进行自定义处理[Fact]
public void ComponentRendersCorrectly()
{
using var ctx = new TestContext();
var cut = ctx.RenderComponent<Counter>();
cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
cut.Find("button").Click();
cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}
AuthenticationStateProviderAuthorizeView 进行条件性 UI 渲染[Authorize] 特性<AuthorizeView>
<Authorized>
<p>欢迎,@context.User.Identity?.Name!</p>
</Authorized>
<NotAuthorized>
<p>请登录。</p>
</NotAuthorized>
</AuthorizeView>
@key@if 进行组件懒加载每周安装量
106
代码仓库
GitHub 星标数
43
首次出现
2026年1月25日
安全审计
安装于
opencode86
gemini-cli84
codex78
cursor76
github-copilot75
claude-code71
You are an expert in Blazor development with deep knowledge of both Blazor Server and Blazor WebAssembly.
@page "/users/{Id:int}"
@inject IUserService UserService
<h1>@User?.Name</h1>
@code {
[Parameter]
public int Id { get; set; }
private User? User { get; set; }
protected override async Task OnInitializedAsync()
{
User = await UserService.GetUserAsync(Id);
}
}
OnInitialized/OnInitializedAsync: Initial setupOnParametersSet/OnParametersSetAsync: When parameters changeOnAfterRender/OnAfterRenderAsync: After DOM updatesDispose: Cleanup resourcesOnInitializedAsync for data loadingfirstRender in OnAfterRenderAsync<p>@message</p>
<input value="@inputValue" />
<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />
<button @onclick="HandleClick">Click</button>
<button @onclick="() => HandleClickWithParam(id)">Click</button>
<button @onclick="HandleClickAsync">Async Click</button>
@key for list itemsShouldRender() when appropriateStateHasChanged() judiciously<Virtualize Items="@items" Context="item">
<ItemContent>
<div>@item.Name</div>
</ItemContent>
</Virtualize>
StateHasChanged() when state changes externallyInvokeAsync for thread-safe updates<CascadingValue Value="@currentTheme">
<ChildComponent />
</CascadingValue>
<!-- In child component -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }
@inject HttpClient Http
private async Task LoadData()
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
try
{
users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
errorMessage = "Failed to load users";
}
<ErrorBoundary>
<ChildContent>
<RiskyComponent />
</ChildContent>
<ErrorContent Context="ex">
<p>An error occurred: @ex.Message</p>
</ErrorContent>
</ErrorBoundary>
IErrorBoundary for custom handling[Fact]
public void ComponentRendersCorrectly()
{
using var ctx = new TestContext();
var cut = ctx.RenderComponent<Counter>();
cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
cut.Find("button").Click();
cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}
AuthenticationStateProviderAuthorizeView for conditional UI[Authorize] attribute on pages<AuthorizeView>
<Authorized>
<p>Welcome, @context.User.Identity?.Name!</p>
</Authorized>
<NotAuthorized>
<p>Please log in.</p>
</NotAuthorized>
</AuthorizeView>
@key for dynamic lists@ifWeekly Installs
106
Repository
GitHub Stars
43
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode86
gemini-cli84
codex78
cursor76
github-copilot75
claude-code71
Sentry .NET SDK 设置指南:错误监控、性能追踪与日志记录
294 周安装
FDA法规咨询专家:医疗器械510(k)提交、QSR质量体系与网络安全合规指南
160 周安装
Claude AI金融分析师技能 - 智能财务分析与投资决策助手 | 开源AI工具
162 周安装
codeagent-wrapper:多AI后端代码生成与分析工具,支持Codex、Claude、Gemini
162 周安装
移动端用户体验优化指南:视口处理、触控优化与响应式设计最佳实践
167 周安装
Flutter Driver 自动化测试与截图指南 - 集成 MCP 服务器实现应用控制
169 周安装
代码精修工作流:AI代码审查、质量优化与PR前自动化检查工具
169 周安装