JSRuntime.InvokeVoidAsyn c в приложении Blazor Server, вызывающем несколько функций, когда я только говорю ему вызвать одну - PullRequest
Новая
       63

JSRuntime.InvokeVoidAsyn c в приложении Blazor Server, вызывающем несколько функций, когда я только говорю ему вызвать одну

0 голосов
/ 19 апреля 2020

У меня есть серверное приложение Blazor с двумя кнопками. Первая кнопка вызывает метод MenuOpen в C#, а вторая вызывает метод TestJSInterop в C#. Вот код: 

@inject IJSRuntime JSRuntime;

<!-- buttons -->

@code {
    List<int> tabs = new List<int>();

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        JSRuntime.InvokeVoidAsync("monacoInit");
        return base.OnAfterRenderAsync(firstRender);
    }

    async Task OpenNewTab(string title)
    {
        int newId = await JSRuntime.InvokeAsync<int>("addEditorModel", new object[]
        {
            title, "test", "test", "test"
        });
        tabs.Add(newId);
        await JSRuntime.InvokeVoidAsync("addTab", newId);
    }

    async Task MenuOpen()
    {
        await OpenNewTab("testing");
    }

    async Task TestJSInterop()
    {
        await JSRuntime.InvokeVoidAsync("console.log", "test");
    }
}

В Javascript я добавил console.log s для каждого метода, который вызывается из C#. Когда я нажимаю кнопку для вызова TestJSInterop, я получаю в консоли следующий результат:

test

call addEditorModel

call addTab: параметр равен 0

call addEditorModel

call addTab: параметр 0

Когда я нажимаю кнопку для вызова MenuOpen, я получаю такой результат:

call addEditorModel

call addTab: параметр 1

call addEditorModel

call addTab: параметр 0

call addEditorModel

call addTab: параметр 0

Я знаю, что метод OpenNewTab C# не вызывается несколько раз, как, например, когда я ставлю точку останова и нажимаю кнопку для вызова TestJSInterop Я не достигаю точки останова.

Вызов JSRuntime.InvokeVoidAsync работает правильно в OnAfterRenderAsync.

Почему у меня такое поведение?

1 Ответ

1 голос
/ 19 апреля 2020

Я пытался понять ваш частичный код, но, похоже, мне это не удалось. Однако следует учитывать следующее:

  1. Метод OnAfterRenderAsyn c выполняется каждый раз при визуализации компонента. Он в основном используется для инициализации JavaScript объектов. Если вы хотите инициализировать ваши JavaScript объекты (я думаю, только один раз, верно?), Код должен быть помещен в оператор if, проверяющий, что это в первый раз:

    if( firstRender ) { // Here's you place code that is executed only once // the parameter firstRender is evaluted to true only the first time // the OnAfterRenderAsync method is executed }

  2. Только события пользовательского интерфейса, такие как событие щелчка, вызывают повторную визуализацию компонента. Если вам необходимо выполнить повторную визуализацию компонента, чтобы увидеть изменения, сделанные иначе, вам придется вызвать метод StateHasChanged

  3. Если ваше приложение выполняет предварительную визуализацию (render-mode = «ServerPrerendered»), ваши компоненты отображаются дважды, и поэтому вы можете увидеть сообщения, напечатанные в окне консоли дважды. Это нормально.

Надеюсь, это поможет ... Если вы не решили свои проблемы, пожалуйста, опубликуйте полную копию вашего кода, и я постараюсь помочь вам в этом.

...