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

Question

简化问题我需要 select 很多按钮，当我拖动时，我正在使用 blazor 服务器端，所以我正在尝试使用 mousedown 事件来做到这一点（也许我必须改用鼠标悬停）但是我只能 select 第一个。我的问题是，我可以不使用 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;

}

}

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

Answer 1

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

检查 Ctrl 键的 e 属性以根据 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;
    }


}

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

Blazor selection dragging without javascript (razor syntax)

.net

razor

blazor

multiple-select