Blazor 怎么使用模板化组件_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Blazor 怎么使用模板化组件

2025-12-12

浏览次数：次

返回列表

Blazor模板化组件核心是RenderFragment和RenderFragment参数，前者用于静态内容（如Header），后者用于数据驱动场景（如RowTemplate），支持@context或自定义上下文变量，可组合多模板构建高复用组件，并需注意延迟执行、状态传递和事件解耦等细节。

blazor 怎么使用模板化组件

Blazor 使用模板化组件的核心是 RenderFragment 和 RenderFragment 类型的参数。它们让父组件能把任意 Razor 标记“传进去”，由子组件决定在哪儿、怎么渲染——不是传字符串，而是传可执行的 UI 片段。

用 RenderFragment 实现静态内容模板

适合标题、页脚、操作栏这类不依赖数据项的区域。

在子组件中声明参数：[Parameter] public RenderFragment Header { get; set; }
在组件标记里用 @Header 插入位置，比如：<div class="card-header">@Header</div>
调用时直接写标签内容：<card><header>用户列表</header></card>
也可以嵌入 Razor 表达式：<header>共 @items.Count() 条记录</header>

用 RenderFragment 实现数据驱动模板

适合表格行、列表项等需要逐条绑定数据的场景，T 就是每项的数据类型。

声明泛型模板参数：[Parameter] public RenderFragment<user> RowTemplate { get; set; }</user>
在组件内部遍历数据并调用模板：@foreach (var user in Users) { @RowTemplate(user) }
调用时用 @context 接收传入项：<rowtemplate><tr> <td>@context.Name</td> <td>@context.Email</td> </tr></rowtemplate>
也可改用自定义变量名：<rowtemplate context="u"><td>@u.Name</td></rowtemplate>

组合多个模板做高复用组件

比如一个通用表格组件，可以同时支持头、体、尾三段模板。

瑞志企业建站系统(ASP版)2.2

支持模板化设计，基于标签调用数据支持N国语言，并能根据客户端自动识别当前语言支持扩展现有的分类类型，并可修改当前主要分类的字段支持静态化和伪静态会员管理功能，询价、订单、收藏、短消息功能基于组的管理员权限设置支持在线新建、修改、删除模板支持在线管理上传文件使用最新的CKEditor作为后台可视化编辑器支持无限级分类及分类的移动、合并、排序专题管理、自定义模块管理支持缩略图和图

0 查看详情瑞志企业建站系统(ASP版)2.2

定义三个参数：HeaderTemplate、RowTemplate<t></t>、FooterTemplate
结构上保持语义清晰：<thead>@HeaderTemplate</thead> <tbody>@*循环调用 RowTemplate*@</tbody> <tfoot>@FooterTemplate</tfoot>
调用时自由组合：姓名邮箱<rowtemplate><tr> <td>@context.Name</td> <td>@context.Email</td> </tr></rowtemplate>