Использование MDL с ASP.NET Blazor

Question

Я собираюсь создать приложение Blazor / Razor Components (начиная с ASP.NET Core 3.0) и буду использовать MDL для пользовательского интерфейса.

Моя проблема в том, что события MDL игнорируются Blazor. Чего я хочу достичь, так это того, что события MDS JS все еще запускаются (в частности, эффект пульсации), но затем я получаю событие, которое также записывается Blazor для бизнес-логики. Так что это контроль UX в MDL и контроль бизнеса в Blazor.

Я подозреваю, что мне нужно будет разрешить Blazor захватить событие (в частности, событие onclick), вызвать соответствующее событие в JS MDL и затем перейти к бизнес-логике. У меня слишком мало знаний о JS, чтобы понять, как это сделать. У меня есть кнопка, которая использует класс CSS "mdl-js-ripple-event", однако я не могу понять, что вызывает JS. С этим знанием я, вероятно, смогу встроить этот вызов в событие Blazor OnClick.

Спасибо!

Демонстрация: https://blazormdlcomponenttest.azurewebsites.net/ Код: https://github.com/simonziegler/BlazorMDLComponentTest

Answer 1

У меня это работает, требуется некоторая работа ..

Чтобы пульсация работала в сети материалов, вам нужно вызвать метод инициализации JS.См. Здесь: https://material.io/develop/web/components/buttons/

Хитрость заключается в том, чтобы сделать блейзорный компонент кнопки следующим образом:

<button class="mdc-button mdc-button--raised mdc-button--dense" onclick="@click" ref="@refbut">
    @Label
</button>

refbut - это свойство компонента:

private ElementRef refbut { get; set; }

И в OnAfterRenderAsync вы вызываете функцию взаимодействия JS для инициации пульсации:

protected override async Task OnAfterRenderAsync()
{
    if (firstRender)
    {
        firstRender = false;
        await refbut.InitMdcButtonAsync();
    }

}

Эта функция является методом расширения, который выполняет:

    public async static Task InitMdcFabAsync(this ElementRef element)
    {
        await JSRuntime.Current.InvokeAsync<bool>("matBlazor.materialInitmdcripple", element);
    }

JS делает это:

materialInitmdcripple: function (element) {
    new mdc.ripple.MDCRipple(element);
    return true;
},

И, конечно же, вам нужно убедиться, что материал JS en CSS загружен.