Blazor selection dragging without javascript (razor syntax)-CodePudding

Simplifying the problem i need to select many buttons when i drag , im working with blazor server side so I'm trying to do it using the mousedown event(maybe i have to use mouseover instead) but i only can select the first one. My question is , can i do what i need without using javascript(with razor syntax and c#), this is my razor code:

@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;

}

}

So when i "mouseover" over the buttons i have to "select" them.

CodePudding user response：

Modify your mousedown handler to include the MouseEventArgs e parameter.

Check e for the CtrlKey property to toggle it's multiselection status as per MS docs

CodePudding user response：

Finally i get the solution , it can be done without any 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;
    }


}