Как вызвать асинхронный метод JS из Blazor - PullRequest
Новая
       37

Как вызвать асинхронный метод JS из Blazor

0 голосов
/ 06 февраля 2019

Я пытаюсь прочитать какой-либо файл, используя JSInterop, предоставленный Blazor. Проблема в том, что даже если в .C# я жду метода, кажется, что он не await. Это, таким образом, я не могуполучить результат, предоставленный js.

C # 

<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />

@functions{
    private const string S = "start";

    public async Task OnChangeS(UIChangeEventArgs ev) {
        var str =  await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
        Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
    }
}

JS 

  window.methods = {

    readFile: function (fileName) {

        let reader = new FileReader();
        var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
        var data = null;
        reader.onload = () => {
                data = reader.result;
                console.log("from load data is"+data);

        };
        reader.onloadend = () => {  console.log("from loadend data is"+data);return data };
        reader.readAsText(file);
    }
}

ВЫВОД :
Учитывая пример json файла: { "name":"adita","age":33}, это мой порядок вывода: 

WASM: Blazor S:empty

Fread.js:11 from load data is: {
    "name":"adita",
    "age":33
}
Fread.js:14 from loadend data is: {
    "name":"adita",
    "age":33
}

Итак, мой вопрос: почему метод не ожидает Blazor?

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Я решил, обернув свой FileReader результат в Promise. На самом деле я ничего не отправлял, как указывал @ Кирк Волл . 

window.methods = {

    readFile: function (fileName) {
        let reader = new FileReader();
        return new Promise((resolve, reject) => {


            var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
            reader.onerror = () => { reader.abort(); reject("Error parsing file"); };
            reader.onload = () => {
                var data = reader.result;
                console.log("from load data is: " + data);
                resolve(data);


            };
            reader.readAsText(file);
        });
    }
}
0 голосов
/ 06 февраля 2019

Попробуйте: измените onchange="@(async(x)=>await OnChangeS(x))" на onchange="@OnChangeS"

ПРИМЕЧАНИЕ. Даже если это изменение не решит проблему, вы все равно должны использовать его следующим образом.

...