MudBlazor

How to use MudBlazor in Blazor Project?

ChandradevLeave a comment

MudBlazor is one of the best open sources Blazor Controls for developing Blazor project quickly. There are lots of free controls which will help us for rapid web application development.

There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.

It has been created on top of Material Design, so you will get very good UI.

I have seen so many developers and architect, they will create their own Grid, dropdown, popup, Checkbox controls etc. from scratch and later they will face lots performance and other issue.

If there are already stable and mature open-source controls, then no need to create from scratch. we can save lots of development time and money.

There are two approaches i.e., using Dotnet Template and other is using manual approach using nuget package.

I will show you, using dotnet template, which is very simple and straight forward.

Step 1: Install the template like this

dotnet new –install MudBlazor.Templates

Step 2: Go to your development folder path and create wasm project using dotnet cli like this

dotnet new mudblazor –host wasm –name MyMudBlazorTest

Step 3: Now build and run the application using Visual studio or dotnet cli

MudBlazor.Templates will do all the configuration for us. Now we can work on top of this. Here is table and pager component, using these two components we can create grid like screen. There is also Grid control, but it is on preview version.

@page "/fetchdata"
@inject HttpClient Http
@using MyApplication.Shared

<PageTitle>Weather forecast</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
    <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
        <HeaderContent>
            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Date">@context.Date</MudTd>
            <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
            <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
            <MudTd DataLabel="Summary">@context.Summary</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager PageSizeOptions="new int[]{50, 100}" />
        </PagerContent>
    </MudTable>
}


@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string? Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

To learn more about all the component, please fill free to visit official site.

https://www.mudblazor.com/docs/overview

Summary: In this small post, we saw that how to use MudBlazor in Blazor WASM project.

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.