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

Question

我正在将现有网站迁移到 .NET Core 5 上的 Blazor WASM，我遇到了一些挑战 initializing/calling 这个来自 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"
}'>

Answer 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 页面的 header 加载 plug-in 脚本和初始化脚本：

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

在你的组件中：

注入 JS Interop (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")
        }
    }
}

Answer 2

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

在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);
            }

        }
}

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

How to Initialize existing Jquery in Blazor WebAsambly

javascript

jquery

asp.net-core

blazor

blazor-webassembly