我们有一个基本的剃须刀页面应用程序。我们想添加Blazor组件。通过复制04/16 Blazor Update视频中的步骤或使用Blazor文档,我们可以毫无问题地工作。但是,一旦我们将Blazor组件添加到Razor页面,我们所有的asp页面链接将不再起作用。 URL在地址栏中更改,但是我们保持在同一页面上。启动文件如下:
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true;
});
services.AddRazorPages()
.AddNewtonsoftJson();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
});
}
如果有人可以指导我阅读有关Razor Pages和Blazor Components的多页教程,我相信我们可以弄清楚!预先感谢!
blazor组件工作正常。
<a asp-page="./Index">Home</a><br />
<div id="Counter"> @(await Html.RenderComponentAsync<Counter>())
<script src="~/_framework/blazor.server.js">
</script>
</div>
Microsoft文档状态-将组件集成到Razor Pages和MVC应用程序中将组件与现有Razor Pages和MVC应用程序一起使用。无需重写现有页面或视图即可使用Razor组件。呈现页面或视图时,将同时预渲染组件†。 -https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0
答案 0 :(得分:2)
要将Razor组件嵌入到Razor页面中,您可以执行以下操作:
将名为Components的文件夹添加到您的应用程序
1.1创建一个名为App.razor的组件,该组件应包含:
<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />
创建一个名为Pages的文件夹(在Components文件夹下)
@using WebApplication1.Components.Shared
@layout MainLayout
在“组件”文件夹中创建一个名为“共享”的文件夹。此文件夹应包含两个文件:MainLayout.razor和NavMenu.razor。 只需从Blazor应用程序复制这些文件即可。
在 Components 文件夹中添加_ViewImports.cshtml文件 该文件应包含:@namespace WebApplication1.Components
我们实际上在这里所做的是创建一个Blazor应用程序,该应用程序将在您的MVC或Razor页面中预渲染并执行。
1.1 Components.cshtml可能包含:
@page
@model WebApplication1.Pages.ComponentsModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1- Components</title>
<base href="~/" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>@(await Html.RenderComponentAsync<WebApplication1.Components.App>())</app>
<script src="_framework/components.server.js"></script>
</body>
</html>
1.2 Components.cshtml.cs应包含以下内容:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace WebApplication1.Pages
{
public class ComponentsModel : PageModel
{
public void OnGet()
{
}
}
}
仅此而已。如果这不起作用,则该问题可能与Startup类中的配置错误有关。
希望这对您有帮助...
答案 1 :(得分:1)
已打开此问题-https://github.com/aspnet/AspNetCore/issues/9834。事实证明,这是Blazor团队需要解决的错误。您还将希望看看https://github.com/aspnet/AspNetCore/pull/10062。要立即解决,请在此问题关闭后发出拉取请求,或者等到下一个预览版本发布。
答案 2 :(得分:0)
您可能在索引页面中缺少基本元素。 如果缺少,请将其添加到head元素:
<base href="~/" />
一种或另一种方式,问题出在路由系统上,这与使用基础文档uri在Blazor中如何进行路由有关。
URL在地址栏中更改,但我们保持在同一页面上
查看您的注释中如何反映IUriHelper中的JavaScript:https://github.com/aspnet/AspNetCore/blob/237b19b2b9b2fd9ea481781e8999803144e68501/src/Components/Browser.JS/src/Services/UriHelper.ts