剃须刀页面中的大黄色组件

我们有一个基本的剃刀页应用程序。我们想添加大黄色组件。通过复制04/16 Blazor Update视频或使用Blazor文档中的步骤，我们可以使用它来工作。但是，一旦我们将极发组件添加到剃须刀页面，我们所有的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();
         });
    }

如果有人可以将我指向带有剃刀页和大麻零件的多页教程，我敢肯定，我们可以弄清楚这一点！预先感谢！

大发组件效果很好。

<a asp-page="./Index">Home</a><br /> 
<div id="Counter"> @(await Html.RenderComponentAsync<Counter>()) 
<script src="~/_framework/blazor.server.js">
</script> 
</div>

Microsoft文档状态 - 将组件集成到Razor页面，MVC应用程序将组件与现有的Razor页面和MVC应用程序一起使用。无需重写现有页面或视图即可使用剃刀组件。当渲染页面或视图时，组件会同时使用预订†。-https：//lealen.microsoft.com/en-us/aspnet/core/blazor/components?view= aspnetcore-3.0

为了将剃须刀组件嵌入剃须刀页面，您可以执行以下操作：

在您的应用中添加一个名为组件的文件夹1.1创建一个名为app.Razor的组件应包含： <Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />
创建一个名为页面的文件夹(组件文件夹下方(
将柜台文件放在此文件夹中。该文件夹可能包含更多的剃须刀组件。
在页面文件夹中添加_viewimports.cshtml。它应该包含：

    @using WebApplication1.Components.Shared
    @layout MainLayout

创建一个在您的组件文件夹中共享的名为共享的文件夹。该文件夹应包含两个文件：mainlayout.razor和navmenu.razor。只需从Blazor应用程序复制这些文件。
在组件文件夹中添加_viewimports.cshtml文件此文件应包含：@namespace webapplication1.components

我们实际上在这里所做的是创建一个大型应用程序，该应用程序将在您的MVC或剃须刀页面中进行预先执行。

如何使用它：

在您的应用程序页面文件夹( webapplication1.pages (添加两个文件：components.cshtml和components.cshtml.cs

1.1组件。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组件.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()
        {
        }
    }
}

就是这样。如果这不起作用，则问题可能与启动类中的配置故障有关。

希望这会有所帮助...

打开此问题-https：//github.com/aspnet/aspnetcore/issues/9834。事实证明，这是一个错误，需要由大火团队解决。您还需要查看https://github.com/aspnet/aspnetcore/pull/10062。要立即解决，请在关闭此问题或等到下一个预览发布时执行拉动请求。

如何使用它：

相关内容

最新更新

热门标签：