我需要一个复选框来返回可为null的布尔值。我该怎么办?Razer发动机有三态复选框吗?我发现了这个问题,但链接无效。
您可以创建一个TriState
类、一个用于该类的自定义ModelBinder
以及相应的显示/编辑模板。
TriState
类应该有一个属性来存储当前状态的表示,这并不重要:例如,对于enum
,对于可以是-1、0或1的int
,或者对于可以为null的bool bool?
显示模板应该简单地显示状态。也就是说,它可以显示各州的不同图像,也许还有一个相关的"标签"。
编辑模板应该显示状态,并有一个脚本,允许在单击时旋转3个状态。
例如,编辑/显示模板可以实现为具有文本的跨度,该文本将用作状态的标签,并且可以具有不同的CSS样式以将图像显示为跨度的背景图像。这样就可以很容易地在服务器和客户端脚本中更改图像。
对于编辑模板,跨度还应具有:
- 以自定义
ModelBinder
可以恢复的方式存储值的隐藏字段(即格式化为字符串以存储值,并解析字符串以恢复值) - 一个脚本,用于处理跨度的单击事件并更改状态,即更新隐藏字段中的值以及显示相应背景图像的样式
所以你需要:
TriState
类- 为
TriState
类自定义ModelBinder
。看这里,或者看这里 - 用于显示/编辑的模板。阅读此博客:Brad Wilson:ASP.NET MVC 2模板
- Syles显示不同的图像(定义背景图像和填充,这样文本就不会覆盖图像)。此外,样式可以更改可点击版本(编辑器模板)中的光标,也可以更改悬停时的显示,以向用户提示元素是可点击的
- 用于更改状态的客户端脚本(仅适用于编辑器模板)。对于这个脚本,我建议添加一个"data-"属性,并不引人注目地附加它。看看我对这个问题的回答
您可以通过在类中实现三个额外的属性来改进这一点,以存储要显示的三个状态的标签。这些值可以作为额外的"数据"属性添加到跨度中,这样客户端脚本就可以根据当前状态更改标签。
我在dotnet/aspnetcore github上发布了一个可能的解决方案,这里是.NET core 3.1+
这是一把小提琴。
我在.NET核心3.1+中实现了这个简单的组件。这是一把小提琴。
css来自bootstrap,需要显示一个空框、一个选中框和一个框;"满";表示状态0,1,-1(可以很容易地更改这些值):
<style>
[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; }
.bootstrap-checkbox { display: inline-block; position: relative; width: 13px; height: 13px; border: 1px solid #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.bootstrap-checkbox i { position: absolute; left: -2px; top: -3px; }
.icon-stop { background-position: -312px -72px; }
.icon-check { background-position: -288px 0px; }
</style>
这就是blazor组件:
<div @ref=checkboxElement class="bootstrap-checkbox" @onclick="(e) => OnClick(e)"><i class="@ImgClass"></i></div>@Description
@code {
public ElementReference checkboxElement { get; set; }
[Parameter]
public string Description { get; set; }
[Parameter]
public bool? Checked { get; set; }
public string ImgClass { get; set; }
public int Value { get; set; }
protected override void OnInitialized()
{
Value = Checked switch { null => -1, true => 1, false => 0 };
ImgClass = Value switch { -1 => "icon-stop", 1 => "icon-check", _ => "" };
}
public void OnClick(MouseEventArgs e)
{
switch (ImgClass)
{
case "":
ImgClass = "icon-check";
Value = 1;
break;
case "icon-check":
ImgClass = "icon-stop";
Value = -1;
break;
case "icon-stop":
ImgClass = "";
Value = 0;
break;
}
}
}