2

我需要一个复选框来返回可为空的布尔值。我该怎么办？是否有适用于 Razer 引擎的三态复选框？我找到了这个问题，但链接无效。

4

2 回答 2

3

您可以创建一个TriState类、该类的自定义ModelBinder以及相应的显示/编辑模板。

该类TriState应该有一个属性来存储当前状态的表示，不管如何：例如使用 an enum，使用int可以是 -1、0 或 1 的 an，或者使用可为空的 boolbool?

显示模板应该简单地显示状态。即它可以为状态显示不同的图像，也许还有一个相关的“标签”。

编辑模板应显示状态并具有允许在单击时旋转 3 个状态的脚本。

例如，编辑/显示模板可以实现为带有文本的跨度，该文本将用作状态的标签，并且可以具有不同的 CSS 样式以将图像显示为跨度的背景图像。这将使更改服务器和客户端脚本中的图像变得容易。

对于编辑模板，跨度还应该有：

  • 以自定义可以恢复的方式存储值的隐藏字段ModelBinder（即格式化为字符串以存储值，并解析字符串以恢复它）
  • 处理 span 的单击事件并更改状态的脚本，即更新隐藏字段中的值以及显示相应背景图像的样式。

所以你需要：

  • TriState班级
  • ModelBinder为TriState班级定制。看这里，或者这里。
  • 用于显示/编辑的模板。阅读此博客：Brad Wilson：ASP.NET MVC 2 模板
  • 显示不同图像的样式（定义背景图像和填充，以便文本不会覆盖图像）。此外，样式可以改变可点击版本（编辑器模板）中的光标，并可能改变悬停时的显示，以提示用户该元素是可点击的。
  • 用于更改状态的客户端脚本（仅适用于编辑器模板）。对于这个脚本，我建议添加一个“data-”属性并不显眼地附加它。请参阅我对这个问题的回答。

您可以通过在类中实现三个附加属性来存储要显示的三个状态的标签来改进这一点。这些值可以作为额外的“数据”属性添加到跨度中，以便客户端脚本可以根据当前状态更改标签。

于 2013-07-12T08:29:16.017 回答
0

我在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;
        }
    }
}
于 2020-09-23T06:13:51.970 回答