如何在核心 Blazor 中调用 js 脚本文件 asp.net

Question

如何在@code部分中调用js脚本文件(app.js

(

<script src="~/js/app.js"></script>
<script src="~/js/app.js">
function indexSlider(){
alert(1);
}

@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
{
return;
}
await JSRuntime.InvokeAsync<string>("indexSlider");
}
}

Answer 1

示例 JS 代码计时器

var clock;
var date;
function startTime(element) {
let timeString = new Date().toLocaleTimeString('en-US', { hour: 'numeric', hour12: true, minute: 'numeric', second: 'numeric'});
let dateString = new Date().toLocaleDateString('en-US', { dateStyle: 'full'});
element.innerHTML = dateString + " - " + timeString;
clock = setTimeout(startTime.bind(null, element), 1000);
}
function stopTime() {
clearTimeout(clock);
}

在wwwroot文件夹中找到index.html

<script src='js/yourJS.js'></script>

在剃须刀组件或页面中

@inject IJSRuntime jsRuntimeService
<div @ref='timeElement'></div>
@code
{
ElementReference timeElement;
protected overried async Task OnInitializedAsync()
{
await jsRuntimeService.InvokeVoidAsync("startTime", timeElement);
await jsRuntimeService.InvokeVoidAsync("Alertfunction");
}
}

Answer 2

@inject IJSRuntime JSRuntime
@code{
IJSObjectReference module;
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import","~/js/app.js");
await module.InvokeVoidAsync("indexSlider", null);}

这就是你可以做到的，在你的JS文件中定义一个这样的函数。

export function indexSlider() 
{ //do something};