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。

在ASP.NET Blazor中使用MDL

1 个答案: