沒有javascript的Blazor選擇拖動（剃刀語法）

簡化問題我需要在拖動時選擇許多按鈕，我在使用 blazor 服務器端，所以我嘗試使用 mousedown 事件（也許我必須使用 mouseover 代替）來做到這一點，但我只能選擇第一個。我的問題是，我可以在不使用 javascript（使用 razor 語法和 c#）的情況下做我需要的，這是我的 razor 代碼：

@page "/"

<h1>Multiple selection example</h1>



@foreach (Button btn in buttonList)
{
    <button disabled="@btn.selected"
            @onclick="(e) => SelectOne(e, btn)"
            @onmouseup="(e) => Over(e, btn)">
        button id @btn.number
    </button>
}


@code{

public List<Button> buttonList = new() {
    new Button() { number = 1 },
    new Button() { number = 2 },
    new Button() { number = 3 },
    new Button() { number = 4 },
    new Button() { number = 5 }
};



public void SelectOne(MouseEventArgs e, Button btn)
{

    btn.selected = !btn.selected;

}
public void Over(MouseEventArgs e, Button btn) {
    if (e.CtrlKey)
    {
        btn.selected = !btn.selected;
    }

}



public class Button
{
    public int number { get; set; }
    public bool selected { get; set; } = false;

}

}

因此，當我將滑鼠懸停在按鈕上時，我必須“選擇”它們。

uj5u.com熱心網友回復：

修改 mousedown 處理程式以包含 MouseEventArgs e 引數。

檢查 e 的 CtrlKey 屬性以根據MS 檔案切換它的多選狀態

uj5u.com熱心網友回復：

最后我得到了解決方案，它可以在沒有任何 js 的情況下完成。

@page "/"
<h1>Multiple selection example</h1>



@foreach (Button btn in buttonList)
{
    <button disabled="@btn.selected"
            @onclick="(e) => SelectOne(e, btn)"
            @onmouseover="(e) => Over(e, btn)"
            style="border-block-color:@btn.bordercolor"
            >
        button id @btn.number
    </button>
}


<button @onclick="() => this.multipleSelection = false">Disable multiselection</button>
<button @onclick="() => this.multipleSelection = true">multiselection</button>



@code{
    public bool multipleSelection = false;
    public List<Button> buttonList = new()
    {
        new Button() { number = 1 },
        new Button() { number = 2 },
        new Button() { number = 3 },
        new Button() { number = 4 },
        new Button() { number = 5 }
    };



    public void SelectOne(MouseEventArgs e, Button btn) {
        if (!multipleSelection) btn.select();
        if (this.multipleSelection && buttonList.All(x => x.bordercolor == "none"))
        {

            btn.bordercolor = "coral";
            return;

        }
        if (this.multipleSelection && buttonList.Any(x => x.bordercolor != "none"))
        {

            this.multipleSelection = false;

            this.buttonList.Where(X => X.bordercolor != "none").ToList().ForEach(X => X.select());
            this.buttonList.ForEach(x => x.bordercolor = "none");


        }



    }
    public void Over(MouseEventArgs e, Button btn)
    {


        if (this.multipleSelection && buttonList.Any(x => x.bordercolor != "none"))
        {
            btn.bordercolor = "coral";
        }

    }



    public class Button
    {
        public int number { get; set; }
        public bool selected { get; set; } = false;
        public bool clicked { get; set; } = false;
        public bool hovered { get; set; } = false;
        public string bordercolor = "none";
        public void select() => selected = !selected;
    }


}

標籤：。网 剃刀 西装外套 多选

上一篇：在聚合之外強制執行業務規則

下一篇：Xamarin表單自行更改png圖示的顏色