Smartstore Tag Helpers指南78个自定义标签助手完全手册【免费下载链接】SmartstoreA modular, scalable and ultra-fast open-source all-in-one eCommerce platform built on ASP.NET Core 10项目地址: https://gitcode.com/GitHub_Trending/smar/SmartstoreSmartstore 是一款基于 ASP.NET Core 10 构建的模块化、可扩展、超高速开源电商一体化平台它的视图层内置了78 个自定义 Tag Helpers标签助手让开发者用类似纯 HTML 的语法就能渲染图片、表单、弹窗、数据表格甚至 AI 控件。本文面向新手带你快速搞懂这 78 个标签助手的分类、用法和源码位置一篇就够。为什么需要 Tag Helpers告别繁琐的视图代码 在 ASP.NET Core MVC 中传统写法经常要写Html.xxx()或调用一堆 C# 方法。Tag Helpers 的思路是直接扩展 HTML 标签本身给img、form甚至全新的datagrid标签加上魔法属性如sm-file、sm-ajax视图代码因此更接近普通 HTML可读性和生产力双提升。Smartstore 的官方基类 SmartTagHelper.cs 为所有助手统一注入了IHtmlHelper、IUrlHelper、本地化器Localizer等常用服务还自带标签 ID 自动生成机制是理解这套体系的入口。30秒启用_ViewImports 中添加 3 行声明要在视图中使用这些标签助手并获得编辑器智能提示只需在_ViewImports.cshtml中按作用域引入对应命名空间addTagHelper Smartstore.Web.TagHelpers.Public.*, Smartstore.Web.Common addTagHelper Smartstore.Web.TagHelpers.Shared.*, Smartstore.Web.Common addTagHelper Smartstore.Web.TagHelpers.Admin.*, Smartstore.Web.Common三行分别对应前台Public、前后端通用Shared、后台Admin三个体系官方教程见 tag-helpers.md。78个标签助手如何分类一张表看懂架构 全部源码位于 TagHelpers 目录按职责划分为 4 大类分类数量位置典型标签Shared 共享47Shared/zone、widget、img sm-file、form sm-ajax、paginationAdmin 后台21Admin/datagrid、setting-editor、ai-imagePublic 前台3Public/captcha、honeypot扩展与基类7Extensions/ 等属性扩展、SmartTagHelper基类其中 Shared 又细分为 19 个通用助手、9 个界面控件弹窗、选项卡、分页等、11 个表单控件和 8 个媒体控件Admin 则包含 11 个 DataGrid 子标签和 4 个 AI 标签助手。最实用的共享标签助手媒体、插槽与条件渲染图片与媒体一行标签渲染商品图所有媒体助手都支持sm-file/sm-file-id属性自动解析文件 URL、alt 文本和缩略图尺寸img sm-fileModel.Picture sm-sizeThumb /对应实现ImageTagHelper.cs、ThumbnailTagHelper.cs另有media、audio、video、cover-image等共 8 个媒体助手。插槽体系 与 解耦主题和模块这是 Smartstore 最精彩的设计zone声明一个投放区任何主题或模块里的widget target-zone...内容都会被自动注入其中实现模块不改主题、主题不碰模块的零耦合扩展详见 widgets.mdzone namecart_summary / widget target-zonecart_summary keymy_price…/widget源码ZoneTagHelper.cs、WidgetTagHelper.cs。条件渲染三件套sm-if、sm-tagname、sm-suppress-if-emptysm-ifModel.visible条件为假时整段输出被抑制sm-tagnamediv运行时动态更换标签名sm-suppress-if-emptytrue内容为空时连容器标签一起移除避免页面留下空白块这三个助手让视图告别if { }嵌套保持 HTML 结构扁平清晰。表单与界面控件editor、file-uploader、modal、tabstripeditor asp-forPrice sm-postfix€ /按类型自动渲染输入框file-uploader upload-url... /高可定制的拖拽上传控件modal id...modal-header/modal-body/modal-footer四标签组合出完整弹窗tabstrip id...tab sm-title...声明式选项卡pagination sm-list-itemsModel /一行生成分页后台核心DataGrid 用 11 个子标签声明完整数据表格 ️Smartstore 后台管理表格没有 JavaScript 配置而是纯声明式——datagrid内部可嵌套 11 个子标签datagrid allow-row-selectiontrue datasource readUrl.Action(ProductList) / sorting enabledtruesort byCreatedOn descendingtrue //sorting paging show-size-choosertrue / columns column forName iconbi:tag / /columns row-commands a datarow-actionDataRowAction.Delete删除/a /row-commands /datagrid子标签包括datasource、columns/column含display-template、edit-template、footer-template、sorting/sort、filtering、paging、toolbar/toolbar-group、search-panel、row-commands、detail-view源码见 Admin/DataGrid 目录。配合setting-editor自动按数据类型生成输入框、entity-picker实体选择器和smart-label后台页面几乎零 C# 代码。AI 标签助手与前台安全组件新特性亮点 ✨AI 系列Admin/AI/ai-image、ai-text、ai-rich-text、ai-suggestion为后台表单提供 AI 生成/建议能力前台安全三件套Publiccaptcha sm-enabled... /人机验证、honeypot /蜜罐防机器人、script sm-consent-typeAnalytics按 Cookie 同意状态延迟加载脚本源码路径速查表 想了解去哪里全部 78 个助手源码src/Smartstore.Web.Common/TagHelpers/官方 Tag Helpers 文档含每个属性说明dev-docs/compose/theming/tag-helpers.md插槽/Widget 机制详解dev-docs/framework/content/widgets.md扩展方法属性、输出操作TagHelperAttributeExtensions.cs主题开发入门含标签助手dev-docs/compose/theming/getting-started-with-themes.md小结Smartstore 的 78 个 Tag Helpers 按Public / Shared / Admin三层组织覆盖媒体渲染、表单控件、插槽扩展、声明式数据表格和 AI 控件五大场景。掌握zone/widget插槽、sm-*条件属性与datagrid三组核心标签你就能读懂 Smartstore 中绝大多数主题与模块的视图代码并写出风格一致的自定义页面 【免费下载链接】SmartstoreA modular, scalable and ultra-fast open-source all-in-one eCommerce platform built on ASP.NET Core 10项目地址: https://gitcode.com/GitHub_Trending/smar/Smartstore创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考