Short introduction to MudBlazor

Short introduction to MudBlazor

Blazor has been growing in popularity recently. More and more developers are thinking about using this technology in commercial projects. Microsoft is constantly developing this framework and trying to encourage software architects to use it. The next step in this direction is MudBlazor – a Blazor component library. In this post, I will show how this library can be used and what possibilities it gives us.

Basic information

As I have mentioned, MudBlazor is a Blazor component library that supplies about 70 components. All components and features are accessed within the library so you do not need to add any dependencies. The logic that is behind those components is written in 99,9% in C#, so as a .NET developer, you can easily adapt it to your needs or just debug. Additionally, this library has full control over the CSS, so knowledge about CSS is not required to create well-designed web apps – of course, if you use MudBlazor. 😉

Components

MudBlazor offers many components such as:

  • Input Components: TextField, Switch, RadioButton etc.
    Each of those components is fully generic, so you can use all types and their nullable versions.
  • DatePicker, TimePicker
  • Form
  • Table
    Support for client and server-side data. Additionally, it provides sorting, filtering or pagination.
  • Message Boxes
  • And many others 😉

TryMudBlazor

It is worth mentioning that the creators of MudBlazor provide playing with this library and Blazor in the browser. Thanks to that, you can check out if it can be useful for you without creating a new project and opening Visual Studio or Rider. TryMudBlazor can also be valuable when you want to quickly test something or help your colleague. This website is fully integrated with the technical doc of the library and automatically creates links for every code example. The whole solution is based on Blazor REPL.

Let’s code

Let’s try using MudBlazor. First of all, you need to install that using any command-line interpreter:

dotnet new --install MudBlazor.Templates

Then you can open your IDE and create a new project. After putting ‘mudblazor’ in the searchbox, you should see something like that:

Another way to use MudBlazor is by installing it through NuGet Package Manager or with following command:

dotnet add package MudBlazor

The created project should have the following structure:

After running this project, you will see an example app that is powered by MudBlazor:

Manual configuration of MudBlazor basically boils down to the following steps:

  • Adding imports in _Imports.razor:
@using MudBlazor
  • Adding CSS & Font references to index.html:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
  • Deleting everything in site.css and removing the bootstrap.min.css completely from index.html.
  • Adding the following to the body section of index.html:
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
  • Registering services by adding the following to the Main method of Program.cs:
 builder.Services.AddMudServices();
  • Add ThemeProvider to App.razor that is a crucial part of MudBlazor:
<MudThemeProvider/>

Summary

MudBlazor is one of Blazor component libraries. There are others such as Radzen or Syncfusion etc. but currently, MudBlazor is of the greatest interest. Probably because it has the best documentation and its performance is the fastest. You can find a nice comparison of these libraries here.
Such libraries increase Blazor’s chances of establishing itself in the .NET world. But is it possible for this technology to compete on an equal footing with JavaScript and the frameworks available there? That is a good question.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top