Как вернуть данные из события call обратно в метод взаимодействия JS в Blazor - PullRequest
Новая
       11

Как вернуть данные из события call обратно в метод взаимодействия JS в Blazor

0 голосов
/ 24 мая 2019

Обертываю некоторые существующие плагины JS для компонентов Blazor.при этом я столкнулся с проблемой ниже.у меня есть метод обратного вызова, который был запущен из JS в Blazor с использованием ссылки dotnet -> invokeMethodAsync

this.dotnet.invokeMethodAsync ("Trigger", this.eventName, '');

он отлично запускает метод JSinvokable.но здесь мне нужно вернуть данные из источника Blazor в обработчик функции JS, где они были подняты.

Вместо invokeMethodAsync, попробуйте invokeMethod, получая ошибку ниже

https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts#L65

возможно ли вернуть данные из вызова события обратно в функцию JS, откуда они были получены как синхронное действие?

Отредактировано:

Код стороны C # 

public class ExampleJsInterop
{
    private readonly IJSRuntime _jsRuntime;

    public ExampleJsInterop(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public object CallHelloHelperSayHello(string name)
    {
        // sayHello is implemented in wwwroot/exampleJsInterop.js
        return _jsRuntime.InvokeAsync<object>(
            "exampleJsFunctions.sayHello",
            new DotNetObjectRef(new HelloHelper(name)));
    }
}

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string SayHello()
    {
        return $"Hello, {Name}!";
    }
}

JS-код: 

window.exampleJsFunctions = {
showPrompt: function (text) {
    return prompt(text, 'Type your name here');
},
displayWelcome: function (welcomeMessage) {
    document.getElementById('welcome').innerText = welcomeMessage;
},
returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
        .then(data => {
            data.push(4);
            console.log(data);
        });
},
sayHello: function (dotnetHelper) {
    debugger;
    dotnetHelper.invokeMethod('SayHello')
        .then(r => {
            debugger;
            console.log(r);
        });

    console.log('function outside');
}

};

Код бритвы: 

@inject IJSRuntime JSRuntime

<button type="button" class="btn btn-primary" onclick="@TriggerNetInstanceMethod">
    Trigger .NET instance method HelloHelper.SayHello
</button>

@functions {


public void TriggerNetInstanceMethod()
{

    var exampleJsInterop = new ExampleJsInterop(JSRuntime);
    exampleJsInterop.CallHelloHelperSayHello("Blazor");
}
}

Здесь класс HelloHelper -> метод SayHello не запускается из JS в сторону C #когда я специально сопоставлен через invokeMethod, а не invokeMethodAsync?

Ответы [ 2 ]

2 голосов
/ 24 мая 2019

Отлично запускает метод JSinvokable.но здесь мне нужно вернуть данные из источника Blazor в обработчик функции JS, где они были подняты.

Могу ли я перефразировать ваше утверждение следующим образом:

Метод JSinvokableвызывается, но я не могу вернуть значение методу JS.

Верно?

Вы можете следовать этому коду: 

<button type="button" onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync
</button>

@functions {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}


And this:




 window.exampleJsFunctions = {
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync').then(data => {
      data.push(4);
      console.log(data);
    })
  }
};

Надеюсь, этопомогает ...

0 голосов
/ 24 мая 2019

Найден ответ на этот вопрос для сбора данных с помощью действия aync.

Код JS: 

sayHello: async function (dotnetHelper) {

    var promise = dotnetHelper.invokeMethodAsync('SayHello')
        .then(r => {
            debugger;
            console.log(r + "inside");
        });

    var result = await promise; // wait till the promise resolves (*)

    console.log('function outside');
}

в Js, используется асинхронная функция для решения этой проблемы

...