[英]Tri state check box for Razor
您可以为此类创建一个TriState
类、一个自定义ModelBinder
以及相应的显示/编辑模板。
TriState
类应该有一个属性来存储当前状态的表示,不管如何:例如,使用enum
,使用可以是 -1、0 或 1 的int
,或者使用可为空的 bool bool?
显示模板应该只显示状态。 即它可以显示状态的不同图像,并且可能显示相关的“标签”。
编辑模板应显示状态并具有允许在单击时旋转 3 个状态的脚本。
例如,编辑/显示模板可以实现为带有文本的跨度,该文本将用作状态的标签,并且可以具有不同的 CSS 样式以将图像显示为跨度的背景图像。 这将使更改服务器和客户端脚本中的图像变得容易。
对于编辑模板,跨度还应具有:
ModelBinder
可以恢复的方式存储值(即格式化为字符串以存储值,并解析字符串以恢复它)所以你需要:
TriState
类TriState
类的自定义ModelBinder
。 看这里, 或者这里。您可以通过在类中实现三个附加属性来存储标签以显示三种状态来改进这一点。 该值可以作为额外的“数据-”属性添加到跨度中,以便客户端脚本可以根据当前状态更改标签。
我在dotnet/aspnetcore github和这里为 .NET core 3.1+ 发布了一个可能的解决方案
这是一个小提琴。
我在 .NET core 3.1+ 中实现了这个简单的组件。 这是一个小提琴。
css 来自引导程序,需要显示一个空框、一个选中的框和一个“完整”框以指示状态 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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.