从技术上讲,是否可以将一个完整的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/