如何在Blazor服务器razor文件中加载JS库?



我试图遵循文档在这里加载这个bootstrap-datepicker在blazor服务器应用程序。注意:我想加载它为一个单一的页面,而不必加载它为所有页面。

在。razor文件中,我试图这样做:

<input @ref=ReferenceToInputControl class="form-control" id="obdInput">

@code {
ElementReference ReferenceToInputControl;
private IJSObjectReference? jsModule;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/bootstrap-datepicker.js");
await jsModule.InvokeVoidAsync("Datepicker", ReferenceToInputControl);
}
}
}

我得到一个错误,"无法找到日期选择器"。日期选择器未定义。

我读了很多关于IIFE、作用域、闭包和模块的信息,但我一辈子都不知道我需要用这个函数做什么,所以它会加载,我可以用它把输入更改为日历。

该库不使用ES模块,因此import将无法工作。它的分发方式,它被设计成加载在一个脚本标签中:

<script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>

你还需要从相同的仓库CSS,以及jQuery和Bootstrap。

但是值得注意的是,该库相当旧,不支持Bootstrap 5,并且需要一些调整才能与Bootstrap 3或4一起使用(见这里)。

最新更新