Почему компоненты в этом приложении Blazor не обрабатываются?

Я пишу приложение Blazor и, очевидно, хочу, чтобы в нем рендерились некоторые компоненты. Я только что попытался добавить базовый элемент навигации в свой основной макет, но он не отображается. Я вижу элемент в DOM, но этот элемент пуст.

Для начала я использовал довольно простой контент в моем компоненте NavMenu, который я пытаюсь включить в MainLayout.cshtml:

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

Я также взял довольно простой макет на своей странице MainLayout.cshtml:

@inherits BlazorLayoutComponent


<NavMenu />

<div class="body-content">
    @Body
</div>

Файловая структура в моем проекте кажется несложной:

введите здесь описание изображения

Так что я не понимаю, что я упустил из виду. Похоже, Blazor знает, что он должен что-то отображать на странице - поэтому я вижу элемент NavMenu в DOM. Но внутри этого элемента никогда не отображается никакого контента. Чего не хватает?

Компонент NavMenu Blazor

Я использую последнюю (на момент написания) версию Blazor: 0.5.1.


person Phil.Wheeler    schedule 12.08.2018    source источник
comment
Я должен добавить: я также пробовал добавлять компонент <NavMenu /> на другие страницы (например, /Pages/Index.cshtml) с теми же результатами.   -  person Phil.Wheeler    schedule 12.08.2018
comment
Не могли бы вы также поделиться кодом NavMenu?   -  person Flores    schedule 12.08.2018
comment
Ok. Я понял. NavMenu содержит только ‹h1›?   -  person Flores    schedule 12.08.2018
comment
Я пытаюсь воспроизвести это, но со всем, что я мог придумать, это продолжает работать на моей стороне. Не могли бы вы где-нибудь поделиться своим полным проектом?   -  person Flores    schedule 12.08.2018
comment
Но сначала проверьте мой ответ ниже, это должно быть так.   -  person Flores    schedule 12.08.2018
comment
@Flores Ага - я оставил его действительно базовым пока только для целей тестирования, поэтому в коде NavMenu буквально есть одна строка, содержащая элемент <h1 />, пока я не смогу понять, почему вообще ничего не отображается.   -  person Phil.Wheeler    schedule 13.08.2018


Ответы (2)


Вероятно, вы столкнулись с ошибкой в ​​файле .csproj. Должно получиться так:

<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

person Flores    schedule 12.08.2018
comment
Отличное предложение! Я еще раз проверю это сегодня вечером, потому что уверен, что вы на правильном пути - я сделал несколько дополнений к элементам в разделе ItemGroup. - person Phil.Wheeler; 13.08.2018
comment
Неа. Я сделал некоторую очистку, и, за исключением ссылки на проект, файл proj выглядит примерно так, как вы описали здесь. Похоже, проблема Github, на которую вы ссылались, все еще довольно активна, и это известная проблема - только с другими основными симптомами, чем я вижу. - person Phil.Wheeler; 15.08.2018
comment
Это вызывает у меня любопытство ... не могли бы вы поделиться кодом где-нибудь? - person Flores; 15.08.2018
comment
Не легко. Я счастлив перенести этот разговор в чат, чтобы обсудить. - person Phil.Wheeler; 17.08.2018

Оказывается, основная причина была связана с пространствами имен и регистром.

Когда я изначально настраивал проект, я создавал его с помощью командной строки в VS Code. По привычке все писал строчными буквами (т.е. dotnet new blazor -o myapp).

В качестве личного предпочтения я предпочитаю, чтобы мои пространства имен были ограничены заголовками, поэтому некоторое время спустя я решил «привести в порядок» и изменить myapp на Myapp. Я просмотрел код для рефакторинга под новое имя titlecase, и все было скомпилировано, поэтому я продолжал работать ... до тех пор, пока несколько недель спустя я не вернулся, чтобы поработать над компонентом, и заметил, что он не работает.

Оказывается, страницы razor автоматически распределяются по именам на основе папок, и некоторые из них включаются на страницу _ViewImports.cshtml. Этот файл по-прежнему ссылался на пространство имен в нижнем регистре, и страницы, которые искали корень проекта в нижнем регистре, больше не могли найти правильные общие компоненты.

Поэтому неудивительно, что это полностью проблема, вызванная самим собой, и да, я чувствую себя очень глупо из-за того, что не продумал ее должным образом с самого начала.

person Phil.Wheeler    schedule 22.08.2018