在ASP.NET Blazor中使用MDL

Question

我將構建一個Blazor / Razor組件（自ASP.NET Core 3.0起）應用程序，並將對UI使用MDL。

我的問題是Blazor忽略了MDL的事件。 我想要實現的是仍然觸發MDL JS事件（特別是漣漪效應），但是我隨后將Blazor捕獲的事件用於業務邏輯。 這就是MDL中的UX控制和Blazor中的業務控制。

我懷疑我需要允許Blazor捕獲事件（尤其是onclick事件），在MDL的JS中調用相關事件，然后繼續進行業務邏輯。 我對JS的了解很少，因此無法解決該問題。 我有一個使用CSS類“ mdl-js-ripple-event”的按鈕，但是我無法計算出所調用的JS。 有了這些知識，我大概就能將這個調用構建到Blazor OnClick事件中。

謝謝！

演示： https : //blazormdlcomponenttest.azurewebsites.net/代碼： https : //github.com/simonziegler/BlazorMDLComponentTest

Answer 1

我已經完成這項工作，需要一些工作。

為了使紋波作用在素材網上，您需要調用JS init方法。 看到這里： https : //material.io/develop/web/components/buttons/

訣竅是使按鈕的blazor組件像這樣：

<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。