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.


Demonstration: Code:



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:

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

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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.