.NET 8 Support

[flaussmann]

Hello,

did anyone play with Mud and .Net8 Preview?
When can we expect official support?

I am building a new project and its MVP should be released between the next 4 to 8 month.
We are using MudBlazor and Net7 but want to utilize some Net8 features.

I am now primarly interested in any issues someone might have experienced.

[ScarletKuro]

Hello

When can we expect official support?

When .Net 8 will be released completely and when we test it.

[mahald]

Also waiting for the MudBlazer Template for "MudBlazor-Web-App" (Blazor United) for .Net8. RC-1 of .Net8 comming in 2 weeks.

[mahald]

Currently, MudBlazor shows promising compatibility with .NET 8, particularly when integrated with the new Blazor-Web-App template. It's worth noting that for optimal functionality, one needs to specify the render mode as either InteractiveWebAssembly or InteractiveServer on a per-page/component basis. A notable limitation, however, is that the mainLayout doesn't support SSR (Server-Side Rendering).

For my project, I intend to have the main menu SSR enabled and then, based on individual pages or components, decide whether to opt for Blazor-Server, SSR, or WebAssembly (WASM). As a workaround, I'm employing the main menu from the ASP.NET template tailored for the Blazor-Web-App.

IT's requires to integrate MudThemeProvider, MudDialogProvider, and MudSnackbarProvider into each page (and NOT the MainLayout). This approach seems to be effective, based on my observations so far.

What would be immensely beneficial is an SSR-compatible MainLayout and Nav, which operates using just HTML, JavaScript, or CSS for the core layout and navigation. A current hiccup is that the Drawer toggle isn't functioning because it relies on C# code.

I'm dedicated to further testing and plan to use it extensively with .NET 8.

[joejbh]

Here's a way to put it onto your layout component and not on every page:

I created a component called <MudProviders />

These are the contents:

@rendermode InteractiveWebAssembly

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

I added this to _Imports.razor:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

Depending on the IDE you're using, @rendermode InteractiveWebAssembly it might show as an error, but it compiles fine.

Put <MudProviders /> in the Layout compont

I'm using 8.0.0-rc.2.23480.2

[mahald]

Then your providers only work for WebAssembly and WebAssembly is used in any page. Instead doing this you better go for Interactivity Global.

[joejbh]

ah - you're right. It breaks my server rendered pages.

[emorell96]

I was able to use SSR with the MudLayout, check this out: #7511 (comment)

[mahald]

Added Pull Request MudBlazor/Templates#410

[Snowlights2022]

Hello everyone! I'm confused about how to use MudBlazor in a project which is based on Microsoft's template Blazor Web App with Interactive type Auto in .NET8. There is no file with suffix .cshtml. My attempt caused the whole web page lose the original UI of the template and failed to use MudBlazor UI successfully.(No response to buttons??) And Visual Studio shows no errors. I think there must be problems but I cannot solve it. I'm sorry about poor English expressions. :(

[mahald]

just use the template:

git clone https://github.com/mahald/Templates.git
dotnet new install ./Templates/src/MudBlazorWebTemplate

works there with any mode see description here: MudBlazor/Templates#410

PS: you can also see the Template after install in the latest Visual Studio preview with the same options as the Blazor Web App Template

[gabephudson]

P.S. One of the goals was to simplify Authentication in ASP.net 8. IMHO, it is still just as much of a hornet's nest.

[emorell96]

I was able to get Microsoft.Identity.Web working on the new model of .net 8. It's not the endpoints but I guess a lot of it can be ported to using the new identity endpoints. I'll post a small explanation later today if anyone needs to get Azure AD B2C working. But I do think a lot of the ideas that get this working will help even if not using msal or azure AD.

[nhwilly]

I'm using B2C. I'm afraid to even look at it.

[emorell96]

Well for B2C:

The authentication works by keeping all the authentication on the server end of things and using a custom authentication provider in the webassembly part of things.

The server part used Microsoft.Identity.Web and its UI components as any old .Net 7 Blazor Server app would use.

The Login.razor file here allows the user to login. This is static since it's just a link, it doesn't need any interactivity.

@inject NavigationManager Navigation

<CascadingAuthenticationState>
<AuthorizeView>
    <Authorized>
        <MudText Typo="Typo.subtitle2" Class="@($"pl-5 pr-2 pt-2 pb-2 d-none d-sm-none d-md-flex")">
        @string.Format(TextStrings.LoginHello, @context.User.GetFirstName(), context.User.GetLastName())
        </MudText>
        <MudButton Class="@($"d-none d-sm-none d-md-flex")" StartIcon="@Icons.Material.Filled.Logout" Color="Color.Inherit" Href="MicrosoftIdentity/Account/SignOut">@TextStrings.LogOutButtonText</MudButton>
        <MudIconButton Class="d-flex d-md-none" Icon="@Icons.Material.Filled.Logout" Href="MicrosoftIdentity/Account/SignOut" Color="Color.Inherit" />
    </Authorized>
    <NotAuthorized>
            <MudButton Class="@($"d-none d-sm-none d-md-flex")" StartIcon="@Icons.Material.Filled.Login" Href="MicrosoftIdentity/Account/SignIn" Color="Color.Inherit">@TextStrings.LoginButtonText</MudButton>
        <MudIconButton Class="d-flex d-md-none" Icon="@Icons.Material.Filled.Login" Href=@($"MicrosoftIdentity/Account/SignIn?redirectUri=/{Navigation.ToBaseRelativePath(Navigation.Uri)}") Color="Color.Inherit" />
        @*<a href="authentication/login">Log in</a>*@
    </NotAuthorized>
</AuthorizeView>
</CascadingAuthenticationState>

@code {

}

If you've set up this, then for now the server part of Blazor will be able to login, and track the status of the log in.

Now let's take a look at the webassembly part of things.

For this we need to install a Nuget package Microsoft.AspNetCore.Components.WebAssembly.Authentication

In the services of the client app part:

builder.Services.AddTransient<CookieHandler>();
builder.Services.AddHttpClient(nameof(WebAssemblyUserService)) // you need the http client factory nuget package from MS
    .ConfigureHttpClient(client =>
    {
        var options = builder.Configuration.GetSection(nameof(PublicApiConfiguration)).Get<PublicApiConfiguration>() ?? throw new ArgumentNullException(nameof(PublicApiConfiguration));
        client.BaseAddress = new Uri(options.BaseUrl ?? throw new ArgumentNullException(nameof(options.BaseUrl)));
    })
    .AddHttpMessageHandler<CookieHandler>();
builder.Services.AddSingleton<IUserService, WebAssemblyUserService>();
builder.Services.AddSingleton<AuthenticationStateProvider, HostAuthenticationStateProvider>();
builder.Services.AddCascadingAuthenticationState();

Now let's take a look at the HostAuthenticationStateProvider, this class has for a job to call an API on the server side of the project that translates the cookie created on login by the server side into the authentication information that the client can use by injecting AuthenticationStateProvider in any Razor page you'd need the info.

public class HostAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly NavigationManager _navigation;
    private readonly ILogger<HostAuthenticationStateProvider> _logger;
    private readonly IUserService userService;

    public HostAuthenticationStateProvider(NavigationManager navigation, ILogger<HostAuthenticationStateProvider> logger, IUserService userService)
    {
        _navigation = navigation;
        _logger = logger;
        this.userService = userService;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        return new AuthenticationState(await GetUser());
    }


    private async ValueTask<ClaimsPrincipal> GetUser()
    {
        _logger.LogDebug("Fetching user");
        return await userService.FetchUserAsync();
    }
}

UserService:

public class WebAssemblyUserService : IUserService
{
    private readonly ILogger<WebAssemblyUserService> _logger;
    private readonly HttpClient _client;

    public WebAssemblyUserService(IHttpClientFactory clientFactory, ILogger<WebAssemblyUserService> logger)
    {
        _client = clientFactory.CreateClient(nameof(WebAssemblyUserService));
        _logger = logger;
    }

    public async ValueTask<string> GetCurrentUserIdAsync(CancellationToken cancellationToken = default)
    {
        var user = await FetchUserInfoAsync(cancellationToken);
        
        if(user == null)
        {
            throw new InvalidOperationException("User is not logged in!");
        }

        return user.GetAzureId();
    }


    public async ValueTask<ClaimsPrincipal> FetchUserAsync(CancellationToken cancellationToken)
    {
        var user = await FetchUserInfoAsync(cancellationToken);

        if (user == null || !user.IsAuthenticated)
        {
            return new ClaimsPrincipal(new ClaimsIdentity());
        }

        var identity = new ClaimsIdentity(
            nameof(HostAuthenticationStateProvider),
            user.NameClaimType,
            user.RoleClaimType);

        if (user.Claims != null)
        {
            foreach (var claim in user.Claims)
            {
                identity.AddClaim(new Claim(claim.Type, claim.Value));
            }
        }

        return new ClaimsPrincipal(identity);
    }

    public async ValueTask<UserInfo?> FetchUserInfoAsync(CancellationToken cancellationToken = default)
    {
        UserInfo? user = null;

        try
        {
            user = await _client.GetFromJsonAsync<UserInfo>("api/User");
        }
        catch (Exception exc)
        {

            _logger.LogWarning(exc, "Fetching user failed.");
            _logger.LogInformation("{clientBaseAddress}", _client.BaseAddress?.ToString());
        }
        return user;
    }
}

IUserService.cs

public interface IUserService
{
    ValueTask<ClaimsPrincipal> FetchUserAsync(CancellationToken cancellationToken = default);
    ValueTask<UserInfo?> FetchUserInfoAsync(CancellationToken cancellationToken = default);
    public ValueTask<string> GetCurrentUserIdAsync(CancellationToken cancellationToken = default);
}

UserInfo and ClaimValue models (used by the server and client projects to serialize and deserialize the data from the server's api)

public class UserInfo
{
    public static readonly UserInfo Anonymous = new();

    public bool IsAuthenticated { get; set; }

    public string NameClaimType { get; set; } = string.Empty;

    public string RoleClaimType { get; set; } = string.Empty;

    public ICollection<ClaimValue> Claims { get; set; } = new List<ClaimValue>();
}

public class ClaimValue
{
    public ClaimValue()
    {
    }

    public ClaimValue(string type, string value)
    {
        Type = type;
        Value = value;
    }

    public string Type { get; set; } = string.Empty;

    public string Value { get; set; } = string.Empty;
}

public class PublicApiConfiguration
{
    public string? BaseUrl { get; set; }
    public List<string> Scopes { get; set; } = new List<string>();
}

CookieHandler (this is key, it makes sure that every request that it sends will contain the authentication cookie!)

public class CookieHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

Now coming back to the server side of things, we need to add a controller that will send the UserInfo back to the IUserService above.

In the server you want to add a UserController.cs file in the Controllers folder:

[Route("api/[controller]")]
[ApiController]
public class UserController : ControllerBase
{
    [HttpGet]
    [AllowAnonymous]
    public IActionResult GetCurrentUser() => Ok(CreateUserInfo(User));

    private UserInfo CreateUserInfo(ClaimsPrincipal claimsPrincipal)
    {
        if (!claimsPrincipal?.Identity?.IsAuthenticated ?? true)
        {
            return UserInfo.Anonymous;
        }

        var userInfo = new UserInfo
        {
            IsAuthenticated = true
        };

        if (claimsPrincipal?.Identity is ClaimsIdentity claimsIdentity)
        {
            userInfo.NameClaimType = claimsIdentity.NameClaimType;
            userInfo.RoleClaimType = claimsIdentity.RoleClaimType;
        }
        else
        {
            userInfo.NameClaimType = ClaimTypes.Name;
            userInfo.RoleClaimType = ClaimTypes.Role;
        }

        if (claimsPrincipal?.Claims?.Any() ?? false)
        {
            // Add just the name claim
            // var claims = claimsPrincipal.FindAll(userInfo.NameClaimType)
            //                            .Select(u => new ClaimValue(userInfo.NameClaimType, u.Value))
            //                            .ToList();

            // Uncomment this code if you want to send additional claims to the client.
            var claims = claimsPrincipal.Claims.Select(u => new ClaimValue(u.Type, u.Value))
                                                 .ToList();

            userInfo.Claims = claims;
        }

        return userInfo;
    }
}

And that's pretty much all, you can of course add caching to the user etc... to avoid having to make the http request on every authentication check with the HostAuthenticationStateProvider. But that's a detail that you can figure out later.

Also if you need to call a downstream API you need to do the calls from the server side of things (it's better not to store tokens in the client side of things). What I did was create an API on the server that redirects the calls to the backend API. So that the tokens are only saved in the server side of things but the user's webassembly code will call the server backend (the blazor server project) (with their cookie) and then the backend will get the info from the backend API using the Downstream API methods of Microsoft.Identity.Web.

Let me know if you need more information.

I took a lot of inspiration for this from this sample: https://github.com/damienbod/Blazor.BFF.AzureB2C.Template/tree/main

[nhwilly]

WOW! Thank you for posting that.

Super helpful.

Of course, now I don't have an excuse for diving into auth again. 😑

[Snowlights2022]

No that's not my template. I'm talking about this: https://github.com/mahald/Templates installation instructions: MudBlazor/Templates#410 (comment)

:) I'm sorry for that. But I found templates mentioned in your pr cannot work under your instructions. The dotnet cli gives me a error code 103 which means The template or the template package was not found and a warn ./Templates/src/MudBlazor is unsupported . I misunderstood you, and thought that the repo mentioned today had solved this possible problem.

[Snowlights2022]

I tried this and it works.
dotnet new install ./Templates/src/MudBlazorWebTemplate

[jkears]

I am running on .Net 8 rc2 and it seems that MudSelect is not working. It appears to be something to do with the integrated Popover not showing the items list, and as such, non of the list shows when selected for drop-down but no errors.

[mahald]

Which type of interactivity have you implemented – global or per page? Ensure that the providers are configured in InteractiveMode, and it should be consistent with the mode you are operating in, particularly if you've opted for per-page interactivity. Have you utilized a template? If not, you can refer to this template suitable for any mode: MudBlazor Template.

[jkears]

Hi, @mahald

Thank you! We installed your new MudBlazor template, from which we could see how to make this work.

As for interactivity, it is on a per page basis.

We are currently working on an in-house App Builder for Blazor (design below).

Our Page Builder does not require any navigation, as it is a single page, that is launched from a parent App Builder, which is why the traditional location and setup of the Mud providers would not have worked for us.

As per your template approach, we stood up the Blazor Providers in the Server Side interactive Pages, which in our design are the Page Editor Canvas and Fragment Editor Canvas components.

As can be seen, the designer is composed of both Server and WASM based components and with that, we now have the MudBlazor providers working per normal.

Many thanks,
John Kears

[emorell96]

I was able to get the MudLayout, MudDrawer and MudThemeProvider to work without setting a global render mode. I added the details in this issue: #7511 (comment)

I hope it helps someone. Of course the MudLayout has a limitation with the approach above, is that the class cannot change dynamically when the drawer is open, so I can only use a fixed drawer as far as I know. More details in the issue comment.

[Aquaritek]

The more you get into this the more you're going to run into problems with MudBlazor if you choose to utilize per page interactivity.

We've managed to get everything to work consistently but with some hacks and a fair amount of custom code including moving inter component event lifecycles (meaning communications between components with different interactivities) into a lightweight custom JS message bus.

[emorell96]

I agree, I just wanted to share in case someone wanted to take a closer look at it. I will stick to server interactivity for my app for now. The bugs are not worth it. For example, I realized the Match of NavLinks were not working properly with the per page approach. And I got fed up of investigating it. Even though I am curious as to why that wouldn't work.

[emorell96]

I discovered this bug dotnet/aspnetcore#51216 pretty sure that's why the NavLinks where not properly displaying the active page. So I still think it's doable to get a per page interactivity. At least enough that the MainLayout is static. I'd love to be able to separate the rendermode from the MainLayout and the rest of the app, it's kind of annoying to have to do a round trip to the server just to open a drawer. In theory it would be much smoother if the drawer would open with webassembly and the body could be server based so that you can query APIs without exposing them.

I'll keep exploring and posting what I find from time to time. It might be useful for other contributors at one point or another. I don't think it would be wise just to say MudBlazor should just be used with webassembly or server, it's ignoring the real benefits of .net 8. So IMHO any bit of work towards investigating any issues like these should be worth it in the long run to know where it all breaks down for future reference.

[emorell96]

I was able to continue the work with a test app and get MudBlazor to work with the Layout being static (and thus no "reconnecting" error after leaving the site idle), and the parts of the Layout being either WebAssembly or Server.

For example in this picture the Drawer and Theme Button (the little sun) are interactive using the Automatic interactive mode, and the SignOut button uses Server side interactivity allowing me to still use server side authentication!

The key was to use services for opening drawers or toggling themes, no longer I am using a cascading parameter or a global variable, instead I inject a service for both. One I called IDrawerSevice, and IToggleService and inside I have a list of callbacks I can register the UI to react to. And I can open, or toggle the theme from outside the individual components (MudDrawer, MudThemeProvider) through the callbacks and the methods in the service.

This decouples the rendering modes and allows me to mix and match pretty easily. The only thing I haven't been able to do is have the whole layout shift to the right like the Drawer normally does, for now, I just use a fixed layout which still looks great in mobile and desktop.

I'll test at one point the SnackBarProvider and DialogProvider and report back.

[NitroDH]

We resorted to a handful of custom services as well in both C# and JS to handle certain things. Still running into situations that require a workaround. Currently dealing with the MudDialogProvider which unless registered at the top of the component hierarchy (outside of any containers or things like that) does not display correctly when opened. It's positioning is relative to the container it falls within and for some reason it's forcing a scrollbar when the content doesn't require scrolling which is interesting.

Also, I took a week to try other component libraries and let's just say pretty much everyone is going to need to fundamentally rearchitect their libraries to work well with the new Blazor model.

[nhwilly]

Did you look at FluentUI? It seems to be ready.

I really like MudBlazor, but SSR is a game changer. Support for it will be critical for us and we have just started building out the UI.

I'll have to make a decision very soon. It would be good to know the plan.

[nhwilly]

It's too much of a shift for me at the moment.

I'm sticking to straight WASM and MudBlazor. I trust these folks will figure out how to make things work for mixed SSR/WASM projects with some guidance.

For the record, I think Fluent-UI is OK, I just can't handle everything all at once. I have to move on.

[gabephudson]

Looking forward to MudBlazor support for .Net 8 and SSR. Perhaps a good time for the breaking changes required for MudBlazor 7?

As any early adopter, Blazor 8 defaulting to SSR is a fairly huge change and pretty much breaks most Blazor Server apps (can't speak for WASM) when using the "Blazor Web" template.

Here is what I've found if it helps anyone reading the thread...

• You can update your Blazor Server/Mudblazor app to .Net 8 simply by changing the project version and updating any Microsoft dependency packages to 8.0+. This will just work as it always has and you'll be on an LTS version. You are still running a Blazor Server app.
• You can update to the new "Blazor Web" model/patterns by following the instructions in the link below. Out of the box, this will very much break MudBlazor. However, with some quick work you can configure it to run as normal...
  https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio
  I encourage everyone to create a new "Blazor Web" project in VS and study the new default template(s).

To get the "Blazor Web" model working in an "InteractiveServer" mode with MudBlazor, you have to do a couple of things...

1. Follow all the steps in the link above to rewire program.cs, app.razor, and routes.razor.
2. You will have to default your app to InteractiveServer globally. You can do this by configuring your Routes component...
   <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
3. Because the new model will close a SignalR circuit when navigating to pages that don't have the InteractiveServer render mode, it is important the global MudBlazor components that require Scoped service be included "inside" the first InteractiveServer component. The easiest way to do this is to move your MudBlazor global components into the Routes.razor file (instead of App.razor).

<Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(PubLayout)"> <Authorizing> <Spinner /> </Authorizing> </AuthorizeRouteView> </Found> </Router> <MudThemeProvider /> <MudDialogProvider /> <MudSnackbarProvider />

With the above steps, I have no issue running my MudBlazor app on this new template. The key is the InteractiveServer must be the global default mode and set early on the Routes component. Any Scoped services need to be inside/below that component in order for them to be included in the circuit.

If you want to experiment with SSR, there is currently no way to set a Page/Component to SSR using the RenderMode attribute. This is being considered for .Net 9...
dotnet/aspnetcore#51046

*However, there is a work around...
Add a reference to the HttpContent in App.razor
[CascadingParameter] public HttpContext? HttpContext { get; set; }

Add a field that creates an IComponentRenderMode instance based on the path...
private IComponentRenderMode? RenderModeForPage => HttpContext!.Request.Path.StartsWithSegments("/static", StringComparison.OrdinalIgnoreCase) ? null : new InteractiveServerRenderMode(prerender: false);

Now update the Routes tag to utilize this field as the RenderMode instead of InteractiveServer...
<Routes @rendermode="RenderModeForPage" />

Now you have an app that is, by default globally InteractiveServer, but which you can selectively (by path), play with SSR components. Just keep in mind SSR components don't have access to your Scoped services or the same browser state as the InteractiveServer components do. SSR is stateless and there is no SignalR circuit.

*Big thanks to Daniel Roth for helping me understand and suggesting this workaround.

[gabephudson]

mahald also references the work around approach for SSR above. :)

[hjrb]

Using it with .net 8. ported a Blazor WASM .net 7 by upgrading all NuGet packages to 8.x as applicable - no issues so far. Haven't tried the new hosting models yet.

[flaussmann]

Same here but with Blazor Server.

[nhwilly]

WASM conversion was painless.

[ajheunis]

I tried to use Fluent Blazor, but its look and feel just doesn't appeal to me. MudBlazor is still the best as far as I can tell. I would love to see a .NET 8 supported version. Has anyone found any mention of this in a Roadmap anywhere?

[Solbstr]

I have ported my blazor wasm hosted pwa from .net 7 to .net 8 blazor web app. When publishing app with trimming enabled the Routes.razor gets trimmed away and app wont start. Anyone have a solution for this issue?

[ScarletKuro]

I think it's related to this breaking change https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/8.0/trimmode-full

TrimMode defaults to full for Web SDK projects

But WASM itself never supported the full mode, always partial and it was the default in net6 & net7.
WASM discovers the endpoints via reflection, this is why route or any other page my get removed in full mode.
Related issue dotnet/aspnetcore#49409

[Solbstr]

Okey, i tried with full, partial, link etc. But in every case i stumble on different issues.

[ScarletKuro]

I stumble on different issues

What are these different issues? In any case it would make sense to create an issue in ms repo, because it's not really related to mudblazor, especially the route

[AlexW68]

Okey, i tried with full, partial, link etc. But in every case i stumble on different issues.

Pretty much where I am at, I fix one thing and another breaks, I have read every post on here, followed every example, same thing fix one thing break another.

I am only trying to get interactive server working with authentication (I know those pages have to be static), I am not even trying to get mudblazor onto the accounts pages yet, I am using normal razor pages and controls, I get a range of errors from circuit disconnects to looping on the Http Context.

I have created a number of projects from scratch using the Visual Studio templates, then adding MudBlazor in.

I do accept this is not a MudBlazor issue but it's likely that someone in this repo will get it working properly.

[ATEEKGIT]

[AlexW68]

@ATEEKGIT your findings are pretty much where I got to, if you lock the app to a specific render mode interactive server in my case everything works, what does not work is statically rendered pages, they seem to break the circuit, all sorts of things go wrong like state containers get reset, session state is not callable from on initialize.

I moved away from state containers that are Scoped, Singleton ones still work.

In one app I removed all session state code, moved to passing values in the url's and I have had no problems since.

[ATEEKGIT]

i am writing steps to create a fully functional Blazor Web App from scratch (blazor 8) with AutoMode fully SSR with Mudblazor so you guy can understand the actuall changed stuff , which is pretty couplbe of line. just give me 30 minutes so your application can work ssr also lol.

[AlexW68]

I have some middleware code so you can use MudBlazor on the login pages, you are welcome to drop that into the project if you need it.

[Pinox]

thanks @ATEEKGIT. I have been using .net 8 with Mudblazor from one of the first .net 8 preview releases probably 6 months ago and everything was working 100% from the start. Never had a day's problem although I was using only Blazor Server. Good to know the upgrade path to Auto mode looks promising.

[ATEEKGIT]

yes @AlexW68 applications itself have to adopt new behaviors , it is not specific to Mudblazor , but over all architectures of applications and the way they treat sessions etc. as now it will be 2 way if they want to go auto modes etc.

[ATEEKGIT]

Steps to create from scratch a fully functional Blazor 8 web App using MudBlazor with interactivity Auto mode.

1. Create new Blazor Web App Soution with Interactive render mode : Auto (server and webassembly) , Interactivity location : Global.

2. install mudblazor from nuget in client project of your solution.

3. (change) put @using MudBlazor in _imports.razor of both server and client project.

4. in Server Project , App.razor which is new index.htm actually , put links for blazor fonts and stylesheets just like we did in blazor 7 in index file.

5. put the mudblazor.min.js script tag after <Routes tag in app.razor , just like we do in index.htm previously.

6. (change) put builder.Services.AddMudServices(); in BOTH program.cs of server and client projects after builder creation.

7. in client layout folder , mainlayout.razor , comment everything existing except @inherits layoutcomponentbase on top and place the MudThemeProvider, MudDialogProvider, MudSnackbarProvider tags together with Mudlayout stuff like we use to do previously.

8. (Real Change in setup ) go to program.cs in server project and at last line which will be like this.
   app.MapRazorComponents()
   .AddInteractiveServerRenderMode()
   .AddInteractiveWebAssemblyRenderMode()
   .AddAdditionalAssemblies(typeof(Counter).Assembly);

this is by default by microsoft template which include example codes so it placed counter in addadditionalassemblies. change it to like this.

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

Note the change of "MyBlazorApp.Client._Imports" on place of "Counter".

Now overall setup is complete , lets test if the mudblazor is working.

1. Go to Home.Razor page in your client project/pages folder. this the page with @page "/" and run by default so without complicating further add the Mud Components here as below.

<MudMenu Label="Show me something good"> <MudMenuItem>Here i am</MudMenuItem> </MudMenu>
2. now run the project and click on MudMenu to see seomthing good :). , if menu opens and show you "here i am" it means interactivity is working otherwise menu will not open.

now you can experiment with auto conversion of blazor server mode initially and webassembly on second application load by deleting browser history etc.etc.

good luck :)

[tysongibby]

I created a working project template using @ATEEKIGIT 's steps here.

[danielgreen]

Has anyone had success with MudDialog in a .NET 8 Blazor Web App?
So far I've not been able to get any dialogs to open, having tried a few of the samples from the docs.

I've been careful to set one of the interactive render modes, rather than testing on a static SSR page. But no luck.

[gabephudson]

Yes, you need to ensure the "MudDialogProvider" component is "nested in" an InteractiveServer component that is a parent of the interactive page. The easiest way to do this is to include in your Routes.razor component if you are using a "global" RenderMode template.

If not, you need to add this provider to highest level component(s) your "interactive" page is rendering under. For example, a layout page shared by all interactive pages.

[loknopf]

@danielgreen I've been playing around with the .Net 8 Template of MudBlazor (see Templates repo) and I like their approach:
They use a component called "MyMudServiceProvider" which you add on your page where you want to use those Services. Then you can inject the services as normal and it works just fine. I just tested it.

I like this idea of not having it on the layout, maybe it's just me but hey :D

I hope I could help.

PS: You need to active rendermode InteractiveServer / WebAssembly but this way it is just for the one page, not the whole app.

[danielgreen]

@loknopf Is there a .NET 8 template? Wasn't aware of this.
Moving the DialogProvider and PopoverProvider from the layout into individual interactive components has unblocked me for now anyway.

[gabephudson]

I also like the idea of grouping the providers in a component. Good call by loknopf. Here is the link to the component in the template repo...
https://github.com/MudBlazor/Templates/blob/dev/src/MudBlazorWebTemplate/BlazorWeb-CSharp/Components/MyMudProviders.razor

[ralfbalzer]

I have been trying to get a Balzor Web App .Net 8 working.
The app has got an additional Razor Assembely, which I have linked in Program.cs via .AddAdditionalAssemblies(typeof(AssembleyName._Imports).Assembly) and in Routes.razor as <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(AssembleyName._Imports).Assembly }">.

In my development environment, all is working fine (including all the MudBlazor Components), but when I publish the app to IIS, I get a Uncaught Syntax Error: Unexpected Token '<' in MudBlazor.min.js:1 error.

After this error has occured, I get the same issue in my Dev environment. Deleteting the project folder and re-creating it via GitHub makes it work again in my Dev Environment.
Has anyone got an idea what could cause this?

[mikes-gh]

If you have a repo I can clone I can have a look for you.

[zielik-dev]

In my case .Net8 with "MudBlazor Version 6.15.0" the 2 out of 3 components and are causing errors regardless where they are i.e. App.razor or individual page component. The only is fine. The additional suggested above <MudThemeProvider @rendermode="InteractiveServer" /> and <MudSnackbarProvider @rendermode="InteractiveServer" /> aren't improving.

I'm wondering if you're are able to support and advice?

Error1:
Uncaught TypeError: Cannot read properties of null (reading 'click')
at HTMLDivElement.onclick ((index):1:42)
onclick @ (index):1

Error2:
[2024-02-08T13:09:57.551Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'.
log @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
i.onmessage @ blazor.web.js:1
blazor.web.js:1

[scharada]

Hi. it looks like you're well on your way with net8/mudblazor... i am just getting started.
i spent the last 24 hours trying to integrate mudblazor into the Aspire Starter Kit that comes with VS2022 without luck.
i was wondering if anyone has tried it. thank you.

[AdamJachocki]

I would like to know if there are any news on that? I want to try MudBlazor in .NET8 and it looked promising, but too much important stuff doesn't work (JavaScript interop exceptions). So do you guys plan to release version for .NET8? I mean, is it on your roadmap?

[ScarletKuro]

Hi. Mudblazor supports NET8 since 6.12.0 version aka it got it for 4 months now.

but too much important stuff doesn't work (JavaScript interop exceptions)

This has nothing to do with the Mudblazor tho. Create an ticket in the Microsoft repository.

[AdamJachocki]

OK, I've done some more research and I don't think that MS ruined it. I'd rather say that there were many breaking changes in Blazor 8. So, for example my application is InteractiveServer mostly. MOSTLY. I have one page that is used to login and it uses HttpContext. That's why it should be Server Static.

So when I have layout, this will not work:

@inherits LayoutComponentBase

<MudBlazor stuff...>
<div>
  @Body
</div>

MudBlazor will throw JavaScript interop exception at some times. For example when using Dialog or tooltips.

I cannot do this also:

@inherits LayoutComponentBase
@rendermode InteractiveServer

<MudBlazor stuff...>
<div>
  @Body
</div>

Because it doesn't work with Blazor and there is an exception that Body cannot be passed.

But when I add MudBlazor staff somewhere inside the layout like in MainApp.razor, then everythink works fine.

What's more, this is not only MudBlazor problem, but with other UIs frameworks that makes heavy use of JavaScript. But not all of them. For example Blazored.Modal doesn't work as well - it's cascading parameter needs to be set "inside" layout just like your's.

But BlazorBootstrap works for some reason. So I would say that - yes - Blazor 8 had some breaking changes. But maybe components should be written in some other way that they used to be. Of course this would probably break MudBlazor and it would be MudBlazor for version <8 and >=8. But that is only my assumption based on some observations.

[ScarletKuro]

MudBlazor will throw JavaScript interop exceptions at times, for example when using Dialog or tooltips.

Could you provide stack traces? If this occurs during SSR (static) time, then it's likely a bug, as we should not be calling JS during that phase. As far as I know, most of our components check whether the JS runtime is available or not.

That's why it should be Server Static.

SSR (static) is not supported by MudBlazor, and there have been many discussions in Discord and here as to why. Therefore, you should not use MudBlazor components when dealing with SSR (static). I believe our template includes an example of how you can mix MudBlazor and static identity pages, but these pages use bootstrap.

For example, Blazored.Modal doesn't work either - its cascading parameter needs to be set "inside" layout just like yours.

Our dialog system (and snackbar) are based on Blazored.Modal; it was donated by the original author.

But BlazorBootstrap works for some reason.

Because it's pure JS/CSS, it doesn't require any C# interactivity, so it works with SSR (static).