如何在 Blazor 包中调用 Javascript？

Question

这是一个 blazor project.The Javascipt 代码用于剃须刀中的按钮。该代码用于按钮组，当人们单击第 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。这是一个演示:

@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 中为对象的 class 或其样式属性使用变量。

Answer 3

尝试如下操作。在这个简单的例子中它并没有节省太多的精力，但希望它能就如何从这里继续前进给出一个好主意。在我看来，如果您想更改其他任何内容，您可以比 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;
    }
}

如何在 Blazor 包中调用 Javascript？

How to call Javascript in Blazor package?

html

javascript

asp.net-core

razor-pages

blazor