Tri state check box for Razor - asp.net-mvc-4

Question

I need a check box to return nullable bool value. What should I do?
Is there any Tri State Check Box for Razer engine?
I found this question, but the link is not valid.

Answer 1

You could create a TriState class, a custom ModelBinder for this class, and the corresponding Display/Edit templates.
The TriState class should have a property to store the representation of the current state, it doesn't matter how: for example with an enum, with an int that can be -1, 0 or 1, or with a nullable bool bool?
The display template should simply show the state. I.e. it can show different images for the states, and perhaps an associated "label".
The edit template should show the state and have an script that allows to rotate the 3 states when clicked.
For example, the edit/display template could be implemented as a span with a text that would be used as a label for the state, and could have different CSS styles to show the image as a background image for the span. That would make it easy to change the image both in the server and in the client side scripts.
For the edit template, the span should also have:
a hidden field that stores the value in a way that the custom ModelBinder can recover (i.e. format as string to store the value, and parse the string to recover it)
an script that handles the click event for the span and changes the sate, i.e. that updates the value in the hidden field, as well as the style that shows the corresponding background image.
So you'd need:
TriState class
Custom ModelBinder for TriState class. Look here, or here.
Templates for display/edit. Read this blog: Brad Wilson: ASP.NET MVC 2 Templates
Syles to show the different images (define a background image and a padding so that the text doesn't overwrite the image). Besides, the style could change the cursor in the clickable version (editor template), and perhaps change the display on hover, to give the user a hint that the element is clickable.
Client side script to change the state (only for the editor template). For this script I'd recommend to add a "data-" attribute and attach it unobtrusively. See my answer to this question.
You could improve this by implementing three additional properties in the class to store the labels to show for the three states. This values could be added as extra "data-" attributes in the span, so that the client side script can change the label depending on the current state.

Answer 2

I posted a possible solution on dotnet/aspnetcore github and here for .NET core 3.1+
Here is a fiddle.
I implemented this simple component in .NET core 3.1+.
Here is a fiddle.
The css is from bootstrap, needed to display an empty box, a checked one and a box "full" to indicate the states 0,1,-1 (can change these values easily):
<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>
and this is the blazor component:
<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;
}
}
}