如何在 Blazor 包中调用 Javascript？

Question

这是一个 blazor 项目。Javascipt 代码用于 razor 中的按钮。该代码用于按钮组，当人们单击组 1 和组 2 中的按钮时，它会改变颜色，但不会取消选择组 1。

我尝试在 C# 中调用我的 javascript 函数，但没有成功。

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");
        }
}

我尝试过的：

Javascript Isolataion

Blazor JavaScript isolation and object references

解决的结果

Result

Answer 1

你可以使用@ref并将ElementReference传递给LoadFile，而module = await JSRuntime.InvokeAsync< IJSObjectReference>("import","./Script/btn.js");只会加载js，你需要调用函数switch_to_green。这里是一个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);
    }
}

结果：

Answer 2

我知道这不能回答问题，但您不需要任何 Javascript 来更改按钮的颜色。您可以直接在 Blazor 中为对象的类或其样式属性使用变量。

Answer 3

尝试以下方法。在这个简单的例子中并没有节省太多的精力，但希望它能为如何从这里继续前进提供一个好主意。如果您想更改其他任何内容，IMO 可以比 JavaScript 更轻松地适应 Blazor。

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