如何从Razor页面调用代码后置方法渲染ViewComponent？

步骤1：在页面代码后置文件（PageModel）中实现封装方法 #

首先注入IViewComponentHelper服务（ASP.NET Core渲染ViewComponent的核心依赖），然后编写封装查找子功能、调用ViewComponent的方法：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

public class YourPageModel : PageModel
{
    private readonly IViewComponentHelper _viewComponentHelper;

    // 若capabilities/deviceType是页面级属性，直接声明即可
    public IEnumerable<Capability> Capabilities { get; set; }
    public string DeviceType { get; set; }

    public YourPageModel(IViewComponentHelper viewComponentHelper)
    {
        _viewComponentHelper = viewComponentHelper;
        // 必须设置ViewContext，否则ViewComponent无法正常渲染
        _viewComponentHelper.Context = ViewContext;
    }

    // 封装后的方法，返回可直接渲染的HTML内容
    public async Task<IHtmlContent> RenderTapWaterTemperatureComponent(int level = 1)
    {
        var subCapability = Capabilities.FindCapability(Capabilities, "TapWater.Temperatures");
        
        // 处理找不到子功能的边界情况
        if (subCapability == null)
        {
            return new HtmlString(string.Empty);
        }

        // 调用ViewComponent，逻辑与原代码完全一致
        return await _viewComponentHelper.InvokeAsync(
            (string)subCapability.ClassName, 
            new 
            { 
                deviceType = DeviceType, 
                capability = subCapability, 
                level = level 
            }
        );
    }
}

如果capabilities和deviceType是Razor视图中的局部变量，可修改方法为接收参数的形式：

public async Task<IHtmlContent> RenderTapWaterTemperatureComponent(
    IEnumerable<Capability> capabilities, 
    string deviceType, 
    int level = 1)
{
    var subCapability = Capabilities.FindCapability(capabilities, "TapWater.Temperatures");
    if (subCapability == null)
    {
        return new HtmlString(string.Empty);
    }

    return await _viewComponentHelper.InvokeAsync(
        (string)subCapability.ClassName, 
        new 
        { 
            deviceType = deviceType, 
            capability = subCapability, 
            level = level 
        }
    );
}

步骤2：修改Razor视图中的调用代码 #

将原来的两行逻辑代码，替换为对PageModel自定义方法的调用：

情况1：使用页面级属性 #

@await Model.RenderTapWaterTemperatureComponent(1)

情况2：传递局部变量 #

@await Model.RenderTapWaterTemperatureComponent(capabilities, deviceType, 1)

关键说明 #

• IViewComponentHelper与Razor中Component静态类底层依赖相同，可完全替代Component.InvokeAsync的功能。
• 必须为IViewComponentHelper设置ViewContext，否则会因上下文缺失导致渲染失败。
• 方法返回Task<IHtmlContent>，这是Razor中可直接用@await渲染的类型，输出效果与原代码完全一致。

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