CODEWITHSUNDEEP
.netasp.net-coreblazorblazor-server-sidemudblazor
Antrax27ns
Antrax27ns

Reputation: 11

Problem with MudBlazor - Nav Menu in project .net8 Template Blazor Server + Blazor Client

I'm using a new Blazor template for .net 8. I have a problem with drop-down navigation in the menu - the menu doesn't want to expand, in the Blazor UI library it sometimes expands and sometimes not, but in MudBlazor it doesn't work at all. The layout is located on the Blazor Server side.

I added all references to Libraries according to the documentation, e.g. in MudBlazor I added references to App regarding CSS and Java Script and I added the MudBlazor service in the Program class and using MudBlazor in the import class.

In Program.cs

builder.Services.AddMudServices();

In App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MachineRegister.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <HeadOutlet />
</head>

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

</html>

In _Imports.razor

@using MudBlazor

The problem is that the library does not want to work, neither does it expand the menu in the navigation nor does the test button work

<MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0">
    <MudNavMenu Class="mud-width-full">
        <MudText Typo="Typo.h6" Class="px-4"><h6>Register Machine</h6></MudText>
        <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">App</MudText>
        <MudDivider Class="my-2" />
        <MudNavGroup Title="Register machine" Icon="@Icons.Material.Filled.ListAlt">
            <MudNavLink Href="/MachineRegisterList" Icon="@Icons.Material.Filled.List">List</MudNavLink>
            <MudNavLink Href="/CreateMachineRegister" Icon="@Icons.Material.Filled.Add">Add</MudNavLink>
            <MudNavLink Href="/EditMachineRegister" Icon="@Icons.Material.Filled.Edit">Edit</MudNavLink>
        </MudNavGroup>
    </MudNavMenu>
</MudPaper>

And test button MudBlazor is @Text @ButtonText

In test.razor

@code {

public string Text { get; set; } = "????";
public string ButtonText { get; set; } = "Click Me";
public int ButtonClicked { get; set; }

void ButtonOnClick()
{
    ButtonClicked += 1;
    Text = $"Awesome x {ButtonClicked}";
    ButtonText = "Click Me Again";
}
}

Upvotes: 1

Views: 1833

Answers (1)

Qiang Fu
Qiang Fu

Reputation: 8836

You need Interactive modes to work for Mudblazor in .net8. https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes.
I suggest set global InteractiveRender mode with disable prerender in App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    ...
    <HeadOutlet @rendermode="new InteractiveAutoRenderMode(false)" />
</head>

<body>
   ...
    <Routes @rendermode="new InteractiveAutoRenderMode(false)" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

Upvotes: 0

Related Questions