如何在ASP.NET Core Razor Pages中通过TagHelper像Blazor一样引用组件？

没问题，你猜的方向完全正确——自定义TagHelper确实能帮你在Razor Pages里实现和Blazor一样简洁的组件引用语法。我来一步步给你讲怎么实现：

核心思路是创建一个TagHelper，把<MyComponent Property="value" />这种简洁语法自动转换成Razor Pages要求的<component>标签格式，同时帮你处理参数映射和渲染模式配置。

1. 创建通用Blazor组件TagHelper #

首先在你的Razor Pages项目（或共享类库）里创建一个TagHelper类，它会负责解析自定义标签并生成标准的<component>代码：

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Reflection;
using System.Threading.Tasks;

// 匹配所有带blazor-component属性的标签，或者直接匹配组件类名标签
[HtmlTargetElement("*", Attributes = "blazor-component")]
public class BlazorComponentTagHelper : TagHelper
{
    private readonly IComponentActivator _componentActivator;

    public BlazorComponentTagHelper(IComponentActivator componentActivator)
    {
        _componentActivator = componentActivator;
    }

    // 可选：通过属性指定组件类型，适合标签名和组件类名不一致的情况
    [HtmlAttributeName("blazor-component")]
    public Type ComponentType { get; set; }

    // 默认渲染模式，可按需修改
    public RenderMode RenderMode { get; set; } = RenderMode.ServerPrerendered;

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // 优先使用指定的ComponentType，否则通过标签名匹配组件类
        var targetComponentType = ComponentType ?? FindComponentByTagName(output.TagName);
        if (targetComponentType == null)
        {
            output.SuppressOutput(); // 找不到组件则不渲染
            return;
        }

        // 替换为标准的<component>标签
        output.TagName = "component";
        output.Attributes.Clear();

        // 添加必填的type和render-mode属性
        output.Attributes.Add("type", $"typeof({targetComponentType.FullName})");
        output.Attributes.Add("render-mode", RenderMode.ToString());

        // 把自定义属性转换成param-*格式
        foreach (var attr in context.AllAttributes)
        {
            if (attr.Name != "blazor-component" && attr.Name != "render-mode")
            {
                output.Attributes.Add($"param-{attr.Name}", attr.Value);
            }
        }

        // 保留组件的子内容（如果有的话）
        var childContent = await output.GetChildContentAsync();
        output.Content.SetHtmlContent(childContent);
    }

    // 根据标签名查找对应的Blazor组件类型（需确保命名空间和程序集正确）
    private Type FindComponentByTagName(string tagName)
    {
        // 替换成你的Blazor组件所在的程序集和命名空间
        var componentAssembly = typeof(MyComponent).Assembly;
        return componentAssembly.GetType($"YourBlazorComponentNamespace.{tagName}");
    }
}

2. 注册TagHelper #

在Razor Pages项目的_ViewImports.cshtml文件中，添加TagHelper的引用，让框架能识别它：

@addTagHelper *, YourRazorPagesAssemblyName // 替换成TagHelper所在的程序集名称

3. 使用简化语法引用组件 #

现在你就可以在Razor Pages的.cshtml文件里像Blazor那样引用组件了，有两种使用方式：

方式一：自动匹配组件类名 #

只要标签名和Blazor组件类名完全一致，就可以直接用：

<MyComponent Property="Hello from Razor Pages!" render-mode="Server" />

方式二：指定组件类型（适合特殊场景） #

如果标签名和组件类名不一致，或者需要更明确的声明，可以通过blazor-component属性指定组件类型：

<custom-greeting blazor-component="typeof(MyComponent)" Property="Hi there!" />

进阶：为特定组件创建专属TagHelper #

如果有高频使用的组件，你可以为它单独创建TagHelper，进一步优化体验：

[HtmlTargetElement("MyComponent")]
public class MyComponentTagHelper : TagHelper
{
    // 直接映射组件的参数
    public string Property { get; set; }
    public int Count { get; set; } = 0;

    public RenderMode RenderMode { get; set; } = RenderMode.ServerPrerendered;

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "component";
        output.Attributes.Clear();
        output.Attributes.Add("type", "typeof(MyComponent)");
        output.Attributes.Add("render-mode", RenderMode.ToString());

        // 逐个处理组件参数
        if (!string.IsNullOrEmpty(Property))
        {
            output.Attributes.Add("param-Property", Property);
        }
        if (Count > 0)
        {
            output.Attributes.Add("param-Count", Count);
        }
    }
}

使用时和Blazor完全一致：

<MyComponent Property="Customized usage!" Count="5" />

注意事项 #

• 确保Blazor组件所在的程序集已被Razor Pages项目引用
• 复杂参数（比如对象、委托）需要额外处理序列化逻辑，基础版本仅支持简单类型
• 渲染模式可根据需求选择Server、Static或WebAssembly等

内容的提问来源于stack exchange，提问作者David Hamilton