C# 通过互操作添加简单的DOM操作JS脚本

我正在尝试将此Javascript函数导入Blazor应用程序。脚本的功能很简单，将class

c-show

添加到已有两个类的列表

元素中。完成时的原始javascript是：

Javascript

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.c-sidebar-nav-item.c-sidebar-nav-dropdown').forEach(dropMenu => {
        dropMenu.addEventListener('click', () => dropMenu.classList.toggle('c-show'));
      });
    })

此脚本影响此元素：

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown">

我正试图通过互操作使用Blazor/C实现同样的目标

因此，我在元素中添加了以下内容：

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown" @onclick="dropMenu">

---

但我不完全确定如何获得我正在努力的结果，因为我只知道我需要以某种方式调整javascript，但不确定如何调整。

您可以使用OnAfterRenderAsync方法中的JSInterop调用来初始化javascript对象，这只能做一次，然后，您可以在每次呈现组件时调用JavaScript方法

注意：为了执行JSInterop调用，需要注入JSRuntime对象

 @page "/"
 @inject IJSRuntime jsRuntime

 <li id="myid" @ref=MyElementReference class="c-sidebar-nav-item c-sidebar- 
                                        nav-dropdown" @onclick="dropMenu"> 

@code{
    // This add an element reference to the li element, which you can pass to 
    // your JavaScript functions
    ElementReference MyElementReference;

    // You have to call your JavaScript code after your components have been 
    // rendered. The OnAfterRenderAsync method is called after the component 
    // has been rendered, and thus you can put code here to initialize your 
    // component. This should be when firstRender is true, and multiple calls 
    // to your JavaScript objects, when firstRender is false.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Note: Here you initialize your elements, only once. When the user 
        // clicks on the li element, you'll call your required method from 
        // the click event handler dropMenu

        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                    MyElementReference);
        }

    }
}



public async void dropMenu() 
  {
    await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                        MyElementReference);

  }

@page/“
@注入IJSRuntime jsRuntime

@代码{
//这将向li元素添加元素引用，您可以将其传递给
//您的JavaScript函数
元素引用MyElementReference；
//您必须在组件完成后调用JavaScript代码
//在组件之后调用OnAfterRenderAsync方法
//已呈现，因此您可以将代码放在此处以初始化
//当firstRender为true且多次调用
//当firstRender为false时，将复制到JavaScript对象。
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
//注意：这里只初始化一次元素
//单击li元素，您将从调用所需的方法
//单击事件处理程序下拉菜单
if（firstRender）
{
等待JSRuntime.InvokeAsync（“MyJSMethods.myMethod”，
髓鞘中心；
}
}
}
公共异步void dropMenu（）
{
等待JSRuntime.InvokeAsync（“MyJSMethods.myMethod”，
髓鞘中心；
}

将脚本放在_Host.cshtml文件的底部，就在下面 相应地调整元素。注意：此处的代码仅显示带有li标记id的警报。相反，您必须添加代码以根据需要更改对象

<script src="_framework/blazor.server.js"></script>
<script>
        window.MyJSMethods =
        {
            myMethod: function (element) {
                window.alert(element.id);
            }
        };
    </script>

window.MyJSMethods=
{
myMethod:函数（元素）{
window.alert（element.id）；
}
};

---

请注意，函数采用的名为element的参数是一个element对象，因为我们在Blazor中将参数定义为ElementReference。当然，您可以传递元素id或类名等。

是函数（元素）{我输入JS脚本的地方吗？我不确定我是否理解您的评论。所以我的JS是dropMenu.classList.toggle（'c-show'）；这将对DOM进行调整。所以在脚本标记中，在函数（元素）之后{在js脚本dropMenu.classList.toggle（'c-show'）中写window.alert的地方)；？MyJSMethods.myMethod是您从dropMenu Blazor方法调用的js函数的名称。请注意，我们向js函数传递了一个名为MyLementReference的参数。此参数是一个Blazor对象，它将成为MyJSMethods.myMethod方法中的JavaScript元素。这就是您可以直接引用element.id的原因ent对象代表li元素，我已经给了它id=“myid”。明白了吗？现在，在MyJSMethods.myMethod方法中，不显示警报窗口，而是将作用于元素对象的JavaScript放在其中，例如element.setAttribute（“disabled”，“”）；

 @page "/"
 @inject IJSRuntime jsRuntime

 <li id="myid" @ref=MyElementReference class="c-sidebar-nav-item c-sidebar- 
                                        nav-dropdown" @onclick="dropMenu"> 

@code{
    // This add an element reference to the li element, which you can pass to 
    // your JavaScript functions
    ElementReference MyElementReference;

    // You have to call your JavaScript code after your components have been 
    // rendered. The OnAfterRenderAsync method is called after the component 
    // has been rendered, and thus you can put code here to initialize your 
    // component. This should be when firstRender is true, and multiple calls 
    // to your JavaScript objects, when firstRender is false.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Note: Here you initialize your elements, only once. When the user 
        // clicks on the li element, you'll call your required method from 
        // the click event handler dropMenu

        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                    MyElementReference);
        }

    }
}



public async void dropMenu() 
  {
    await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", 
                        MyElementReference);

  }

<script src="_framework/blazor.server.js"></script>
<script>
        window.MyJSMethods =
        {
            myMethod: function (element) {
                window.alert(element.id);
            }
        };
    </script>