Reputation: 336

Install MudBlazor in Dotnet 8 Blazor Project

I am starting a side project with blazor and planning to us MudBlazor as UI lib in dotnet 8. My biggest roadblock currently is, When we create new dotnet 8 Blazor project, it creates 2 projects in solution. I understand one is client project and other is something that will be on server. But what I don't understand is in which project should I install MudBlazor nuget package and configure it's services. Should it be in *.Client project or the one which is in server. Please help me figure out.

Upvotes: 1

Answers (3)

Tyson Gibby

Reputation: 4730

Working code example and project

I have created a project with functioning code here.

Follow these steps to create a MudBlazor .NET 8 application:

Create new Blazor Web App Solution with Interactive render mode: Auto (server and webassembly) , Interactivity location : Global.
Install MudBlazor into the client project using the Nuget package manager.
Add @using MudBlazor to the _imports.razor file of both the server and client projects.
In Server Project App.razor file <head> element, add the links for the MudBlazor fonts and stylesheets.

<head>
  ...
  <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" />
</head>
  ...

Lower in the <body> element of the same file, after blazor.web.js <script> tag add the MudBlazor.min.js <script> tag.

<body>
    <Routes @rendermode="@RenderModeForPage" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

In both the Server and Client projects add builder.Services.AddMudServices(); after builder creation.
In the Client layout folder, replace the contents of the file MainLayout.razor with the following:

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        My Application
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen">
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Medium">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>
@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

In the Server project go to the program.cs and locate the lines:

app.MapRazorComponents()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);

Update them to reflect the name of your client project like this:

app.MapRazorComponents() .AddInteractiveServerRenderMode() .AddInteractiveWebAssemblyRenderMode() .AddAdditionalAssemblies(typeof(YourBlazorProject.Client._Imports).Assembly);

NOTE: replace "YourBlazorProject.Client" with the name of your client project.

If you want to run a simple test to see if the setup is correct, do the following:

Go to the Home.Razor page in your Client project/pages folder. This is the page with @page "/".
Add the following MudBlazor components to the top page

<MudMenu Label="Click here to test"> 
<MudMenuItem>It works</MudMenuItem> </MudMenu>

Now run the project. Click on the MudMenu "Click here to test". If the menu opens and shows the "It works" it means you have successfully setup MudBlazor in .NET 8 with interactivity.

The steps outlined here are based on a comment made by ATEEKGIT on MudBlazor GitHub repo - Issue .NET 8 Support #7430 - Comment 7828704.

Upvotes: 4