如何在 Blazor package 中调用 Javascript？

Question

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:

Javascript Isolataion

Blazor JavaScript isolation and object references

Solved Result

Result

Answer 1

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:

Answer 2

I know this doesn't answer the question, but you don't need any Javascript to change the color of your buttons. You can use variables for either an object's class or its style attributes directly in Blazor.

Answer 3

Try something like the following. It doesn't save much effort in this simple example, but hopefully it will give a good idea about how to move forward from here. IMO you can much more easily adapt Blazor than JavaScript if you want to change anything else.

<div class="row">
    <div class="column" style="width:30%">
        <div class="btn-group" id="group1" data-group="1">
            @foreach (string day in DayChoices)
            {
                string color = (day == SelectedDay) ? "green" : "";  
                   // If above is confusing, google "C# ternary operator"
                <button type="button" class="btn btn-primary @color" @onclick="()=>SetDay(day)">@day</button> 
                   // Using lambda above lets you pass variables to your method easily //
            }
        </div>
    </div>
    <div class="column" style="width:70%">
        <div class="btn-group" id="group2" data-group="2">
            @foreach (string time in TimeChoices)
            {
                string color = (time == SelectedTime) ? "green" : "";
                <button type="button" class="btn btn-primary @color" @onclick="()=>SetTime(time)">@time</button>
            }
        </div>
    </div>
</div>
<h1>Appointment Time: @SelectedDay @SelectedTime </h1>
@code {
    string[] DayChoices = new string[] { "Sunday", "Tuesday", "Friday" };
    string[] TimeChoices = new string[] { "9 am", "2 pm", "5 pm", "8 pm" };
    string SelectedDay { get; set; } = "";
    string SelectedTime { get; set; } = "";

    void SetDay (string Day)
    {
        SelectedDay = Day;
    }
    void SetTime (string Time)
    {
        SelectedTime = Time;
    }
}