在 Blazor 中使用 jQuery

Question

为了让移动导航菜单正常工作，我有这个 Javascript 块：

function AddMobileNavMenu() {
    var $body = $('body')
    $(
        '<div id="navPanel">' +
        $('#nav').html() +
        '<a href="#navPanel" class="close"></a>' +
        '</div>'
    )
        .appendTo($body)
        .panel({
            delay: 500,
            hideOnClick: true,
            hideOnSwipe: true,
            resetScroll: true,
            resetForms: true,
            side: 'left'
        });
}

但我无法 javascript 使用 Blazor - 我通读了所有 JSInterop 文档并发现这个（在 _Host.cshtml 文件中）：

@page "/"
@namespace FIS2.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FIS2</title>
    <base href="~/" />
    <link rel="stylesheet" href="FontAwesome/scss/fontawesome.min.css" />
    <link rel="stylesheet" href="FontAwesome/scss/solid.min.css" />
    <link rel="stylesheet" href="FontAwesome/scss/regular.min.css" />
    <link rel="stylesheet" href="css/syncfusion/syncfusionTheme.css" />
    <link rel="stylesheet" href="css/site/Components/site.min.css" />


</head>

<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="Scripts/AddMobileNavMenu.js"></script>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
</body>

</html>

允许您从相关组件调用它，如下所示：

await jsRuntime.InvokeVoidAsync("AddMobileNavMenu");

只要你注射过IJSRuntime

唯一的问题是它似乎没有在 jQuery 中加载并触发了一条错误 appendTo is not a function。为了完成这项工作，我缺少什么？

Answer 1

用新的眼光看待这个问题，我意识到我的错误——原来它不是在抱怨appendTo，而是在抱怨panel。我没有意识到这是另一个库的一部分 - 在 jquery 之后（但在自定义函数之前）导入该库解决了这个问题。

我会把问题留在这里，以防其他人重复我周五的思路。

在 Blazor 中使用 jQuery

Using jQuery in Blazor

javascript

jquery

blazor-server-side