javascript - 如何在 Blazor 包中调用 Javascript？

问题描述

这是一个 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 隔离

Blazor JavaScript 隔离和对象引用

解决结果

结果

标签： javascripthtmlasp.net-coreblazorrazor-pages

javascript - 如何在 Blazor 包中调用 Javascript？

问题描述

解决方案

推荐阅读