I'm writing a Blazor app and obviously I want to get some components rendered in there. I've just tried adding a basic navigation element to my main layout but it's not rendering. I can see the element on the DOM, but that element is empty.
I went with some fairly simple content to start with in my NavMenu component that I'm trying to include on MainLayout.cshtml:
I've also taken a pretty simple layout on my MainLayout.cshtml page:
@inherits BlazorLayoutComponent <NavMenu /> <div class="body-content"> @Body </div>
The file structure in my project seems uncomplicated:
So I'm at a loss here as to what I've overlooked. It looks like Blazor knows there's something it should be rendering to the page - that's why I can see the NavMenu element in the DOM. But there's never any content rendered inside that element. What's missing?
I'm running the latest (at time of writing) version of Blazor: 0.5.1.
It turns out the root cause was related to namespaces and casing.
When I originally set up the project, I created it using the command line in VS Code. Out of habit, I wrote everything in lowercase (i.e.
dotnet new blazor -o myapp).
As a personal preference, I like my namespaces to be title cased, so some time later I decided to "tidy up" and change
Myapp. I went through the code to refactor to the new titlecase name and everything compiled, so I carried on working... until a few weeks later when I went back to do some work on a component and noticed it wasn't behaving.
It turns out that razor pages are automatically namespaced based on folders and a subset of those are included in the _ViewImports.cshtml page. That file still referenced the lower case namespace and pages looking for a lowercase project root were no longer able to find the right shared components.
So unsurprisingly, it's an entirely self-inflicted issue and yes I feel very silly for not thinking it through properly from the start.
You are probably running into a bug with the .csproj file. It should look like this:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <RunCommand>dotnet</RunCommand> <RunArguments>blazor serve</RunArguments> <LangVersion>7.3</LangVersion> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.5.1" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.5.1" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" /> </ItemGroup>
Yours has most likely extra stuff in it, that prevents the component from compiling. This typically happens when adding files or copying them. See: https://github.com/aspnet/Blazor/issues/1206