mudblazor/templates

Ready to use Blazor Templates in different styles and layout with all the basic setup already done for MudBlazor.

Blazor Template pre-configured with MudBlazor.

We're excited to announce the availability of a new template for .NET 8 Web Apps: the MudBlazor Web App template. This template is based on the Microsoft Web App template, but has been modified to include MudBlazor components.

Prerequisites

• .NET 8 SDK
• Visual Studio 2022, JetBrains Rider or Visual Studio Code

Getting Started

Installation

dotnet new install MudBlazor.Templates

Usage

Interactive per Page

dotnet new mudblazor --interactivity (Auto|Server|WebAssembly)

Interactive Global

dotnet new mudblazor --interactivity (Auto|Server|WebAssembly) --all-interactive

Adding Authentication

dotnet new mudblazor --interactivity Auto --auth Individual
dotnet new mudblazor --interactivity Auto --auth Individual --all-interactive

Visual Studio Templates

The templates can also be used in Visual Studio and should show up in the list when creating a new project.

Contributing

Installing directly from Source Code

If you want to test changes to the templates source code that hasn't been published yet clone the source code and execute the InstallAndBuildAllTemplates.ps1 powershell script

git clone https://github.com/MudBlazor/Templates.git

If you get an error about the script not being digitally signed use this command to change the security policy for this shell session:

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

To Do for the .NET 8 Template

• Integrate MudBlazor components into the authentication system (currently using Bootstrap components from the original template)

templates's Issues

Extra Project Generated when making WASM-PWA-Hosted Project

Hi,
When creating a new project using version 0.6.3 and selecting the WASM-PWA-Hosted Project type, an extra .csproj is created!

Steps to reproduce are of course creating a blank project with type WASM-PWA-Hosted

MudTable(ServerData) Page Navigation is not working

Hi, thanks for amazing yours.

I have carefully tried the sample code in the below link
https://mudblazor.com/components/table

 
<MudTable ServerData="@(new Func<TableState, Task<TableData<Element>>>(ServerReload))"  
                        Dense="true" Hover="true" @ref="table">

I am getting callback events to my ServerLoad() method except for page navigation.
I have total of 100 records and per page, I am showing 10 and when I try to move to page number 2 ( 11-20) I am not getting a callback event to ServerLoad mehod.

please advise.

template package install fails on existing wasm PWA project

I have an existing project created with "blazorwasm" template included in Visual Studio 2022, and i'd like to include MudBlazor in it but i always encounter an error message that says:
"the package 'MudBlazor.Templates 0.6.3' conteins a package type 'Template' that is not supported by the project .
The same if i create a new project by "blazorwasm" and i try to add Mudblazor as second step.
On the contrary, after installing the MudBlazor template in Visual Studio, if a create a new project with that template (wasm-PWA) the project is correctly created and it correctly runs.

I'm new on Mudblazor but looking into .cprj files and dependancies i noticed that in Mudblazor by template project i read:
PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.2"
PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all"
PackageReference Include="MudBlazor" Version="6.0.6"
while in my previous blazorwasm template project:
PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.9"
PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.9" PrivateAssets="all"

Even upgrading these two files to 6.0.10 version of WebAssembly nothing change.

Is this the problem ? How can i overcome it ? Or do i have to stay with 6.0.2 release of WebAssembly files ?

Error when upgrading to NuGet package 5.0.1

These are great templates!

I get an error when updating the NuGet package to MudBlazor 5.0.1:

What to do?

Does MudBazor Templates break CSS Isolation?

I just tried the vary basic CSS Isolation example from here in my project using MudBlazor Template for Server. The Administrator version.

The isolated CSS does not update the H1.

But if I create a new default Blazor app and do the exact same example, it works. H1 color updates.

Others have assured me that CSS Isolation works with the MudBlazor library, so the only variable I can think of is something in Templates is blocking it.

Anyone?

EDIT: I guess the follow up question would be: How can I get CSS Isolation to work in the Template?

PWA template does not allow app to download and install

Out of the box the wasm-pwa template the app can not be installed once launched in a web browser. Looking through chrome console errors I found the manifest specifies two different icons, but only one icon is provided in the wwwroot assets folder.

By removing the 192x192 icon entry from the manifest I cleared up the errors and the download and install option was available.

Null reference exception when using NavigationManager with HeadOutlet

I get:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

on this line of code:

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

This happens when I try and redirect from one of my components:

@using System.Web;
@inject NavigationManager Navigation

@code {
    [Parameter]
    public string ReturnUrl { get; set; } = null!;

    protected override async Task OnInitializedAsync()
    {
        var loginEndpoint = "Login?redirectUri=" + HttpUtility.UrlEncode(ReturnUrl);
        Navigation.NavigateTo(loginEndpoint, forceLoad: true);
        await base.OnInitializedAsync();
    }
}

Template uses UseStaticWebAssets. Is this a security issue?

Hi everyone,

I'm kind of new to blazor and MudBlazor.
But on this page from microsoft: here, there is a warning to use static files for non development environments.

So, is adding this in any environment, like in this template, not an security issue?

And, if so, is there an alternative way to make this work?

Regards
abgenullt

Unable to install Mudblazor Templates

I have created a new Blazor app with .Net 6.0, but I am not able to install Mudblazor templates. It gives me an error :
Package 'MudBlazor.Templates 0.6.1' has a package type 'Template' that is not supported by project

MudBlazor.ThemeManager package is not visible for searching through Nuget package manager

Not sure if this is the right place to file this issue but while looking for the ThemeManager package, I could not find it through Nuget package manager. However, adding it through PackageReference via .csproj file does pull the correct package.

Minidrawer with AdminDashboard puts the main container under the drawer when it's closed

Drawer closed

Drawer opened

I've found a workaround by setting the left margin to 56px on mud-main-content css class but was wondering if there was something else I could do? Is there a better solution?

.mud-main-content {
    margin: 0 0 0 56px;
    flex: 1 1 auto;
    padding-top: var(--mud-appbar-min-height);
    transition: margin 225ms cubic-bezier(0,0,.2,1) 0ms;
}

mobile view and theme manager

MudBlazor wasm template screws offline mode

Bug type

Other

Component name

No response

What happened?

When I create new project using MudBlazor template: wasm pwa aspnet core hosted.
Then there is one project unnecesarry. But major problem is that this project cannot be used offline. It says 404 error when trying. I'm using ofcoarse published release version.

But when I use standard blazor wasm project and add MudBlazor to project manually, then everything works. I couldn't find out where is the problem.

Expected behavior

When I create Mudblazor wasm project and publish it. Load it for the first time and then stop the server. It should work.

Reproduction link

create empty mudblazor project. thats it.

Reproduction steps

1. Create empty MudBlazor wasm pwa aspnet core hosted project from MudBlazor template.
2. publish release version of it
3. Load this web in the browser and see it working.
4. Stop the server.
5. load this web again in the browser and watch 404 error.

Relevant log output

No response

Version (bug)

6.0.9

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome

On what operating system are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

v0.6.1 - Removed Admin Dashboard Template, will only be available as site in its own repository.

Is there a location where the Admin Dashboard Template is available?

MudBlazor.Templates does not support Blazor webassembly .net7

Error: Severity Code Description Project File Line Suppression State
Error Package 'MudBlazor.Templates 0.6.3' has a package type 'Template' that is not supported by project 'src\Presentation\TradingViewWebHook.WebApp'.

BlazorHybrid template

Anything special we need to do to get this working with the blazorhybrid template?

I followed the standard installation details for mudblazor:
https://mudblazor.com/getting-started/installation

but made adjustments as per the syncfusion blog post about setting up on the hybrid template.
https://www.syncfusion.com/blogs/post/blazor-hybrid-apps-using-mobile-blazor-bindings.aspx

"/getting-started/templates" Page doesn't exist

On the sample website.
In the get Getting Started > Installation page (https://mudblazor.com/getting-started/installation), there is a note about pre-configured templates, with a link to https://mudblazor.com/getting-started/templates.

This templates link is returning 404.

MudBlazor Template with Authentication

Hi, I am new to Blazor and I love MudBlazor.
Can someone modify this template with asp.net core authentication?
Thanks in Advance.

When will the template be upgraded to .Net 7 (or 8)

Templates is a great way to communicate best practises and project setup, however these templates use the v6 runtimes of MudBlazor (and .Net) and the upgrade to .net 7 leaves a bit of a mess. Can we please have updated versions of the templates for the current runtimes?

Are MainLayout.razor.css and NavMenu.razor.css needed?

Are MainLayout.razor.css and NavMenu.razor.css needed in DefaultBlazor.Wasm?
DefaultBlazor.Server template does not use those.
And I do not see any differences after removing from DefaultBlazor.Wasm, too.

Where to get the Admin Dashboard template?

Hi, Where can I get the Admin Dashboard template?

Thanks a lot

Feature Request: MudAutoComplete, set list width

I think there'd be great value in being able to set the width of the filtered list independently of the MudAutoComplete component.

Maybe the component only displays 50 characters and truncates the rest.

But as I type, I want to see 100 or 150 characters or so, in order to see the entire value so I can select the right one.

[Windows] 404 for MudBlazor on Production mode

The MudBlazor Files could not be fetched from the aspnet backend 404:

Steps to reproduce:

• Have Windows (10)
• Install dotnet 6 rc1 sdk x64
• dotnet new blazorserver
• Follow the tutorial: https://mudblazor.com/getting-started/installation#manual-install
• dotnet run --environment Production

After this easy steps i get this strange behavior (see Screenshot). It seems MudBlazor could not be served from the virtual _content folder.

Edit: When i'm running dotnet run --environment Development everthing is fine.

Please provide information about how to use these templates

I tried packing them with nuget and installing them, but that didn't work. I tired creating a template via Visual Studio, but only the individual projects ever show up, not the solution, as a new project option. I'm left with just coping the the solution file and the folders when I want to make a new project, but that seems like a very inefficient way to use these templates.

Fetch data page does not load fully

Created a new project with Mudblazor template, wasm hosted. Clicked build. Clicked on "Fetch Data " page. Headers appear but not the usual table data. I have not made any changes at all, just create and build. Tried with brave and firefox browsers. Tried creating a new normal Blazor app works fine.

This is the console error message :

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.JsonConverter`1[[MudBlogor.Shared.WeatherForecast[], MudBlogor.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1[[MudBlogor.Shared.WeatherForecast[], MudBlogor.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[WeatherForecast[]](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[WeatherForecast[]](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase)
   at System.Text.Json.JsonSerializer.ContinueDeserialize[WeatherForecast[]](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonConverter converter, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.<ReadAllAsync>d__65`1[[MudBlogor.Shared.WeatherForecast[], MudBlogor.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__4`1[[MudBlogor.Shared.WeatherForecast[], MudBlogor.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__13`1[[MudBlogor.Shared.WeatherForecast[], MudBlogor.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MudBlogor.Client.Pages.FetchData.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) [blazor.webassembly.js:1:35572](https://localhost:44342/_framework/blazor.webassembly.js)
Firefox can’t establish a connection to the server at wss://localhost:44352/MudBlogor.Client/.

Add template for .NET MAUI

Live Demo website down

https://templates.mudblazor.com/ doesn't seem to be working anymore.

Mudtable a button inside and Selection

I have a mudtable linked to a ICollectionList:

<MudTable Elevation=10 Height="200px" Items="@deprULs" T="DeprUL" @bind-SelectedItem="TabSelectedItem" Hover="true" FixedHeader="true" Breakpoint="Breakpoint.None" ReadOnly="true" Dense="true">

and mapped to a var TabSelectedItem. If i click on a row on any of the table´s column the row
gets selected and that specific row is in TabSelectedItem.

Inside that table i have also created a button

Problem here is that if i click that button the row does not get selected and TabSelectedItem remains
null;

Question: How do it get the selected row into TabSelectedItem?
Do i need to manually select the row and how is that possible?

Add application stylesheet link to _Layout.cshtml

I experienced the problem that CSS isolation was not working after I created an app using MudBlazor templates, by running dotnet new mudblazor --host server--name MyApplication as described in the getting started guide.

As I have not much experience with Blazor, it took a too much time finding out that the line <link href="MyApplication.styles.css" rel="stylesheet" /> is "missing", compared to what the dotnet new blazorserver command does.

I guess to add the stylesheet link statement in the head section in the _Layout.cshtml for Blazor Server apps should be fairly easy. If I find some time, I'd be happy to see if I can provide a PR.

MudBlazor is just awesome!

MudThemeManager - Open Source

Hi guys,

Great work with the mud theme. Also love the work done on the mudthememanager. Was wondering if we could get the source of the manager as we are looking to integrate that into a more generic right side panel. Also hoping to learn more about it and maybe the community can help with the implementation of the missing elements.

Thanks,
Rakesh

Issue with hosting on AWS Amplify

I am trying to deploy your awesome template on AWS Amplify. I am using this tutorial to for that https://swimburger.net/blog/dotnet/how-to-deploy-blazor-webassembly-to-aws-amplify

For pure Blazor Wasm it works fine, as well as for pure MudBlazor template. But on your template I get web assembly exception when navigating from login to Dashboard. Same when navigating to any other page. Am I missing something is there any difference or change in hosting redirects I need to make ?

Here is the hosted example:https://dev.d2p39p1v1zkoec.amplifyapp.com/

Templates is not updated to .Net core 6

Templates need to be updated to .Net core 6, without startup and with new _host/layout...

Bug: starup error when My ASPNETCORE_ENVIRONMENT is not setting to Development

Bug desc

In our project, we have multi environment configs, each of them has a appsettings file.for example:

• appsettings.json (common config info for all env)
• appsettings.2020test.json ( some special configs for 2020test env)
• appsettings.2020prod.json ( some special configs for 2020prod env)

When I change the default ASPNETCORE_ENVIRONMENT to custom name, like "2020test" the MudBlazor got some error after start the project.

My Configs

os: win11
IDE: VS2022 Version 17.0.0 Preview 4.1
local dotnet version : 5.0 latest /6.0 RC2
local MudBlazor version: 5.1.5 + lastest rc

---

How to reproduce

1. Create a startup Blazor Server project using the MudBlazor template
   

2. Open the launch setting file, change the env name from Development to a custome env
   

3. Start the server project, when the browser launch, the UI is a crazy large icon!
   

some static file was 404 when start not as a dev environment.

Publish to NuGet?

Any plans on publishing this template on NuGet?

This will allow us to run dotnet new -i "MudBlazor.Templates::*"

See docs for more info, https://docs.microsoft.com/en-us/dotnet/core/tools/custom-templates#packing-a-template-into-a-nuget-package-nupkg-file

Project Type Missing Descriptions

The "Project Type" drop-down has a (i) button, but it doesn't actually do anything. Nor is there any other descriptions for the different project types on the page.

The information on https://github.com/MudBlazor/Templates likewise doesn't describe the different hosting models.

Wrong casing in launchsettings?

Not up to speed with templating, but the launchsettings.json for wasm doesn't become replaced with project name.

Not sure if it's a casing issue "Mudblazor.Template" != "MudBlazor.Template":

Templates/src/.template.base/wasm/Properties/launchSettings.json

Line 19 in a0ce583

"Mudblazor.Template": {

Inline styles in Blazor Server

Sorry, I posted this issue in the wrong place.

Moved to MudBlazor/MudBlazor#7786.

CSS Isolation is broken

CSS isolation doesn't work with this template.
Creating a new Blazor application it works fine, but with this I just can't seem to make it work.

I have put this manually at the end of the index.html head:
<link href="ApplicationName.Client.styles.css" rel="stylesheet" />

Still when I start the page I get an error: 404 Application.Client.styles.css
It's not being generated anywhere in the project, however, in a new vanilla Blazor app I can find it in "obj\Debug\net5.0\scopedcss\bundle"

EDIT: Turns out the file is not there, because there is no component specific .css file.
Adding one results the file being created, and the 404 error going away, but still, the styles in it aren't applied at all

MudTable inline edit

Good Morning.
If you try editing a table and you press tab to pass from a field to another the row disappear causing unconsistent behaviour disappearing.
I think there is a big problem in inline editing. You can try with your own example:
https://try.mudblazor.com/snippet/maQlkVlndBPffYxw

Thank you

Why was the admin template removed

Hi new to blazor noticed that there used to be an admin template. I think that is a very good addition, not sure why removed.

Where can I find a MudBlazor admin template?
thanks

Error.cshtml references Bootstrap

The Error.cshtml file references the now removed ~/css/bootstrap/bootstrap.min.css and ~/css/app.css files. Would be nice to have these use MudBlazor css classes to keep some styling.

Where is the mudblazor admin template?

Where do we get the admin dashboard template?

The admin dashboard with mudblazor looks like this,

https://github.com/TheDayIsMyEnemy/BlazorTemplates/raw/admin-dashboard/content/AdminDashboardTemplate.png

Is this not available now? Is it deprecated?
Please throw some ideas

Thanks

is this server side or client side template

is this server side or client side template?

AdminDashboard Repository

Hey!

In your latest release is the Info that the Admin Dahsboard Template will get it's own Repo.
Any Link to that Repo, or any info?

Greetings,
Luis

project creation error when application name has hyphen

Followed https://www.mudblazor.com/getting-started/installation#using-our-dotnet-templates to create a new project but had an error on this command:
dotnet new mudblazor --host wasm --name dashboard-demo

The template "MudBlazor Templates" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on C:\Source\repos\Dud...
C:\Program Files\dotnet\sdk\6.0.202\NuGet.targets(289,5): error MSB3202: The project file "C:\Source\repos\Dud\dashboard_demo.csproj" was not found. [C:\Source\repos\Dud\dashboard-demo.sln]
Restore failed.
Post action failed.
Manual instructions: Run 'dotnet restore'

The solution file has:
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "dashboard_demo", "dashboard_demo.csproj", "{31840BA8-8B37-4929-9BCF-414518ACB738}"

but the project file is called
dashboard-demo.csproj

Two Radio Button and a Text Input

What is the easiest way to combine a Text Input and a Radio ButtonGroup (2 Choices)
on the same line for targetting mobile devices (=sm breakpoints)?
I know they are several ways with css to do so but
what is the "mudblazor" way ?

Unable to install templates in VS2019 or VS2022 dotnet5 or dotnet6 to Blazor Server or Blazor WASM

Can't seem to install templates of any version. Is there a specific project type or dependencies that must be installed to use the templates? (besides MudBlazor)
An example of the error:
Severity Code Description Project File Line Suppression State
Error Package 'MudBlazor.Templates 0.1.6' has a package type 'Template' that is not supported by project 'MudBlazorTest'.

InvalidOperationException

Hi.

A new server-based project was created using this template.
When I start building and debugging (without any editing !),
the sample website appears fine and appears to be working as expected.
However, when I look at the output window of the integrated development environment, I see the following error messages

Exception thrown: 'System.InvalidOperationException' in Microsoft.AspNetCore.Components.Server.dll
Exception thrown: 'System.InvalidOperationException' in Microsoft.JSInterop.dll
Exception thrown: 'System.InvalidOperationException' in System.Private.CoreLib.dll
Exception thrown: 'System.InvalidOperationException' in System.Private.CoreLib.dll

Is this the behavior intended by the developers?

Remove launchSettings.json from template

Bug type

Other

Component name

No response

What happened?

When attempting to have multiple solutions based off MudBlazor open at the same time all the IISExpress ports seem to be set to 61949. Reading this SO article suggests removing the launchSettings.json before creating the template so that random numbers are generated. It has no votes though so not 100% this is the true answer or not. https://stackoverflow.com/questions/52818765/visual-studio-custom-project-template-applicationurl-port-number

Expected behavior

The applicationUrl in the launchSettings.json has a randomly assigned port number.

Reproduction link

https://github.com/MudBlazor/MudBlazor

Reproduction steps

1. Install MudBlazor templates dotnet new --install MudBlazor.Templates
2. Create a Folder called MudBlazor and two subfolders called App1 & App2
3. Run dotnet new mudblazor --host server --name App1 in App1 and dotnet new mudblazor --host server --name App2 in App2
4. Compare the two launchSettings.json files to find they are identical
5. Open App1 in VS2022 and run it
6. While App1 is still running Open App2 in a new VS2022 and run it
7. Error
   

Relevant log output

No response

Version (bug)

0.6.2

Version (working)

No response

What browsers are you seeing the problem on?

Other

On what operating system are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

MudNavLink API | ForceLoad not working!

Hi!
ForceLoad not working for me, when i try reload page.

My code :