# 开拓者技能 Sorcha 使用 Blazor 进行混合渲染（服务器 + WebAssembly）。管理 UI (`src/Apps/Sorcha.Admin/`) 在 YARP API 网关后面运行。组件使用 MudBlazor 进行 UI 并支持三种渲染模式：静态服务器、交互式服务器和交互式 WASM。 ## 快速入门 ### 渲染模式选择 @* WASM - 复杂的交互式页面（设计器、图表）*@ @页面“/设计师” @rendermode InteractiveWebAssembly @属性[授权] @* 服务器 - 需要实时 SignalR 的管理页面 *@ @page“/admin/audit” @rendermode @(new InteractiveServerRenderMode(prerender: false)) @attribute [授权(角色 = "管理员")] @* 静态 - 公共页面（登录） - 无 @rendermode 指令 *@ @页面“/登录” @attribute [允许匿名] ### 具有加载状态的组件 @inject HttpClient Http @if(_isLoading && !_hasLoadedOnce) { } 否则如果（_data！= null） { @_data.Title } 否则如果（_errorMessage！= null） { @_errorMessage } @代码{ 私有数据Dto？ _数据; 私有字符串？ _错误信息; 私有布尔_isLoading；私人布尔_hasLoadedOnce； protected 覆盖异步任务 OnAfterRenderAsync(bool firstRender) { 如果（第一次渲染）等待 LoadDataAsync(); } 私有异步任务LoadDataAsync() { _正在加载=真；尝试 { _data = 等待 Http.GetFromJsonAsync("/api/data"); _hasLoadedOnce = true； } catch（异常前） { _errorMessage = ex.消息; } 最后 { _正在加载=假；状态已更改（）； } } } ## 关键概念概念|用途 |示例 ---|---|--- 渲染模式|控制组件运行的位置 | `@rendermode InteractiveWebAssembly` 级联参数|接收父状态 | `[CascadingParameter] MudBlazor.IDialogReference？泥对话框` OnAfterRenderAsync | DOM 准备好后初始化 | `if (firstRender) 等待 LoadAsync();` 状态已改变 |触发重新渲染 |异步状态更新后调用导航管理器 |程序化导航 | `Navigation.NavigateTo("/",forceLoad: true)` ## 项目结构项目|目的|渲染模式 ---|---|--- `Sorcha.Admin` |服务器主机、身份验证、API 代理 |服务器+预渲染 `Sorcha.Admin.Client` | WASM 组件 |网络组装 `Sorcha.UI.Core` |共享组件|两者都 `Sorcha.UI.Web` |主 UI 服务器 |服务器 `Sorcha.UI.Web.Client` |主 UI WASM |网络组装 ## 常见模式 ### MudBlazor 对话框 <对话内容> <对话框动作> 取消确定 @代码{ [级联参数] MudBlazor.IDialogReference？ MudDialog { 得到;放; } 私有字符串_value =“”； private void Cancel() => MudDialog?.Close(); private void Submit() => MudDialog?.Close(DialogResult.Ok(_value)); } ### 从父级打开对话框 var 对话框 = 等待 DialogService.ShowAsync("登录"); var 结果 = 等待对话框.Result; if（结果为 { 已取消： false }） { // 处理成功 } ## 另请参阅 * [patterns]() \- 组件和身份验证模式 * [工作流程]() \- 开发和部署工作流程 ## 相关技能 * 参见 **aspire** 服务发现配置技巧 * 请参阅 **signalr** 技能以获取实时通知 * 请参阅 **jwt** 认证令牌处理技巧 * API网关配置参见**yarp**技巧 * 组件库详细信息请参见 **mudblazor** 技能 ## 文档资源 > 使用 Context7 获取最新的 Blazor/MudBlazor 文档。 **库 ID：** `/websites/mudblazor`_（MudBlazor 组件库文档）_ **推荐查询：** *“MudBlazor 对话框服务使用” *“MudBlazor 表单验证” *“MudBlazor数据网格过滤”

布拉佐尔

包含技能