DotVVM - 在 GridView 中对行进行着色有哪些可能性？

Question

我试图根据行中基础项目的GridView状态（值）对行进行着色，但我在文档中找到的解决方案似乎都不适合我。Enum我有DataSource这样的GridViewpublic GridViewDataSet<DTO> Items { get; set; }DTOBootstrapColor对象来自微服务，因此在我看来，将 type 属性添加到基于“深层后端”微服务的 DTO 对象中似乎不合理。这种方法的灵感来自于此处的示例 2： https: //www.dotvvm.com/docs/controls/bootstrap/GridView/2.0也许，可以<dot:Decorator>像示例 5 中那样使用： https://www.dotvvm.com/docs/controls/builtin/GridView/latest但我还没有找到任何根据文档中的某些条件使用<dot:Decorator>或着色行的正确示例。<bs:ColorDecorator>我只能用相同的颜色为所有行着色。我尝试在标记中应用一些条件，例如。<RowDecorators>     <bs:ColorDecorator Color="{value: EnumState == StateValue ? Color1 : Color2 }"></bs:ColorDecorator> </RowDecorators>但没用除了上述之外，还有其他方法可以为 GridView 的行着色吗？

Answer 1

枚举BootstrapColor应该被视为表示层的东西。您是对的，在内部微服务或应用程序的较低层中使用它是不明智的。

来自较低层的 DTO 应该包含有关正在发生的事情的信息，而不关心它将如何显示给用户。我期望一个具有Paid、等值的枚举，或者一组标志 -等Unpaid。CanceledboolIsPaidIsCanceled

在表示层，您有两个选择：

1. 将 DTO 投影到另一个包含BootstrapColor枚举值的 DTO（手动或使用 AutoMapper 等）。

2. 使用 DotVVM 数据绑定中的表达式在标记中进行转换。

对于简单的情况，我会选择第二个选项。

正确的语法<bs:ColorDecorator>是这样的：

<RowDecorators>
    <bs:ColorDecorator Color="{value: State == OrderState.Confirmed ? BootstrapColor.Success : BootstrapColor.Danger }" />
</RowDecorators>

您需要添加适当的@import指令，以便枚举能够正确解析。

如果有两个以上的选项，或者某些状态可以共存，您可以考虑使用 CSS 类：

<RowDecorators>
    <dot:Decorator class-active="{value: IsActive}" class-paid="{value: IsPaid}" />
</RowDecorators>

这将根据和属性的值在行上添加active和CSS 类（它们必须是）。paidIsActiveIsPaidbool