Using MDL with ASP.NET Blazor

I am going to build a Blazor/Razor Components (as of ASP.NET Core 3.0) app and will be using MDL for the UI.

My issue is that MDL's events get overridden by Blazor. What I want to achieve is that the MDL JS events are still fired (in particular the ripple effect), but that I then have the event also captured by Blazor for business logic. So that's UX control in MDL and business control in Blazor.

I suspect that I will need to allow Blazor to capture the event (particularly the onclick event), call the relevant event in MDL's JS and then get on with the business logic. I have too little knowledge of JS to work out how to do this however. I have a button that uses the CSS class "mdl-js-ripple-event", however I cannot work out what JS that calls. With this knowledge I would probably be able to build this call into the Blazor OnClick event.

Thanks!

Demonstration: https://blazormdlcomponenttest.azurewebsites.net/ Code: https://github.com/simonziegler/BlazorMDLComponentTest

Answers:

Answer

I've got this working, it requires some work..

For the ripple to work on material web, you need to call a JS init method. See here: https://material.io/develop/web/components/buttons/

The trick is to make a blazor component of the button like so:

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

The refbut is a property in the component:

private ElementRef refbut { get; set; }

And in the OnAfterRenderAsync you call a JS interop function to init the ripple:

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

}

That function is a extension method that does:

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

The JS does this:

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

And ofcourse you need to make sure the material JS en CSS is loaded.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.