DotVVM 在运行时从 Panel 组件更改 CssStyle 属性不起作用

Question

我试图通过按钮单击命令以编程方式从 Panel 组件更改 CssStyle 属性“背景颜色”，但没有任何反应。如果我在 ViewModel Load() 方法上设置属性，则有效。页面加载后不会。

DefaultViewModel 类范围:

private Panel p = new Panel();

DefaultViewModel, Load() 方法:

base.Context.View.Children.Add(p);
p.CssStyles.Add("height", "400px");
p.CssStyles.Add("width", "400px");
p.CssStyles.Add("background-color", "#c0c0c0");

按钮点击命令:

p.CssStyles.Remove("background-color");
p.CssStyles.Add("background-color", "#000fff");

我忘记了什么？

我的 dotVVM 版本是 2.2.155.0 Visual Studio 2019.NET 框架 4.7.2

谢谢。

Answer 1

DotVVM 不会以这种方式工作，控件没有任何状态，因此在命令中操作它们没有多大意义。 DotVVM 中的控件只是在第一次请求时发送给客户端的 HTML 的薄包装。由于命令不会生成 HTML，因此控件的修改不会传播到浏览器(除非您在控件上使用 Postback.Update 属性)

您想将状态存储在 View 模型中，然后将其数据绑定(bind)到控件。我不确定你到底想做什么，所以假设你想在某些情况下突出显示 div。标记(在 dothtml 文件中)可能如下所示:

<div Style-background-color="{value: IsHighlighted ? "#000fff" : "#c0c0c0"}">
    ...
</div>

或者如果你更喜欢使用 css 类，可以这样

<div Class-highlight="{value: IsHighlighted}">
    ...
</div>

相应的 View 模型将仅包含属性 IsHighlighted，您的命令将为其分配 true:

public bool IsHighlighted { get; set; }

public void DoSomething() {
    this.IsHighlighted = true;
}