没有 javascript 的 Blazor 选择拖动（剃刀语法）

Question

简化问题，我在拖动时需要选择许多按钮，我正在使用 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;

}

}

所以当我“鼠标悬停”在按钮上时，我必须“选择”它们。

Answer 1

修改 mousedown 处理程序以包含 MouseEventArgs e 参数。

检查 e 的 CtrlKey 属性以根据 MS docs 切换其多选状态

Answer 2

终于搞定了，不用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;
    }


}