首页 > 解决方案 > Razor 组件 (Blazor) - 影响派生类列表的渲染模式

问题描述

我有一个 Razor 组件,我将其放到 Razor 页面上,如下所示:

<component type="typeof(ElementProductComponent)"
render-mode="Server"
param-elementList="Model.elementList" />

我将一个列表(elementList)作为参数传递给组件。

该列表在后面的剃须刀页面代码中声明为

 [BindProperty]    
public List<ElementModel> elementList { get; set; }

ElementModel 是一个基类。该列表通常包含从基类派生的各种类型的项目(ElementTextModel、ElementDateModel 等)

在剃刀页面的代码绑定中,列表填充如下:

 public async Task<IActionResult> OnGet(string id)
    {
        elementList = GetList();

        return Page();
    }
    public static List<ElementModel> GetList()
    {
        var elements = new List<ElementModel>();

        elements.Add(new ElementTextModel { Name = "TestTextName", Value = "hello world" });
        elements.Add(new ElementDateModel { Name = "TestDateName", Value = "20200101" });

        return elements;

    }

模型如下所示:

public class ElementModel
{

    [Required] 
    public string Name { get; set; }


    [Required] 
    public virtual ElementType Type { get; }



}

 public class ElementTextModel : ElementModel
{

    [Required]
    public string Value { get; set; }

    public Hashtable Attributes { get; set; }

    [Required]
    public override ElementType Type { get { return ElementType.TEXT; } }
}

然后在我的组件中,我想遍历列表并根据列表中每个项目的类型显示不同的 html 子组件。我可以通过开关或 if 来做到这一点。这是代码的简化版本,我只是想显示我看到的类型。

    <div>
    Elements:
    <ul>
        @for (var i = 0; i < elementList.Count; i++)
        {
        <li>       
                <div>@elementList[i].Type</div>
                <div>@elementList[i].Name</div>

        </li>

        }
    </ul>
</div>
@code {

    [Parameter]
    public List<ElementModel> elementList { get; set; }

}

问题是当我声明组件时

<component type="typeof(ElementProductComponent)"
render-mode="Server"
param-elementList="Model.elementList" />

将渲染模式设置为 Server 时,组件中的代码将 elementList 中的项目视为 ElementModel 类型,而不管它们是如何声明的。这是不正确的。

如果我这样做:

<component type="typeof(ElementProductComponent)"
render-mode="Static"
param-elementList="Model.elementList" />

并将渲染模式设置为静态,组件将正确地看到列表,作为从基类派生的类型项目的混合列表。

为什么会这样?这是一个错误还是存在一些配置问题?

标签: asp.net-corerazorblazor

解决方案


推荐阅读