How to add material styles and components to ASP.NET MVC web app?

Question

User-462241089 posted

Hey, this is my first post, so please forgive me if I sound uninitiated. I am also very new to .net.

I'm trying to add material styles to my .net web app, but I can't seem to figure out how to do it. I tried adding Materialize and Material-UI via NPM, but I can't get either one to work properly. I started with this tutorial, but I don't think it actually works.

I really just need the material datepicker, checkboxes, switches, and floating labels. How do I add this to my project?

Answer 1

User-474980206 posted

material-ui is a react component library. you would just reference the components from your react code.

Materialize is probably what you want. you can just use the CDN or bower install:

  https://materializecss.com/getting-started.html

the npm module is for rebuilding the sources or using a npm based tool chain, say webpack or gulp.

note: you will need a separate date picker, materialize does not contain one. just google: materialize datapicker

Answer 2

User-462241089 posted

Thanks for the help, bruce! I'm trying it all out now. I found this datepicker, but will it work? Would this one be better? I want to avoid jquery in this project.

Answer 3

User-462241089 posted

Also, I just tried adding it via CDN, by insrting this code into my _Layout.cshtml file:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
       

And I do seem to have some material styles implementing, but they are stuck on a green default color scheme. How do I change the color? The docs are unhelpful here...

Answer 4

User-474980206 posted

they are the same datepicker. appears materialize has one. I use react & bootstrap instead.

to theme, just like bootstrap you either override the CSS or build you own css file with SASS by updating the variable file.

  https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_variables.scss

to build you own, you can fork the project and update the variable, or down load and build. if you have your own preffered SASS compile you can just use the sass folder. 

  https://github.com/Dogfalo/materialize

I'd probably fork the project. then you could sync changes and updates under source control.

Answer 5

User1686398519 posted

Hi MarcusAtMars,

• You can add some packages through NuGet.You can refer to this link for NuGet.
• I suggest you can use bootstrap-datepicker, this can display the date.How to add bootstrap-datepicker, please refer to the following.
• For style files, you can use bootstrap, which contains many styles, you can refer to this link.
• For using checkbox in MVC, you can refer to this link.

<input class="date_range_filter date" type="text" id="Date" />
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>
<link href="~/Content/bootstrap-datepicker.min.css" rel="stylesheet" />
@section scripts{
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Date').datepicker();
        });
    </script>
}

Here is the result.

How to add bootstrap-datepicker

Best Regards,

YihuiSun

Answer 6

User-462241089 posted

Hi, YihuiSun, Thanks for the tip, but I already have that in place. I need the picker to be stylized to look like a material datepicker, so like this:

Answer 7

User-462241089 posted

I tried adding this to my _variables.cshtml file, but it doesn't seem to apply it:

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

Answer 8

User-474980206 posted

You can not override sass variables. You need to override the output css. This will require learning the materials css and a good understanding of css.

For what you want, download and build a new materials css file. Just read the docs. The build script uses grunt-sass, but you can use any sass compiler you like. 

   https://sass-lang.com/install

Answer 9

User-462241089 posted

Huge thanks, Bruce! I've opted to just override the colors of all the elements I'm using, since I am in a time crunch.

I do want to ask, though, do you know how I can change the layout of the datepicker? It looks like it does here, but I need it to look like this vertical material one.

Can I customize this in the options? If so, how?

Answer 10

User-474980206 posted

its response via a media query, so if you just use the browser debugger, you can see the changes.