asp.net-core - 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" />
并将渲染模式设置为静态,组件将正确地看到列表,作为从基类派生的类型项目的混合列表。
为什么会这样?这是一个错误还是存在一些配置问题?
解决方案
推荐阅读
- ruby-on-rails - Rails:使用 get 'signup' => 'users#new' 而不是 get 'signup' 是否有问题:'users#new'
- python - 在 python 中添加小时到时间字符串以匹配时区
- php - docker wordpress 容器无法连接到 mysql 容器
- google-cloud-firestore - 阻止用户阅读 Firestore 中的整个集合?
- shiny - Leaflet Marketr Cluster 无法在 Shiny 中使用 Echarts4r
- rx-swift - 带重放的 FlatMapLatest
- swift - 我的图像没有按正确的顺序加载
- javascript - 尝试从我的 JSON 文件访问一组图像到我的 JS 代码
- database - Oracle数据库表删除最佳实践
- vue.js - Vue 在与渲染功能一起使用时失去槽反应性