logo标签列表

Razor页面中的Blazor组件

blazor
5
我们有一个基本的 Razor 页面应用程序。我们想要添加 Blazor 组件。通过复制 04/16 Blazor 更新视频中的步骤或使用 Blazor 文档，我们没有问题将其工作起来。但是，一旦我们将 Blazor 组件添加到 Razor 页面中，所有的 asp-page 链接都不再工作。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组件的多页教程，我相信我们可以解决这个问题！提前感谢！
Blazor组件运行良好。
<a asp-page="./Index">Home</a><br /> 
<div id="Counter"> @(await Html.RenderComponentAsync<Counter>()) 
<script src="~/_framework/blazor.server.js">
</script> 
</div>

微软文档说明 - 将组件集成到Razor Pages和MVC应用程序中，使用现有的Razor Pages和MVC应用程序与组件一起使用。无需重写现有页面或视图以使用Razor组件。页面或视图呈现时，组件将同时进行预渲染†。- https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0
我认为你需要展示一下“将Blazor组件添加到Razor页面”的实际含义。当你不能发布真正的代码时，请创建一个模拟版本（但在发布之前确保它可以编译）。 - H H
是的，Blazor 组件可以嵌套在 Razor 页面内。请参见以下代码片段。我们遇到的问题是 asp-page 链接停止工作。但是 Blazor 组件运行良好。 <a asp-page="./Index">Home</a><br /><div id="Counter"> @(await Html.RenderComponentAsync<Counter>()) <script src="~/_framework/blazor.server.js"></script></div> - Chas
将组件集成到 Razor Pages 和 MVC 应用程序中。无需重写现有页面或视图以使用 Razor 组件。在渲染页面或视图时，组件会同时进行预渲染。 - Chas
我可以确认你的症状。一旦调用Blazor组件，SignalR Hub就会接管并路由变为Blazor的。这就是为什么我怀疑这不是受支持的模式的原因。 - H H
正确，这就是为什么我已经在使用 - @(await Html.RenderComponentAsync<Counter>()) - 如上所示。组件的渲染工作正常。页面上的其他链接是有问题的。某个地方阻止了导航到其他页面。我已经尝试了各种方式更改了 Startup 文件。代码库可以在 github.com/CarrotSolutions/WebApplication1.git 找到。 - Chas
显示剩余2条评论
2个回答
4
为了在 Razor Pages 中嵌入 Razor 组件，您可以执行以下操作：

  1. 添加一个名为 Components 的文件夹到您的应用中。 1.1 创建一个名为 App.razor 的组件，它应该包含： <Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />

  2. 在 Components 文件夹下创建一个名为 Pages 的文件夹。

  3. 将您的 Counter.razor 文件放到此文件夹中。此文件夹中也可以包含更多的 Razor 组件。
  4. 在 Pages 文件夹中添加一个 _ViewImports.cshtml 文件。它应该包含：
    @using WebApplication1.Components.Shared
    @layout MainLayout

  1. 在您的Components文件夹中创建一个名为Shared的文件夹。该文件夹应包含两个文件：MainLayout.razor和NavMenu.razor。 只需从Blazor应用程序中复制这些文件。

  2. 在Components文件夹中添加_ViewImports.cshtml文件 此文件应包含：@namespace WebApplication1.Components

我们实际上创建了一个Blazor应用程序，在您的MVC或Razor页面中进行预渲染和执行。

如何使用：

  1. 在您的应用程序Pages文件夹（WebApplication1.Pages）中添加两个文件：Components.cshtml和Components.cshtml.cs

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()
        {
        }
    }
}

就是这些。如果这样还不行，问题可能与启动类中的配置错误有关。

希望这可以帮助你...

很好的尝试。事实上，我按照您的步骤执行，得到了相同的结果。添加组件工作得非常好。Blazor功能可以正常使用。然而，页面链接仍然无法使用。地址栏会更新，但没有页面导航。页面仍然停留在原地。 - Chas
哪些链接是损坏的？你能提供一个例子并列出你所采取的步骤吗？这些步骤会导致地址栏更新，但没有触发任何导航。 - enet
我可以在任何基本的MVC或Razor Page默认模板中复制这种情况。将其作为Blazor组件链接到页面，所有其他页面链接将不再起作用。您甚至可以使用Blazor Server Side应用程序的样板模板应用程序并链接到任何mvc视图或razor页面来复制相同的情况。这必须是一个启动问题。删除endpoints.MapBlazorHub();将允许链接再次工作，但显然会破坏Blazor组件。 - Chas
在这个点之后应该有一些代码吗：“将一个名为Components的文件夹添加到您的应用程序中1.1创建一个名为App.razor的组件，其中应包含：”？您能补充一下App.razor文件应该包含什么吗？ - tomRedox
Blazor要求你的（Page）属性具有名称 - 值得将你页面上的@Page更改为包括其路由。例如：@Page（“/”）等。 - Robert Perry
显示剩余3条评论
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接