从 JS 调用 Blazor 方法，而无需单击按钮

Question

如何从JS发起对DotNet方法的调用。

• 我的 index.razor 调用 JS 'Create' 函数并传递需要打开的 json 文件名。
• 索引.js打开文件并分析其内容。如您所见，只有在解析文件之后(在满足(data[i].name === "something")条件之后)，window.sendName 才能将值返回给 blazor。
• 所以，我想知道JS(index.js)如何自己发起对blazoor的调用，而不是从navbar.razor发起。
• 因为当从 navbar.razor 发起调用时，如下所示，导航栏是在解析 json 之前加载的，因此无法返回正确的值。

我的代码：

Index.razor:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("Create", fileName);
}

JS:
function Create(fileName) {
$.getJSON(fileName, function (data) {
data.forEach((eachline, i) => {
if (data[i].name === "something") {
window.sendName= () => {
var val = "Abc";
return val;
}
}
}
}
}

NavBar.Razor:
<a href="" @onclick=getName>GetName</a>
public string? Name { get; set; }   
[JSInvokable]
private async Task getName()
{
Name= await JSRuntime.InvokeAsync<string>("sendName");

}

我尝试在下面的链接中使用示例。但似乎没有像我预期的那样工作。 https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0#class-instance-examples

Answer 1

首先，您需要创建一个帮助程序类。该类应具有在调用时引发event的JSInvokable方法。

SendNameHelper.cs：

public class SendNameHelper
{
public event Action<string>? OnNameSent;
[JSInvokable]
public Task SendNameAsync(string name) 
{
OnNameSent?.Invoke(name);
return Task.CompletedTask;
}
}

在Program.cs中将此类注册为服务。Blazor 组件现在能够注入服务并订阅事件。

Program.cs：

// for blazor wasm
builder.Services.AddSingleton<SendNameHelper>();
// if blazor server add as scoped
builder.Services.AddScoped<SendNameHelper>();

Index.razor应使用IJSRuntime调用createJS 函数，并将对SendNameHelper服务的引用传递给该函数。

Index.razor：

@inject IJSRuntime JS
@inject SendNameHelper SendNameHelper
...
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var sendNameHelperReference = DotNetObjectReference.Create(SendNameHelper);
await JS.InvokeVoidAsync("create", fileName, sendNameHelperReference);
}
}
}

NavBar.razor应该简单地注入SendNameHelper服务并订阅OnNameSentevent。

NavBar.razor：

@inject SendNameHelper SendNameHelper
@implements IDisposable
...
@code {
protected override void OnInitialized()
{
SendNameHelper.OnNameSent += HandleNameSent;
}
private void HandleNameSent(string name)
{
// do stuff with name
Console.WriteLine(name);
}
public void Dispose()
{
SendNameHelper.OnNameSent -= HandleNameSent;
}
}

最后create函数应使用SendNameHelper引用来调用SendName方法：

JS：

window.create = (fileName, dotNetHelper) => {    
$.getJSON(fileName, function (data) {
data.forEach((eachline, i) => {
if (data[i].name === 'something') {
dotNetHelper.invokeMethodAsync('SendNameAsync', 'something');             
}
});
dotNetHelper.dispose();
});
};