通过 Interop 添加一个简单的 DOM 操作 JS 脚本

Question

我正在尝试将此 Javascript 函数导入我的 Blazor 应用程序。该脚本的功能很简单，将c-show 类添加到已经有两个类的现有列表<li> 元素中。其完成的原始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">

添加c-show 使其：

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

我正在尝试通过 Interop 使用 Blazor/C# 实现相同的目标。

所以我在我的元素中添加了以下内容：

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

我的代码部分是：

@code {

  public async void dropMenu() 
  {
    classList.toggle('c-show')
  }
}

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

Answer 1

您可以使用 OnAfterRenderAsync 方法中的 JSInterop 调用来初始化您的 JavaScript 对象，这只能完成一次，然后您可以在每次渲染组件时调用您的 JavaScript 方法。

注意：您需要注入 JSRuntime 对象才能执行 JSInterop 调用。

 @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);

  }

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

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

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