Asp.net mvc 4 Razor的三态复选框

我需要一个复选框来返回可为空的布尔值。我该怎么办？ 剃须刀引擎是否有任何三态复选框？

---

我发现了一个问题，但链接无效。

您可以创建一个

TriState

类，一个用于该类的自定义

ModelBinder

，以及相应的显示/编辑模板

TriState

类应该有一个属性来存储当前状态的表示，不管如何：例如使用

enum

，使用可以是-1、0或1的

int

，或者使用可为空的bool

bool？

显示模板应该只显示状态。也就是说，它可以显示状态的不同图像，可能还有一个相关的“标签”

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

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

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

• 以自定义

  ModelBinder

  可以恢复的方式存储值的隐藏字段（即格式化为字符串以存储值，并解析字符串以恢复值）
• 一个脚本，用于处理跨度的单击事件并更改状态，即更新隐藏字段中的值以及显示相应背景图像的样式

因此，您需要：

• TriState

  class
• 用于

  TriState

  类的自定义

  ModelBinder

• 用于显示/编辑的模板。阅读此博客：
• Syles显示不同的图像（定义背景图像和填充，以便文本不会覆盖图像）。此外，该样式可以更改可单击版本（编辑器模板）中的光标，也可以更改悬停时的显示，以提示用户该元素是可单击的
• 用于更改状态的客户端脚本（仅适用于编辑器模板）。对于这个脚本，我建议添加一个“data-”属性，并以不引人注目的方式附加它。看

---

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

我在.NET core 3.1上发布了一个可能的解决方案+

这是一本书

我在.NETCore3.1+中实现了这个简单的组件。 这是一本书

css来自引导，需要显示一个空框、一个选中框和一个“full”框，以指示状态0,1，-1（可以轻松更改这些值）：

[class^=“icon-”]，[class*=“icon-”]{显示：内联块；宽度：14px；高度：14px；页边距顶部：1px；*页边距右侧：.3em；行高：14px；垂直对齐：文本顶部；背景图像：url（/img/glyphions-halflings.png）；背景位置：14px-14px；背景重复：无重复；}
.bootstrap复选框{显示：内联块；位置：相对；宽度：13px；高度：13px；边框：1px实心#000；-webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无；}
.bootstrap复选框i{位置：绝对；左侧：-2px；顶部：-3px；}
.icon stop{背景位置：-312px-72px；}
.图标检查{背景位置：-288px 0px；}

这是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;
        }
    }
}

@说明
@代码{
公共元素引用checkboxElement{get；set；}
[参数]
公共字符串说明{get；set；}
[参数]
公共bool？选中{get；set；}
公共字符串ImgClass{get；set；}
公共int值{get；set；}
受保护的覆盖无效OnInitialized（）
{
Value=选中的开关{null=>-1，true=>1，false=>0}；
ImgClass=值开关{-1=>“图标停止”，1=>“图标检查”，“_=>”；
}
点击公共空区（MouseEventArgs e）
{
开关（ImgClass）
{
案例“”：
ImgClass=“图标检查”；
数值=1；
打破
案例“图标检查”：
ImgClass=“图标停止”；
值=-1；
打破
案例“图标停止”：
ImgClass=“”；
数值=0；
打破
}
}
}

razor中没有三态复选框。在这种情况下，要执行null的是什么？我正在尝试创建一个搜索面板。用户可以通过可为空的属性搜索实体。

<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;
        }
    }
}