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