Blazor 核心托管 - Razor Class 库项目中的所有组件都在页面上打印为 HTML
Blazor Core Hosted - all Components in Razor Class Library Project are being printed as HTML on the page
我找不到类似问题的关键字,所以我发布了一个新的关键字。
项目运行良好,突然出现下面描述的问题。我只是在编辑 Razor Class 库中的一些 Razor 文件,所以我无法追溯到我所做的任何代码修改。
问题:
我有以下项目结构:
Client、Server 和 Shared 是最初由 .NET Core 3.0 中的 Blazor 模板创建的项目。 DesktopClient 是一个与 ElectronNET 类似的 Blazor 项目,问题也发生在 there.The SharedLibrary 项目上的组件上所有项目通用的组件都已放置,问题的根源显然来自何处。
SharedLibrary 在 Client 项目中被引用,因此我可以访问 Client[=87] 中的组件=] 项目.
发生的事情是 Razor Class 库中的组件突然停止 "compiled" 并且所有“@”都被打印为 Raw HTML 喜欢 "Counter 2" 的按钮:
[]
注意图像上有 3 个按钮。第一个位于基础 Razor 页面中,并且正在正确编译。第二个来自 SharedLibrary 项目并且 显然没有被编译,因为“@”标签没有被替换 d。第三个按钮来自 Client 项目(与基本 Razor 页面相同的项目)中的组件,并且也正常工作。
所以问题是 SharedLibrary Razor 文件没有被 "compiled".
我尝试过的:
- 从项目中删除和添加引用;
- 清理并重建解决方案;
- 更新包;
- 检查 .csproj 以查看我是否能找到任何东西 wrong/missing(对此文件没有经验,所以可能遗漏了一些东西)。
- 创建了一个新的 Blazor Core Hosted 项目并添加了一个 Razor Class 库,其设置与该演示相同。它工作正常,所以问题出在这个项目上。依赖项和“.csproj”文件看起来非常相似。
代码:
.csproj 为客户项目:
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Exe</OutputType>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.2.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\SharedLibrary\SharedLibrary.csproj" />
<ProjectReference Include="..\Shared\ServerAPI.Shared.csproj" />
</ItemGroup>
<ItemGroup>
<Content Include="..\..\SharedLibrary\Content\styles\font\**\*.*">
<Link>wwwroot\styles\font\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\system\*.*">
<Link>wwwroot\images\system\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\social\brands\*.*">
<Link>wwwroot\images\social\brands\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Compile Remove="bin\**" />
<Content Remove="bin\**" />
<EmbeddedResource Remove="bin\**" />
<None Remove="bin\**" />
<Content Remove="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<_ContentIncludedByDefault Remove="compilerconfig.json" />
<_ContentIncludedByDefault Remove="wwwroot\styles\main.css" />
</ItemGroup>
<ItemGroup>
<Folder Include="Properties\" />
<Folder Include="Services\" />
<Folder Include="wwwroot\images\system\" />
<Folder Include="wwwroot\scripts\" />
</ItemGroup>
<ItemGroup>
<None Include="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\styles\main.css">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
</ItemGroup>
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
</Project>
.csproj 共享库
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Library</OutputType>
<IsPackable>true</IsPackable>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.Extensions.Localization.Abstractions" Version="3.0.0" />
</ItemGroup>
<ItemGroup>
<Folder Include="Content\images\social\brands\" />
<Folder Include="Core\Login\" />
<Folder Include="Core\Login\OAuth2\" />
<Folder Include="Services\" />
</ItemGroup>
<ItemGroup>
<Compile Update="Resources\Languages\en-US.Designer.cs">
<DesignTime>True</DesignTime>
<AutoGen>True</AutoGen>
<DependentUpon>en-US.resx</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="Resources\Languages\en-US.resx">
<Generator>ResXFileCodeGenerator</Generator>
<LastGenOutput>en-US.Designer.cs</LastGenOutput>
</EmbeddedResource>
</ItemGroup>
</Project>
Index.razor
@page "/"
@using ServerAPI.Client.Components
@using SharedLibrary.Components.User
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
<SocialWithFormLoginComponent />
<Counter />
SocialWithFormLoginComponent.razor 在 SharedLibrary 项目中
<h1>Counter 2</h1>
<p>Current count 2: @currentCount2</p>
<button class="btn btn-primary" @onclick="IncrementCount2">Click me 2</button>
@code {
int currentCount2 = 0;
void IncrementCount2()
{
currentCount2++;
StateHasChanged();
Console.WriteLine("Hello world!");
}
}
Counter.razor 在客户项目中
<h1>Counter 3</h1>
<p>Current count 3: @currentCount3</p>
<button class="btn btn-primary" @onclick="IncrementCount3">Click me 3</button>
@code {
int currentCount3 = 0;
void IncrementCount3()
{
currentCount3++;
StateHasChanged();
Console.WriteLine("Hello world!");
}
}
最终评论
如您所见,代码对于我的故障排除非常简单,但是项目却不是,因此重新创建将需要大量工作。
我有什么建议可以尝试吗?我在这里真的很困惑。
提前致谢!
更新解决方案:
事实证明,正如@dani hererra 发布的那样,我在附加的 Razor Class 库的组件文件夹中丢失了“_Imports.razor”,如下所示:
检查 Microsoft.AspNetCore.Components.Web
列在 _Imports.razor
:
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web //<-----
@using Microsoft.JSInterop
@using _your_namespace_
@using _your_namespace_.Shared
我找不到类似问题的关键字,所以我发布了一个新的关键字。
项目运行良好,突然出现下面描述的问题。我只是在编辑 Razor Class 库中的一些 Razor 文件,所以我无法追溯到我所做的任何代码修改。
问题:
我有以下项目结构:
Client、Server 和 Shared 是最初由 .NET Core 3.0 中的 Blazor 模板创建的项目。 DesktopClient 是一个与 ElectronNET 类似的 Blazor 项目,问题也发生在 there.The SharedLibrary 项目上的组件上所有项目通用的组件都已放置,问题的根源显然来自何处。
SharedLibrary 在 Client 项目中被引用,因此我可以访问 Client[=87] 中的组件=] 项目.
发生的事情是 Razor Class 库中的组件突然停止 "compiled" 并且所有“@”都被打印为 Raw HTML 喜欢 "Counter 2" 的按钮:
[
注意图像上有 3 个按钮。第一个位于基础 Razor 页面中,并且正在正确编译。第二个来自 SharedLibrary 项目并且 显然没有被编译,因为“@”标签没有被替换 d。第三个按钮来自 Client 项目(与基本 Razor 页面相同的项目)中的组件,并且也正常工作。
所以问题是 SharedLibrary Razor 文件没有被 "compiled".
我尝试过的:
- 从项目中删除和添加引用;
- 清理并重建解决方案;
- 更新包;
- 检查 .csproj 以查看我是否能找到任何东西 wrong/missing(对此文件没有经验,所以可能遗漏了一些东西)。
- 创建了一个新的 Blazor Core Hosted 项目并添加了一个 Razor Class 库,其设置与该演示相同。它工作正常,所以问题出在这个项目上。依赖项和“.csproj”文件看起来非常相似。
代码:
.csproj 为客户项目:
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Exe</OutputType>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.2.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\SharedLibrary\SharedLibrary.csproj" />
<ProjectReference Include="..\Shared\ServerAPI.Shared.csproj" />
</ItemGroup>
<ItemGroup>
<Content Include="..\..\SharedLibrary\Content\styles\font\**\*.*">
<Link>wwwroot\styles\font\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\system\*.*">
<Link>wwwroot\images\system\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\social\brands\*.*">
<Link>wwwroot\images\social\brands\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Compile Remove="bin\**" />
<Content Remove="bin\**" />
<EmbeddedResource Remove="bin\**" />
<None Remove="bin\**" />
<Content Remove="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<_ContentIncludedByDefault Remove="compilerconfig.json" />
<_ContentIncludedByDefault Remove="wwwroot\styles\main.css" />
</ItemGroup>
<ItemGroup>
<Folder Include="Properties\" />
<Folder Include="Services\" />
<Folder Include="wwwroot\images\system\" />
<Folder Include="wwwroot\scripts\" />
</ItemGroup>
<ItemGroup>
<None Include="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\styles\main.css">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
</ItemGroup>
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
</Project>
.csproj 共享库
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Library</OutputType>
<IsPackable>true</IsPackable>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.Extensions.Localization.Abstractions" Version="3.0.0" />
</ItemGroup>
<ItemGroup>
<Folder Include="Content\images\social\brands\" />
<Folder Include="Core\Login\" />
<Folder Include="Core\Login\OAuth2\" />
<Folder Include="Services\" />
</ItemGroup>
<ItemGroup>
<Compile Update="Resources\Languages\en-US.Designer.cs">
<DesignTime>True</DesignTime>
<AutoGen>True</AutoGen>
<DependentUpon>en-US.resx</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="Resources\Languages\en-US.resx">
<Generator>ResXFileCodeGenerator</Generator>
<LastGenOutput>en-US.Designer.cs</LastGenOutput>
</EmbeddedResource>
</ItemGroup>
</Project>
Index.razor
@page "/"
@using ServerAPI.Client.Components
@using SharedLibrary.Components.User
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
<SocialWithFormLoginComponent />
<Counter />
SocialWithFormLoginComponent.razor 在 SharedLibrary 项目中
<h1>Counter 2</h1>
<p>Current count 2: @currentCount2</p>
<button class="btn btn-primary" @onclick="IncrementCount2">Click me 2</button>
@code {
int currentCount2 = 0;
void IncrementCount2()
{
currentCount2++;
StateHasChanged();
Console.WriteLine("Hello world!");
}
}
Counter.razor 在客户项目中
<h1>Counter 3</h1>
<p>Current count 3: @currentCount3</p>
<button class="btn btn-primary" @onclick="IncrementCount3">Click me 3</button>
@code {
int currentCount3 = 0;
void IncrementCount3()
{
currentCount3++;
StateHasChanged();
Console.WriteLine("Hello world!");
}
}
最终评论
如您所见,代码对于我的故障排除非常简单,但是项目却不是,因此重新创建将需要大量工作。
我有什么建议可以尝试吗?我在这里真的很困惑。
提前致谢!
更新解决方案:
事实证明,正如@dani hererra 发布的那样,我在附加的 Razor Class 库的组件文件夹中丢失了“_Imports.razor”,如下所示:
检查 Microsoft.AspNetCore.Components.Web
列在 _Imports.razor
:
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web //<-----
@using Microsoft.JSInterop
@using _your_namespace_
@using _your_namespace_.Shared