我正在将一个现有的网站迁移到.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"
}'>
要在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 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")
}
}
}
@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);
}
}
}