前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载本文以 ant-design-blazor 组件库中 404 演示文档 为核心深入讲解如何借助 Result 组件的Http404状态在 Blazor 应用中构建专业、友好的页面未找到提示页。你将掌握 Result 组件的全部核心 API、它与 Router 的NotFound模板的集成方式以及 403/500 等同族页面的扩展用法并理解其图标渲染与内置 SVG 的底层实现原理。从一行文档看 404 页面在 Result 组件中的定位在 ant-design-blazor 官方文档的组件演示目录中404.md 是 Result 组件一个极简的演示入口它的正文只有一句话此页面未找到。英文版本对应 The page you visited does not exist。这个简洁描述背后对应的是一整套 404 结果页的 UI 呈现内置的页面未找到插图、醒目的404主标题、解释性的副标题以及可选的返回首页操作按钮。在 ant-design-blazor 中404 页面并不是一个独立组件而是Result 组件的一个特殊状态。Result 组件定位于反馈一系列操作任务的处理结果官方 Result API 文档 指出其典型使用场景是当有重要操作需告知用户处理结果且反馈内容较为复杂时使用。HTTP 状态码类页面403、404、500正是这类复杂反馈的典型代表。Result 组件核心 API构建 404 页面的全部参数要正确使用 Result 组件构建 404 页面首先需要完整掌握其参数体系。依据 组件 API 文档 和 Result.razor.cs 中的参数定义Result 组件对外暴露的核心参数如下参数说明类型默认值Titletitle 文字string | RenderFragment-SubTitlesubTitle 文字string | RenderFragment-Status结果的状态决定图标和颜色success|error|info|warning|404|403|500infoIcon自定义 iconstring{type}-{theme}-Extra操作区RenderFragment-IsShowIcon是否显示图标booltrueChildContent子内容展示在标题/副标题与操作区之间RenderFragment-其中Status在代码层面对应 ResultStatus 枚举定义了七个成员public enum ResultStatus { Success, Error, Info, Warning, Http404, Http403, Http500, }Http404即对应文档中的404状态。注意Title与SubTitle在 源码 中同时支持普通字符串和RenderFragment模板两种形式——通过TitleTemplate/SubTitleTemplate传入模板时模板内容优先于字符串渲染这一点可以在 Result.razor 的渲染逻辑中看到if (TitleTemplate ! null)TitleTemplate else Title。完整 404 页面代码示例可直接复制运行仓库中 404 演示实现_404.razor给出了一个最小但完整的 404 页面Result StatusResultStatus.Http404 Title404 SubTitleSorry, the page you visited does not exist. Extraextra / code { RenderFragment extra Button TypeButtonType.PrimaryBack Home/Button; }逐行解析这个示例StatusResultStatus.Http404将状态设置为 404组件会自动呈现内置的页面未找到插图与对应配色无需手动指定任何图片资源Title404页面的主标题通常直接使用状态码本身SubTitleSorry, the page you visited does not exist.副标题用于向用户解释当前发生了什么Extraextra通过RenderFragment传入操作区这里放置了一个ButtonType.Primary的主按钮Back Home引导用户返回首页。如果希望副标题也支持中文场景可以直接替换为中文文案例如SubTitle抱歉您访问的页面不存在组件本身不绑定任何语言文案完全由使用者决定。完整页面结构不止标题和按钮当反馈内容更复杂时还可以通过ChildContent在标题和操作区之间插入补充内容块。仓库中 Error.razor 展示了这一用法其中Error.razor用Paragraph列出了一系列错误明细最终渲染结果中这些内容会落在ant-result-content区块内参见 Result.razor 的渲染逻辑。404 页面同样可以这样做例如在操作按钮之前补充一段链接可能已失效的说明文字。底层原理404 的插图与图标是如何渲染出来的为什么StatusResultStatus.Http404一行代码就能得到一张完整插图这要追溯到 Result.razor.cs 的实现细节。状态到图标的映射Result.razor.cs中维护了一张_typeMap字典把每个ResultStatus映射为 CSS 类名后缀private static DictionaryResultStatus, string _typeMap new() { [ResultStatus.Info] info, [ResultStatus.Success] success, [ResultStatus.Warning] warning, [ResultStatus.Error] error, [ResultStatus.Http403] 403, [ResultStatus.Http404] 404, [ResultStatus.Http500] 500 };最终组件根元素会获得ant-result与ant-result-404之类的组合类名见 SetClass 方法对应的间距、配色由 index.less 控制。特殊内部图标__not-foundDetermineIconType()方法决定了图标内容case ResultStatus.Http404: return (__not-found, default);__not-found是组件内部专用图标名它在 IconStore.cs 中被特殊处理当iconName为__not-found时直接返回一段内嵌的、约 252×294 尺寸的 SVG 插图源码画面上是一台电脑显示器与放大镜找页面的场景插画。403 与 500 同理分别对应__unauthorized与__bad-request两段内嵌 SVG。图片模式与图标模式的分流在 Result.razor 的渲染逻辑中IsShowIcon为 true 时会进一步判断是图片模式还是图标模式private bool IsImage Status.IsIn(ResultStatus.Http403, ResultStatus.Http404, ResultStatus.Http500);当状态为 403/404/500 时走图片模式通过IconService.GetIconImg()见 IconService.cs从 IconStore 取出内嵌 SVG以MarkupString方式直接输出为ant-result-image区块其余状态success/error/info/warning走图标模式渲染为ant-result-icon区块例如error对应close-circle-fill、success对应check-circle-fill、info对应info-circle-fill。这也是 404 页面与普通状态结果页在视觉形态上的本质差异404 是一张完整的插画而 success/error 等是彩色图标加文字。与 Blazor Router 集成让未匹配路由自动显示 404在真实应用中404 页面最有价值的用法是作为 Blazor 路由系统NotFound模板的内容。ant-design-blazor 官方文档站点本身就是这样实现的见 Routes.razorRouter AppAssemblytypeof(App).Assembly OnNavigateAsyncOnNavigateAsync Found ContextrouteData RouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) / /Found NotFound Result StatusResultStatus.Http404 / /NotFound /Router这里Router的NotFound模板中直接放置了一个仅设置StatusResultStatus.Http404的 Result 组件。当用户访问不存在的 URL 时Blazor 会自动渲染这段模板——不写Title、SubTitle也能得到完整的 404 插画页面。在集成到自己的项目时建议组合使用NotFound Result StatusResultStatus.Http404 Title404 SubTitle抱歉您访问的页面不存在可能已被移除或链接有误。 Button TypeButtonType.Primary OnClickGoHome返回首页/Button /Result /NotFound提示NotFound模板默认没有布局。如需 404 页面与全站保持统一外观可以在NotFound模板内用LayoutView Layouttypeof(MainLayout)包裹 Result 组件。扩展实践403 与 500 同族页面的对照实现404 并非孤例仓库演示目录中还提供了同族的两个页面_403.razor你没有此页面的访问权限与_500.razor服务器内部错误* 403 无权限页面 * Result StatusResultStatus.Http403 Title403 SubTitleSorry, you are not authorized to access this page. Extraextra / * 500 服务端错误页面 * Result StatusResultStatus.Http500 Title500 SubTitleSorry, something went wrong. Extraextra /三者的结构完全一致仅Status、文案不同对应插画由__unauthorized、__not-found、__bad-request三段内嵌 SVG 分别提供。实际业务中可以按照403 用于权限不足、404 用于路由未匹配、500 用于服务异常的原则在授权校验、路由兜底、异常边界等场景分别挂载。此外Result 组件还提供了 ErrorBoundary 错误提示演示利用 .NET 6 提供的ErrorBoundary包裹组件可以配合 Result 的error状态实现更友好的运行时错误兜底页。动态定制运行时修改结果页状态与图标404/403/500 场景之外Result 组件还允许在运行时动态切换状态与图标。仓库中的 ChangeTheResult.razor 演示了通过RadioGroup与Select实时切换Icon和Status的完整交互。其核心机制值得注意Icon参数格式为{type}-{theme}例如smile-outline、like-outline、bug-outline。在 DetermineIconType 方法 中组件会以最后一个-为分隔符拆分出图标名与主题fill/twotone/outline当切换到 403/404/500 任一图片状态时演示代码会将icon清空icon 因为图片状态不接受自定义图标反过来选择自定义图标时又会把状态强制切回info避免两种渲染模式冲突。这段逻辑同样印证了前文的结论HTTP 状态码结果页与自定义图标结果页是互斥的两种渲染路径由IsImage属性统一分流。样式与主题适配Result 组件的样式定义在 components/result/style 目录下由entry.less引入index.less与patch.less其中patch.less在仓库当前版本中为空文件预留扩展位。核心样式规则位于 index.less页面整体内边距为48px 32px标题、副标题、图标均居中排版图片模式的插画容器固定250px × 295px水平居中.ant-result-image状态配色通过主题变量控制success/error/info/warning 分别映射success-color、error-color、info-color、warning-color随 ant-design-blazor 的主题变量如暗色主题自动适配操作区Extra内的相邻元素保留8px间距多个按钮并排时无需手动加 margin。这意味着 404 页面无需任何额外 CSS 即可在浅色、暗色等主题下保持一致的观感样式随主题变量联动。小结在项目中落地 404 页面的推荐路径总结 ant-design-blazor 中构建 404 页面的最佳实践路由兜底在应用根路由组件如Routes.razor的Router.NotFound模板中放置Result StatusResultStatus.Http404 /参考 Routes.razor 的官方写法补充文案与操作显式设置Title、SubTitle并利用Extra或ChildContent提供返回首页按钮或补充说明参考 _404.razor 的最小示例扩展同族页面权限与异常场景分别使用Http403、Http500插画由组件内置 SVG 自动提供无需额外资源保持零样式负担排版、配色与主题适配全部由组件自带样式完成可参考 Result 样式定义。按照以上路径即使完全不了解 Result 组件内部实现也能在几分钟内为 Blazor 应用接入一个视觉完整、可引导用户返回的 404 页面。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐ustwo.com-frontend完整指南从零开始搭建高性能前端架构ustwo.com frontend完整指南从零开始搭建高性能前端架构 欢迎来到ustwo.com frontend完整指南这是一个基于React的单页应用前端UI组件设计系统ant-design-blazor 实战使用 Result 组件构建 500 服务器错误页面ant design blazor 实战使用 Result 组件构建 500 服务器错误页面 导读 本文以 ant design blazor 官方示例库中的UI组件前端Ant Design Blazor Result 组件 Error 状态实战构建复杂的错误反馈页面Ant Design Blazor Result 组件 Error 状态实战构建复杂的错误反馈页面 在 Web 应用中表单提交失败、账号状态异常、操作被拒绝UI组件前端上一篇3个关键步骤如何实现Qwen大模型的高效跨平台部署下一篇MeshSync材质同步技巧解决跨平台材质一致性问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考