2

null 許容の bool 値を返すチェック ボックスが必要です。私は何をすべきか？Razer エンジン用の Tri State チェックボックスはありますか? この質問を見つけましたが、リンクが無効です。

4

2 に答える 2

3

TriStateクラス、このクラスのカスタムModelBinder、および対応する表示/編集テンプレートを作成できます。

クラスには、現在の状態の表現を格納するためのプロパティが必要です。方法は関係ありTriStateません。enumintbool?

表示テンプレートは単に状態を表示する必要があります。つまり、州ごとに異なる画像を表示したり、関連する「ラベル」を表示したりできます。

編集テンプレートには状態が表示され、クリックすると 3 つの状態を回転できるスクリプトが必要です。

たとえば、編集/表示テンプレートは、状態のラベルとして使用されるテキストを含むスパンとして実装でき、スパンの背景画像として画像を表示するさまざまな CSS スタイルを持つことができます。これにより、サーバー側とクライアント側の両方のスクリプトでイメージを簡単に変更できます。

編集テンプレートの場合、スパンには次も含まれている必要があります。

  • カスタムが復元できる方法で値を格納する隠しフィールドModelBinder(つまり、値を格納するために文字列としてフォーマットし、文字列を解析して復元する)
  • スパンのクリック イベントを処理し、状態を変更するスクリプト。つまり、非表示フィールドの値と、対応する背景画像を表示するスタイルを更新します。

したがって、次のものが必要です。

  • TriStateクラス
  • クラスModelBinderのカスタム。ここかここを見てください。TriState
  • 表示/編集用のテンプレート。このブログを読む: Brad Wilson: ASP.NET MVC 2 テンプレート
  • さまざまな画像を表示するスタイル (背景画像とパディングを定義して、テキストが画像を上書きしないようにします)。さらに、クリック可能なバージョン (エディター テンプレート) のカーソルをスタイルで変更し、ホバー時の表示を変更して、要素がクリック可能であるというヒントをユーザーに与えることができます。
  • 状態を変更するためのクライアント側スクリプト (エディタ テンプレートのみ)。このスクリプトでは、「data-」属性を追加して目立たないようにすることをお勧めします。この質問に対する私の回答を参照してください。

これを改善するには、クラスに 3 つの追加プロパティを実装して、3 つの状態に表示するラベルを格納します。この値は、クライアント側のスクリプトが現在の状態に応じてラベルを変更できるように、スパンに追加の「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>

これはブレザーコンポーネントです：

<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 に答える