.netrazorblazormultiple-select

Blazor selection dragging without javascript (razor syntax)


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.


Solution

  • 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;
        }
    
    
    }