I haven't found many resources to add Material Design to ASP.NET Webforms. The closest I found was this stackoverflow which didn't help much.

Hi @ Brian Tan , You can add materialize-css via npm, then copy the materialize.min.css and js files to a directory in your scripts folder and reference them in _layout.cshtml. npm install materialize-css@next If you don't want to use npm, you can use a CDN link.Below is a simple example. For more information see the documentation below. Learn how to easily start using Materialize in your website. this github about Material Components for the web <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> </div> </form> </body> </html> Best regards, Lan Huang If the answer is the right solution, please click " Accept Answer " and kindly upvote it. If you have extra questions about this answer, please click " Comment ". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Is there a way to add Material Design to ASP.NET Webforms?

Accepted answer

Lan Huang-MSFT 26,516 Reputation points Microsoft Vendor

2023-08-22T02:56:17.74+00:00
Hi @Brian Tan,

You can add materialize-css via npm, then copy the materialize.min.css and js files to a directory in your scripts folder and reference them in _layout.cshtml.

npm install materialize-css@next

If you don't want to use npm, you can use a CDN link.Below is a simple example.

For more information see the documentation below.

Learn how to easily start using Materialize in your website.

this github about Material Components for the web

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> </div> </form> </body> </html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Brian Tan 40 Reputation points

2023-08-22T15:40:57.28+00:00

Is there a way to the WebControls? It looks like the example that is shown uses the HTML anchor tag rather than asp:Button. This is the type of controls I'm using

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button?view=netframework-4.8.1

Brian Tan 40 Reputation points

2023-08-22T15:57:40.98+00:00

Is there a way to the WebControls? It looks like the example that is shown uses the HTML anchor tag rather than asp:Button. This is the type of controls I'm using

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button?view=netframework-4.8.1

Albert Kallal 4,896 Reputation points

2023-08-22T16:21:49.95+00:00

You can in most cases apply the style(s) in questions to asp.net native controls, and the styles work quite nice.

However, like using font-awesome? You always had to use a link button (they tend to work the best for the icons).

So, say these two buttons:

<asp:Button ID="Button1" runat="server" Text="Button" CssClass="waves-effect waves-light btn"/> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="waves-effect waves-light btn" ><i class="material-icons left">cloud</i>Download </asp:LinkButton>

And the result is this:

So, even when say using bootstrap, and you wanted to use glyph icons (not included by default with bootstrap anymore), or say font-awesome?

Then using a link button quite much I find is the best choice. I always used link buttons when I want a button + icon, and as above shows, they work rather fine. And Linkbuttons are "more" bootstrap friendly (especially when you want a button + icon).

The link button works very well, and even the "ripple" effect from material library class works rather nice in above on the plain asp.net button, or the asp.net link button.

And if you don't want/need a icon? Then the class(s) in question also work quite nice with the standard asp.net button. So, it much depends on the button style you want, but while the button above does take on the rounded corners, shadow, and even has the "ripple" effect?

It looks like using a link button is the better choice, and it gives you a "material" formatting that looks like any and all material buttons when given that css.

I never used the "material" library, since between bootstrap, jQuery.UI and a few more?

Well, somewhere along the way, the introduction of library after library has to stop!! This is "really" getting out of hand, and the massive size of script library's and css libraries has to stop - it is oh so out of control.

I am looking at moving everything towards tailwind, since that is a good attempt to clean up the hodge-podge of the ever growing library choices for css we have!

However, as above shows, you are free to introduce and use the material styles in asp.net webforms with little efforts.

Brian Tan 40 Reputation points

2023-08-23T19:57:27.5466667+00:00

You mention in most cases, we can apply styles to asp.net native controls. However, are there any options in which we can't? It doesn't seem like the asp:RadioButton controls work well with material designs. I've tried adding something like this

<asp:RadioButton id="Radio1" Text="Typical" Checked="True" GroupName="RadioGroup1" runat="server" />

And it just gives me a label without the radio button.
Sign in to comment

Share via

Is there a way to add Material Design to ASP.NET Webforms?

0 additional answers