Clash Royale CLAN TAG#URR8PPP

Why would components in this Blazor app fail to render?

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:

<h1>WHYYYY????</h1>


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.

<NavMenu />

2 Answers
2

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

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).

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 to 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.

myapp

Myapp

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.