Как я могу получить обратный вызов Javascript в .Net Blazor? - PullRequest
Новая
       18

Как я могу получить обратный вызов Javascript в .Net Blazor?

4 голосов
/ 17 июня 2019

Есть ли способ добавить обратный вызов в Javascript и получить результат в Blazor?Помимо JS Promises.

например, скажем, я хочу загрузить файл

Javascript Code 

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);
    }

Спасибо

Ответы [ 3 ]

3 голосов
/ 17 июня 2019

ОБНОВЛЕНИЕ 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 # CODE 

<code>@page "/"

@inject IJSRuntime jsRuntime

<div>
    Select a text file:
    <input type="file" id="fileInput" @onchange="@ReadFileContent" />
</div>
<pre>
    @fileContent
Добро пожаловать в ваше новое приложение. @код{ приватная строка fileContent {get; задавать; } открытый статический объект CreateDotNetObjectRefSyncObj = new object (); публичная асинхронная задача ReadFileContent (UIChangeEventArgs ea) { // Fire & Forget: ConfigureAwait (false) говорит: «Я не ожидаю, что этот вызов вернет вещь» await jsRuntime.InvokeAsync («readFileProxy», CreateDotNetObjectRef (this), «ReadFileCallback», ea.Value.ToString ()). ConfigureAwait (false); } [JSInvokable] // Это необходимо для того, чтобы JS мог его выполнить public void ReadFileCallback (ответ на строку) { fileContent = response? .ToString (); StateHasChanged (); } // Взломать, чтобы исправить https://github.com/aspnet/AspNetCore/issues/11159 защищенный DotNetObjectRef CreateDotNetObjectRef (значение T) где T: класс { блокировка (CreateDotNetObjectRefSyncObj) { JSRuntime.SetCurrentJSRuntime (jsRuntime); return DotNetObjectRef.Create (значение); } } }
1 голос
/ 17 июня 2019

Я полагаю, что вы ищете информацию о документации здесь: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0#invoke-net-methods-from-javascript-functions

Показывает, как вызвать Razor.Net из Javascript. В документации есть больше информации, но, по сути, вам понадобится атрибут [JSInvokable] для метода в razor и вызов через DotNet.invokeMethod в javascript.

0 голосов
/ 20 июня 2019

Спасибо за это @ Генри Родригес. Я создал что-то из этого, и я верил, что это может быть полезным.

Обратите внимание, что DotNetObjectRef.Create (this) все еще отлично работает в другом методе. Отмечено только наличие проблем с событиями жизненного цикла Blazor в preview6. https://github.com/aspnet/AspNetCore/issues/11159.

Это моя новая реализация. 


    Load the file content
    



    @fileContent
Добро пожаловать в ваше новое приложение. @код{ строка fileContent; // Кнопка onclick вызовет это. void GetFileContent () { JsRuntime.InvokeAsync ("callbackProxy", DotNetObjectRef.Create (this), "readFile", "file.txt", "ReadFileCallback"); } // и это ReadFileCallback [JSInvokable] // Это необходимо для вызываемой функции в JS public void ReadFileCallback (строка filedata) { fileContent = filedata; StateHasChanged (); }

А в Blazor _Host.cshtml или index.html включите соединитель прокси обратного вызова 

// Proxy function that serves as middlemen
 window.callbackProxy =  function(dotNetInstance, callMethod, param, callbackMethod){
    // Execute function that will do the actual job
    window[callMethod](param, function(result){
          // Invoke the C# callback method passing the result as parameter
           return dotNetInstance.invokeMethodAsync(callbackMethod, result);
     });
     return true;
 };



// Then The Javascript function too

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

Это прекрасно работает для того, что мне нужно, и его можно использовать повторно.

...