This is a blazor project.The Javascipt code is for button in razor. The code is for button group which is when people click button in group 1 and group 2 it change color but in the group 1 will not be deselected.
I try to call my javascript function in C# but did’nt work.
export function switch_to_green(el) {
//Check clicked button is on the same group
if (el.parentElement.getAttribute("data-group") == 1) {
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for (let i = 0; i < g1_buttons.length; i++) {
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
} else {
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for (let i = 0; i < g2_buttons.length; i++) {
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}.show {
display: block;
}
.btn-group {
margin-top: 20px;
overflow: hidden;
}
.btn {
font-weight: bold;
color: white;
border: none;
outline: none;
padding: 12px 16px;
/*blue*/
background-color: #2c75ff;
cursor: pointer;
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green {
color: white;
/*green*/
background-color: #85c995;
}@page "/Test"
@inject IJSRuntime JSRuntime;
public
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " @onclick="LoadFile">Sunday</button>
<button type="button" class="btn btn-primary" @onclick="LoadFile">Tuesday</button>
<button type="button" class="btn btn-primary" @onclick="LoadFile">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" @onclick="LoadFile">9 am</button>
<button type="button" class="btn btn-primary" @onclick="LoadFile">2 pm</button>
<button type="button" class="btn btn-primary" @onclick="LoadFile">5 pm</button>
<button type="button" class="btn btn-primary" @onclick="LoadFile">8 pm</button>
</div>
</div>
</div>
@code{
string name = string.Empty;
IJSObjectReference module;
async Task LoadFile()
{
module = await JSRuntime.InvokeAsync< IJSObjectReference>("import","./Script/btn.js");
}
}What I have tried:
Blazor JavaScript isolation and object references
Solved Result
Answer
You can use @ref and pass ElementReference to LoadFile,and module = await JSRuntime.InvokeAsync< IJSObjectReference>("import","./Script/btn.js"); will only load js,you need to call the function switch_to_green.Here is a demo:
@inject IJSRuntime JSRuntime;
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button @ref=button1 type="button" class="btn btn-primary" style="outline-color:red; " @onclick="@(()=>LoadFile(@button1))">Sunday</button>
<button @ref=button2 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button2))">Tuesday</button>
<button @ref=button3 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button3))">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button @ref=button4 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button4))">9 am</button>
<button @ref=button5 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button5))">2 pm</button>
<button @ref=button6 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button6))">5 pm</button>
<button @ref=button7 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button7))">8 pm</button>
</div>
</div>
</div>
@code{
string name = string.Empty;
IJSObjectReference module;
private ElementReference button1;
private ElementReference button2;
private ElementReference button3;
private ElementReference button4;
private ElementReference button5;
private ElementReference button6;
private ElementReference button7;
async Task LoadFile(ElementReference element)
{
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Script/btn.js");
await module.InvokeVoidAsync("switch_to_green", element);
}
}
result:
