Blazor中使用TagHelpers及解决CS0103编译错误的技术咨询

首先得明确一个关键核心：Blazor组件（.razor文件）本身并不支持传统的ASP.NET Core TagHelpers，你遇到的CS0103错误正是源于此——Blazor的编译上下文里没有TagHelpers依赖的StartTagHelperWritingScope这类方法，它是为MVC/Razor Pages的Razor视图引擎设计的，和Blazor的组件模型完全不是一套体系。

下面分两种场景给你针对性解决方案：

场景1：在Blazor项目的Razor视图中使用TagHelpers #

如果是Blazor Server项目里的.cshtml文件（比如_Host.cshtml、_Layout.cshtml这类布局文件），这些属于ASP.NET Core MVC/Razor Pages的范畴，是可以正常使用TagHelpers的，只需按普通MVC项目的方式配置：

• 在项目根目录的_ViewImports.cshtml文件中，添加你的TagHelper所在程序集的引用：

  @addTagHelper *, YourProjectAssemblyName
  

  把YourProjectAssemblyName替换成你的TagHelper类所在的程序集名称（一般就是项目名称）。
• 确保你的TagHelper类是public的，继承自TagHelper，并且标注了正确的[HtmlTargetElement]特性，示例代码：

  [HtmlTargetElement("my-custom-tag")]
  public class MyCustomTagHelper : TagHelper
  {
      public override void Process(TagHelperContext context, TagHelperOutput output)
      {
          // 这里编写你的TagHelper逻辑
      }
  }
  

场景2：在Blazor组件中实现类似TagHelpers的功能 #

既然Blazor组件不支持TagHelpers，那应该用Blazor的**组件（Component）**来替代，这才是Blazor生态里复用UI和逻辑的标准方式：

1. 创建一个Razor组件文件（比如MyCustomComponent.razor），实现你需要的UI和逻辑：

   <div class="custom-container">
       @ChildContent
       @if (ShowExtraSection)
       {
           <div class="extra-section">额外展示内容</div>
       }
   </div>
   
   @code {
       [Parameter]
       public RenderFragment ChildContent { get; set; }
   
       [Parameter]
       public bool ShowExtraSection { get; set; } = false;
   }
   

2. 在需要使用的Blazor组件中，直接引用这个组件即可：

   <MyCustomComponent ShowExtraSection="true">
       <p>这是传入组件的自定义内容</p>
   </MyCustomComponent>
   

   这种方式不仅能实现和TagHelpers类似的复用效果，还能更好地融入Blazor的组件生命周期和状态管理体系。

关于StartTagHelperWritingScope错误的根源 #

简单来说，Blazor的Razor组件编译管道和MVC/Razor Pages的Razor视图编译管道完全独立：

• MVC/Razor Pages的视图会被编译成依赖Razor引擎的代码，其中包含处理TagHelpers的StartTagHelperWritingScope等方法；
• 而Blazor组件会被编译成直接继承自ComponentBase的.NET类，整个编译过程不涉及TagHelpers的相关逻辑，所以自然找不到这些方法。

如果是你不小心在.razor组件文件中使用了TagHelpers语法，只需把这些用法替换成Blazor组件就能解决错误。

内容的提问来源于stack exchange，提问作者Sebastian P.R. Gingter