如何在 Blazor WebAssembly 中初始化现有的 Jquery答案

【问题标题】：How to Initialize existing Jquery in Blazor WebAsambly如何在 Blazor WebAssembly 中初始化现有的 Jquery
【发布时间】：2021-08-22 04:10:56
【问题描述】：

我正在将现有网站迁移到 .NET Core 5 上的 Blazor WASM，我在从 blazor 初始化/调用此插件时遇到了一些挑战。请参阅下面的 HTML 和 JS 代码：

在我当前的网站上，我将这个插件初始化如下：

<script src="./hs-unfold.min.js"></script>        
<script>
    $(document).on('ready', function () {
    // INITIALIZATION OF UNFOLD
    // =======================================================
    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
    });
</script>

然后在 HTML 页面上

<div class="hs-unfold">
    <a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
         }'>Dropdow on hover</a>
    
    <div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
        <a class="dropdown-item active" href="#">Active</a>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

如上所示，这个 JQuery 插件的属性是通过 HTML 标签传递的：

<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
}'>

【问题讨论】：

标签： javascript jquery asp.net-core blazor blazor-webassembly

【解决方案1】：

要在 Blazor 中复制这一点，您需要挂钩到组件生命周期事件并使用一些 JSInterop。

创建一个 js 文件来保存你自己的初始化代码

**hs-unfold-initializer.js**

window.MyJS = {
    initialiseHSUnfold: function() {
        // INITIALIZATION OF UNFOLD
        // =======================================================
        var unfold = new HSUnfold('.js-hs-unfold-invoker').init();        
    }
}

在 Blazor Index.html 页面的标题中加载插件脚本和初始化脚本：

<head>
    <script src="./hs-unfold.min.js"></script>
    <script src="./hs-unfold-initializer.js"></script>
</head>

在您的组件中：

注入 JS 互操作 (IJSRuntime)，添加您的 html，并在渲染后触发您的初始化程序。请注意，您不能在组件初始化期间执行此操作，因为此时尚未加载 DOM。 OnAfterRenderAsync 生命周期方法允许您在 DOM 加载后执行操作。

@inject IJSRuntime IJS

<div class="hs-unfold">
    <a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
         }'>Dropdow on hover</a>
    
    <div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
        <a class="dropdown-item active" href="#">Active</a>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

@code {
    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
             await IJS.InvokeVoidAsync("MyJS.initialiseHSUnfold")
        }
    }
}

【讨论】：

感谢您的回复。看来我仍然需要将 data-hs-unfold-options 作为 Json 对象提供，请参阅从浏览器运行时遇到的错误ibb.co/pndd0vT。
这是一个不同的问题。如果您在第 222 行之前包含 console.log(el.attr('data-hs-unfold-options')); 会向控制台输出什么？

【解决方案2】：

@Neil-W 感谢您对上述代码的帮助。我能够通过在 .js 初始化文件中提供 js 函数选项/参数来解决这个问题。以下代码供参考：

在wwwroot/创建.js文件作为中间件初始化JS代码

**hs-unfold-initializer.js**

(function () {

        // INITIALIZATION OF HS-Unfold 
        // ======================================================
    window.HSUnfoldFuntions = {
        AddHSUnfold: function (unfoldElement) {
            //unfold options
            var options = {
                target: '#editDropdownElement',
                type: "css-animation"
            };
            //set a new intance of HSUnfold
            new HSUnfold(unfoldElement, options).init();
        },
    };

})();

Blazor Index.html 页面标题中的初始化脚本：

<head>
    <script src="./hs-unfold.min.js"></script>
    <script src="./hs-unfold-initializer.js"></script>
</head>

在您的组件中

        @inject IJSRuntime JS
        @inject ElementReference hsUnfoldEditElement
    
    <div class="hs-unfold">
        <a @ref="@hsUnfoldEditElement" class="js-hs-unfold-invoker btn btn-primary dropdown-toggle">
    Dropdow on hover</a>
        
        <div id="editDropdownElement" class="hs-unfold-content dropdown-unfold dropdown-menu">
            <a class="dropdown-item active" href="#">Active</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
@code{

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {

            if (firstRender)
            {
                //hsUnfold
                await JS.InvokeAsync<string>("HSUnfoldFuntions.AddHSUnfold", hsUnfoldEditElement);
            }

        }
}

【讨论】：