C# 使用 TagHelper 将对象传递到 ViewComponent

Question

我正在尝试创建一个可以与 TagHelpers 一起使用的 ViewComponent，我在其中传入一个对象作为参数。

所以，例如，我有这个 ViewComponent——它最终可能会有更多参数：

public IViewComponentResult Invoke(string? pageTitle, string? description, string? headerView)

我想做类似的事情：

public class PageHeaderViewComponentOptions 
{
    public string pageTitle2;
    public string Description;
}

public IViewComponentResult Invoke(PageHeaderViewComponentOptions phvc)

并像这样使用它：

<vc:page-header phvc:page-title2="Test Title"></vc:page-header>

但是，这不起作用。

我也试过显式设置参数class的属性信息如下：

[HtmlTargetElement("PageHeaderViewController")]
public class PageHeaderViewComponentOptions
{
    [HtmlAttributeName("page-title")]
    public string pageTitle2 { get; set; }
    public string Description;
}

也没有运气。

我的想法是我可以将该对象直接传递给视图。输入这个，我想知道是否单独传递参数然后将每个参数分配给特定视图模型的成员可能是一个更好的主意。

如有任何帮助，我们将不胜感激。

Answer 1

为了将对象添加为参数，您需要传递一个对象。

这个对象可以在控制器中创建并作为视图模型的一部分传递，例如：

@model MyApp.MyViewModel

其中 MyViewModel 类似于：

public class MyViewModel
{
    public PageHeaderViewComponentOptions PhvcOptions { get; set; }
}

然后你像这样传递对象：

<vc:page-header phvc="PhvcOptions"></vc:page-header>

razor 代码块内部：

@{
    var PhvcOptions = new PageHeaderViewComponentOptions
        {
            pageTitle2 = "Test Title";
        };
}

像这样传递对象的地方：

<vc:page-header phvc="@PhvcOptions"></vc:page-header>

甚至内联，看起来像这样：

<vc:page-header phvc="@(new PageHeaderViewComponentOptions { pageTitle2 = "Test Title" })"></vc:page-header>

虽然这违背了目的，但应改用字符串输入：

<vc:page-header pageTitle2="Test Title"></vc:page-header>

对象的优点是可以为空，对象的字段可以省略。标签中需要出现字符串参数，即使是空的。

当您可以使用视图模型的一部分作为参数时，插入对象在 IMO 中也很有用，如上所示，或者当视图模型实现不同的接口并因此可以作为参数本身传递时：

<vc:page-header phvc="Model"></vc:page-header>

其中 MyViewModel 类似于：

public class MyViewModel : IPageHeaderViewComponentOptions 
{
    public string pageTitle2 { get; set; }
}

和

public interface IPageHeaderViewComponentOptions 
{
    string pageTitle2;
}

我没有测试代码，可能有错别字。特别是 @。但是你明白了。两种方法都应该有效。