刀片页面中的Blazor组件

刀片页面中的Blazor组件,blazor,Blazor,我们有一个基本的剃须刀页面应用程序。我们想添加Blazor组件。我们可以通过复制04/16 Blazor更新视频中的步骤或使用Blazor文档来实现这一点。然而,一旦我们将Blazor组件添加到Razor页面,我们所有的asp页面链接就不再工作。url在地址栏中更改,但我们仍在同一页面上。启动文件如下所示: public void ConfigureServices(IServiceCollection services) { services.Configure<CookiePo

我们有一个基本的剃须刀页面应用程序。我们想添加Blazor组件。我们可以通过复制04/16 Blazor更新视频中的步骤或使用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();
         });
    }
public void配置服务(IServiceCollection服务)
{
配置(选项=>
{
options.checkApprovered=context=>true;
});
services.AddRazorPages()
.AddNewtonsoftJson();
AddServerSideBlazor();
}
public void配置(IApplicationBuilder应用程序、IWebHostEnvironment环境)
{
if(env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
其他的
{
app.UseExceptionHandler(“/Error”);
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(端点=>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
});
}
如果有人能给我介绍一个多页的教程,里面有Razor页面和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页面中嵌入Razor组件,您可以执行以下操作:

  • 将名为Components的文件夹添加到应用程序 1.1创建名为App.razor的组件,该组件应包含:
    
    

  • 创建名为Pages的文件夹(在Components文件夹下)

  • 将您的Counter.razor文件放在此文件夹中。此文件夹可能包含更多Razor组件
  • 在Pages文件夹中添加_ViewImports.cshtml。它应包括:
  • 在Components文件夹中创建名为Shared的文件夹。此文件夹应包含两个文件:MainLayout.razor和NavMenu.razor。 只需从Blazor应用程序复制这些文件

  • Components文件夹中添加一个_ViewImports.cshtml文件 此文件应包含:@namespace WebApplication1.Components

  • 我们在这里实际做的是创建一个Blazor应用程序,它将在MVC或Razor页面中预渲染和执行

    如何使用它:
  • 在应用程序页面文件夹(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>
    
    仅此而已。如果这不起作用,则问题可能与Startup类中的配置错误有关


    希望这有帮助…

    打开了这个问题-。事实证明,这是一个需要Blazor团队解决的bug。你也会想看看。若要立即解决,请在此问题结束时执行拉取请求,或等到下一个预览版本

    我认为您必须展示“将Blazor组件添加到Razor页面”的实际含义。当你不能发布真正的代码时,创建一个模型(但是在发布之前要确保它是编译的)。是的,Blazor组件可以进入Razor页面。请参阅下面的代码片段。我们遇到的问题是asp页面链接停止工作。blazor组件工作正常。Home
    @(wait Html.RenderComponentAsync())将组件集成到Razor页面中,MVC应用程序将组件与现有Razor页面和MVC应用程序一起使用。使用Razor组件无需重写现有页面或视图。呈现页面或视图时,组件会同时预呈现†。-我可以证实你的症状。一旦调用Blazor组件,信令集线器就会接管,路由将变为Blazor的。这就是为什么我怀疑这是一种受支持的模式。@Henk Holterman,Blazor服务器端的预渲染是由Razor页面中使用的html帮助程序RenderComponentAsync实现的。我不知道启用预渲染的其他方法。无论你想嵌入一个Razor组件还是整个应用程序,你都必须使用html助手RenderComponentAsync方法。很好的尝试。事实上,我执行了你的步骤,得到了与我已经得到的相同的结果。添加组件效果很好。Blazor功能可以正常工作。但是,页面外的链接仍然断开。地址栏会更新,但没有页面导航。在github.com/CarrotSolutions/WebApplication1.git上可以找到Repo什么链接断开了?您是否可以提供一个示例并生成您所采取的步骤,这些步骤会导致地址栏更新,但不会触发导航?我可以在任何样板MVC或Razor页面默认模板中复制此场景。链接到带有as Blazor组件的页面以及所有其他页面链接将不再起作用。您甚至可以使用Blazor服务器端应用程序的样板模板应用程序复制相同的情况,并链接到任何mvc视图或razor页面。这一定是一个启动问题。删除端点。MapBlazorHub();将允许链接再次工作,但显然这破坏了Blazor组件。是的,由于我的代码应该是完美的,我还认为启动配置是罪魁祸首。转到github,删除或编辑您在那里发布的问题,并生成一个新的问题,在其中报告错误。当您请求帮助时,您当前的问题不会得到Blazor团队的任何响应,但是如果您报告一个bug,它将得到不同的处理。
     @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>
    
        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()
            {
            }
        }
    }