作为Razor类库的独立Blazor应用程序



从技术上讲,是否可以将一个完整的Web程序集Blazor应用程序作为Razor类库,然后在另一个ASP.NET项目中使用它,而不管使用者是MVC、Razor Pages还是Blazor应用程序?是否可以在Razor类库中定义路由?

我正在做一个项目,该项目将以Nuget包的形式发布。这个包应该在各种ASP.NET项目中使用,这些项目被实现为MVC、Razor Pages,甚至Blazor。

我想好了如何让它运行。我使用的是.NET 5.0。

首先使用Razor类库项目创建一个新的解决方案(选中复选框Support pages and views(。

并创建一个MVC项目。

Startups.cs中添加以下内容:

public void ConfigureServices(IServiceCollection services)
{
...
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}

还要确保在Configure方法中有app.UseStaticFiles();

然后,在Razor类库中,您可以复制并粘贴示例Blazor webassembly项目中的页面、共享文件夹和所有其他Razor文件。另外,不要忘记wwwroot css文件夹,并将您自己的wwwroot文件夹添加到您的RCL中。

在Pages文件夹中,还创建一个新的cshtml文件。这将是您的Blazor应用程序的入口点。

示例代码:

@page
@using PROJECTNAME
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor WebAssembly Prerendered</title>
<base href="~/" />
<link href="/_content/PROJECTID/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="/_content/PROJECTID/css/app.css" rel="stylesheet" />
@*https://learn.microsoft.com/de-de/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#razor-class-library-rcl-support*@
<link href="/_content/PROJECTID/PROJECTNAME.bundle.scp.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
</body>
</html>
<script src="_framework/blazor.server.js"></script> <!--blazor.webassembly.js didn't work-->

其中最重要的部分是<base href="~/" />_framework/blazor.server.js

如果您没有像@page "/"那样将此页面映射到根目录,则必须确保所有静态内容都正确映射到项目id。

如果不使用/作为根目录,也要确保示例项目NavMenu.razor中的路径是正确的。Razor组件中也必须正确。

如果_Imports.razor文件有问题,请尝试添加NuGet包Microsoft.AspNetCore.Components.WebAssembly

还要为共享文件夹添加正确的名称空间,在示例项目中它是PROJECTNAME.Shared。相应地进行更改。

下面是一篇博客文章,它帮助我以正确的方式做事:https://blog.joelving.dk/2020/02/reusable-ui-and-interchangable-hosting-models-in-blazor/

相关内容

  • 没有找到相关文章

最新更新