将 MDL 与 ASP.NET Blazor 一起使用答案

【问题标题】：Using MDL with ASP.NET Blazor将 MDL 与 ASP.NET Blazor 一起使用
【发布时间】：2019-01-18 20:04:35
【问题描述】：

我将构建一个 Blazor/Razor 组件（从 ASP.NET Core 3.0 开始）应用，并将在 UI 中使用 MDL。

我的问题是 MDL 的事件被 Blazor 覆盖。我想要实现的是 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

【问题讨论】：

标签： javascript c# asp.net material-design blazor

【解决方案1】：

我已经完成了这项工作，它需要一些工作..

要让ripple 在material web 上工作，你需要调用一个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 和 CSS 材料。

【讨论】：