Leveraging MDL in ASP.NET Blazor for a seamless user interface

Planning to develop a Blazor/Razor Components application with MDL for the UI in ASP.NET Core 3.0.

Facing an issue where MDL events are getting overridden by Blazor. Want to ensure that MDL JS events, like the ripple effect, still occur while also capturing the event in Blazor for business logic. Essentially, maintaining UX control in MDL and business control in Blazor.

Thinking I might need to let Blazor capture the event, trigger the appropriate MDL JS event (such as onclick), and then proceed with business logic. Lacking JavaScript expertise to figure out the specifics. Have a button with "mdl-js-ripple-event" CSS class but unsure which JS it calls. Knowing this would help integrate it into the Blazor OnClick event.

Thank you!

Demonstration: Code: https://github.com/simonziegler/BlazorMDLComponentTest

javascriptc#asp.netmaterial-designblazor

Answer №1

I have successfully implemented this method, but it does require some effort...

To enable the ripple effect on Material Web, you must invoke a JS initialization method. You can find more information here: https://material.io/develop/web/components/buttons/

The key is to create a Blazor component for the button like this:

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

The refbut property exists in the component:

private ElementRef refbut { get; set; }

In the OnAfterRenderAsync method, you need to call a JS interop function to initialize the ripple effect:

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

}

This function is an extension method that performs the following:

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

The JavaScript code for this function looks like this:

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

Additionally, make sure to load the necessary Material JS and CSS files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the "as" decorator in Next.js Link no longer functioning properly with dynamic routes?

My route is dynamic: test/[id].js When a user clicks on a link to /test/1, Next.js successfully renders the correct page. The issue arises when I try to mask the /test/1 URL with something else. <Link href="/test/1" as="/any/thing/here ...

javascriptnext.jsnext-router

Is it possible to simultaneously assign values to a dictionary while allowing for potential resizing of the dictionary?

Referencing a response on this Stack Overflow thread, it is suggested that assigning to a dictionary in parallel may not be advisable due to potential issues with the collection's size changing dynamically. Expanding on this idea, it is implied that ...

c#.netdictionaryparallel-processing

Is it possible that following or unfollowing a user through Ajax can result in the href attribute of other links changing? Check out the

Attempting to clarify a peculiar situation with as much detail as possible. Attached are images/examples. A specific page is dedicated to displaying all the users a particular user follows. users_controller.rb def following @pals = current_user.followi ...

javascriptruby-on-railsajax

Step-by-step guide for accessing a .ica downloaded file using selenium c#

I am seeking help with the following code snippet. After executing ds.Click();, a file will be downloaded to the downloads folder with a .ica extension. IWebDriver cobj = new ChromeDriver(); cobj.Navigate().GoToUrl("https://XX.xxx.xx"); IWebElement u = ...

c#seleniumselenium-webdrivercitrix

Guide to importing an AngularJS controller into an Express file (routes.js)

Currently, I am in the process of developing a restful service and my goal is to organize my callbacks within controllers in order to avoid cluttering my routes.js file. Previously, I had been using controller = require(path.to.controller); This enabled ...

javascriptangularjsnode.jsexpressmean-stack

Tips on updating an object and adding it to an array in ReactJS with Material UI

Seeking guidance on editing an array of objects and displaying the updated value in the view. I'm new to ReactJS and attempted to do it as shown below, but found that after editing, I lose everything except for the specific one I edited. Can anyone co ...

javascriptarraysreactjsobjectmaterial-ui

Obtain the value for every span class and insert the corresponding string into the input field

I have a series of tags labeled as 'tag-label' in spans. My goal is to combine the values of these tags and insert them into an input field, separating each value with commas. To demonstrate this, I've created a JSFiddle that showcases the ...

javascriptjqueryhtml

Tips for invoking the same directive twice with varying HTML content within the directive

Currently, I am working on a project that involves utilizing AngularJS material. Within this project, I am encountering an issue when calling a directive (<sdiv-panel></sdiv-panel>) twice within the DOM. The problem arises when I make modificat ...

javascriptangularjsangularjs-directive

I am currently working on implementing a feature in my app that allows users to easily log in using their Google account

Currently, I am in the process of enhancing my app to enable users to log in using their Google account. The frontend is built with ReactJS, tailwindcss, and sanity. The login button successfully writes user data to the sanity database. However, I suspect ...

javascriptreactjssanity

Are there any great C# applications built on asp.net?

Seeking recommendations for quality open source ASP.NET (C#) applications that align with the following criteria: Well-designed and structured with multiple tiers Clean, well-commented codebase Incorporates various design patterns effectively Web pages ...

c#asp.netcssdesign-patterns

useEffect issue: unable to use map function with API data in React Hooks

I am facing an issue where the code below is not populating the UL with any items except for the "Default LI" that I manually added. Despite having data in response.data and all console.log calls showing output, the items are not being populated. I suspect ...

javascriptreactjsreact-hooks

Revolutionary Knockout-Kendo MultiSelect Feature: Pressing Enter Erases Previously Selected Options

When using the Knockout-Kendo MultiSelect control, I have encountered an issue. If I select a value from the list, then enter a second value and press enter, the previously entered values are removed. VIEW <select data-bind="kendoMultiSelect: { da ...

javascriptjqueryknockout.jsknockout-kendo

"Leaflet automatically refreshes tile cache when zooming in or out

Currently, I'm facing an issue regarding the tile cache in leaflet. If I move from point A to point B, and examine the tiles in between, they are cached without any problems. However, if I go from A to B, zoom in and out, and then return to point A, ...

javascriptjquerycachingzoomingleaflet

Using the goBack function in React Router does not add the previous location to the stack

In React Router v4, I have a list page and a details page in my web application. I want to implement a 'Save and close' button on the details page that redirects the user back to the list page when clicked. However, I noticed that after the user ...

javascriptreactjsreact-router

Tips for showcasing timestamps within a Vue.js/Firebase application

In my current project, I am working on developing a chat application using Vue.js and Firebase. The codebase I am referring to can be found at https://github.com/jsfanatik/vuestacks-chat-vue-firebase. I have successfully implemented the Chat component to a ...

javascriptfirebasevue.jsgoogle-cloud-firestoremomentjs

automating the styling of elements

Hey everyone, I have a specific element that I want to conditionally apply multiple styles to. Initially, I approached it like this: <Text style={[ discountCodeState === '' || !isActiveHandler(value) ? [ ...

javascriptcssreact-native

Form submission is not possible while the login form is active

I'm encountering an issue where I am unable to trigger - ng-submit or ng-click on this code except for the local onclick function on the login button. If you have any insights or solutions, please share them: <form ng-submit = "login.submitLogin ...

javascriptjqueryangularjsformsangularjs-ng-click

"Exploring the power of Vue.js through dynamic and recursive components

I am struggling with creating a recursive custom component that calls itself. Unfortunately, I keep encountering an error. An unknown custom element: <TestRec> - have you registered the component correctly? For recursive components, ensure to specif ...

javascriptrecursionvue.jsvuejs2components

Switching back regular text from a superscript in document.execCommand

Currently, I'm developing a customized text editor that utilizes a contenteditable div with some basic formatting features. To enable superscript functionality, I'm employing the command document.execCommand("superscript", false, undefi ...

javascripthtmleditortext-editorexeccommand

I am having issues with sendKeys and click() functions in my code. I am unable to access the elements using Protractor's javascript

<input class="form-control validation-field ng-dirty ng-touched ng-invalid" placeholder="Password" type="password"> Despite using the element to retrieve it, I am unable to send keys and no error message is displayed. This issue persists in both Fir ...

javascriptangularjsprotractorautomated-tests