gpt4 book ai didi

c# - 如何在 .Net Blazor 中获取 Javascript 回调?

转载 作者:太空狗 更新时间:2023-10-30 01:12:39 24 4
gpt4 key购买 nike

有没有办法向 Javascript 添加回调并在 Blazor 中获取结果?除了 JS Promises。

例如,假设我要加载一个文件

Javascript 代码

window.readFile = function(filePath, callBack) {
var reader = new FileReader();
reader.onload = function (evt) {
callBack(evt.target.result);
};
reader.readAsText(filePath);
}

我可以在 Blazor C# 中有这样的东西吗

    // read file content and output result to console
void GetFileContent() {
JsRuntime.InvokeAsync<object>("readFile", "file.txt", (string text) => {
Console.Write(text);
});
}

或者可能是这样的

    // read with javascript
void ReadFileContent() {
JsRuntime.InvokeAsync<object>("readFile", "file.txt", "resultCallbackMethod");
}

// output result callback to console
void resultCallbackMethod(string text) {
Console.Write(text);
}

谢谢

最佳答案

更新 1:

在重新阅读您的问题后,我认为这将涵盖您的第二个示例

我认为您可以选择实现处理调用的 JS 代理函数。像这样:

更新 2:

代码已更新为功能性(但未经过深入测试)版本,您还可以在 blazorfiddle.com 中找到工作示例

JavaScript 代码

// Target Javascript function
window.readFile = function (filePath, callBack) {

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

var reader = new FileReader();

reader.onload = function (evt) {
callBack(evt.target.result);
};

reader.readAsText(file);

}

// Proxy function
// blazorInstance: A reference to the actual C# class instance, required to invoke C# methods inside it
// blazorCallbackName: parameter that will get the name of the C# method used as callback
window.readFileProxy = (instance, callbackMethod, fileName) => {

// Execute function that will do the actual job
window.readFile(fileName, result => {
// Invoke the C# callback method passing the result as parameter
instance.invokeMethodAsync(callbackMethod, result);
});

}

C# 代码

@page "/"

@inject IJSRuntime jsRuntime

<div>
Select a text file:
<input type="file" id="fileInput" @onchange="@ReadFileContent" />
</div>
<pre>
@fileContent
</pre>

Welcome to your new app.

@code{

private string fileContent { get; set; }

public static object CreateDotNetObjectRefSyncObj = new object();

public async Task ReadFileContent(UIChangeEventArgs ea)
{
// Fire & Forget: ConfigureAwait(false) is telling "I'm not expecting this call to return a thing"
await jsRuntime.InvokeAsync<object>("readFileProxy", CreateDotNetObjectRef(this), "ReadFileCallback", ea.Value.ToString()).ConfigureAwait(false);
}


[JSInvokable] // This is required in order to JS be able to execute it
public void ReadFileCallback(string response)
{
fileContent = response?.ToString();
StateHasChanged();
}

// Hack to fix https://github.com/aspnet/AspNetCore/issues/11159
protected DotNetObjectRef<T> CreateDotNetObjectRef<T>(T value) where T : class
{
lock (CreateDotNetObjectRefSyncObj)
{
JSRuntime.SetCurrentJSRuntime(jsRuntime);
return DotNetObjectRef.Create(value);
}
}

}

关于c# - 如何在 .Net Blazor 中获取 Javascript 回调?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56627649/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com