如何在ASP.NET Core的.cshtml视图间共享含HTML代码的函数？

以下是几种可行的方案，替代你当前使用的局部视图方式：

1. 使用视图组件（View Component） #

这是ASP.NET Core官方推荐的复用复杂带HTML逻辑的方式，适配跨视图复用场景：

• 第一步：创建ViewComponent类

public class TestViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(string test)
    {
        // 可在此添加业务逻辑，比如从服务获取数据
        return View("Default", test);
    }
}

• 第二步：创建对应视图文件
  在Views/Shared/Components/Test/Default.cshtml中编写HTML内容：

<div class="test">String @Model</div>

• 第三步：在任意视图中调用
  传统调用方式：

@await Component.InvokeAsync("Test", new { test = "你的文本内容" })

或启用Tag Helper语法（需在_ViewImports.cshtml中添加@addTagHelper *, 你的项目程序集名称）：

<vc:test test="你的文本内容"></vc:test>

2. 使用全局共享的Razor函数文件 #

如果只是简单HTML片段复用，无需复杂业务逻辑，可创建共享Razor文件存放函数：

• 第一步：创建共享文件
  在Views/Shared/_SharedHelpers.cshtml中定义函数：

@{
    async Task Test(string test)
    {
        <div class="test">String @test</div>
    }
}

• 第二步：在视图中使用
  单视图使用：直接在视图顶部导入后调用

@await Html.PartialAsync("_SharedHelpers")
@await Test("示例文本")

全局使用：在_ViewImports.cshtml中添加导入代码，所有视图无需重复导入即可直接调用函数。

3. 自定义Tag Helper（适合HTML元素级复用） #

如果复用逻辑偏向自定义HTML标签，可自定义Tag Helper：

[HtmlTargetElement("test-helper")]
public class TestHelperTagHelper : TagHelper
{
    [HtmlAttributeName("text")]
    public string Text { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.Attributes.SetAttribute("class", "test");
        output.Content.SetHtmlContent($"String {Text}");
    }
}

在_ViewImports.cshtml中添加@addTagHelper *, 你的项目程序集名称后，视图中可直接使用：

<test-helper text="示例文本"></test-helper>

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