Razor 页面中的 Blazor 组件
Blazor Components in Razor Pages
我们有一个基本的剃须刀页面应用程序。我们想添加 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();
});
}
如果有人能给我指点一个包含 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
为了在您的 Razor 页面中嵌入 Razor 组件,您可以执行以下操作:
将名为 Components 的文件夹添加到您的应用
1.1 创建一个名为 App.razor 的组件,其中应包含:
<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />
创建一个名为 Pages 的文件夹(在 Components 文件夹下)
- 将您的 Counter.razor 文件放在该文件夹中。此文件夹可能包含更多 Razor 组件。
- 在 Pages 文件夹中添加一个 _ViewImports.cshtml。它应该包含:
@using WebApplication1.Components.Shared
@layout MainLayout
在您的 Components 文件夹中创建一个名为 Shared 的文件夹。此文件夹应包含两个文件:MainLayout.razor 和 NavMenu.razor。
只需从 Blazor 应用复制这些文件即可。
在 Components 文件夹中添加一个 _ViewImports.cshtml 文件
此文件应包含:@namespace WebApplication1.Components
实际上我们在这里所做的是创建一个 Blazor 应用程序,它将在您的 MVC 或 Razor 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()
{
}
}
}
就是这样。如果这不起作用,问题可能与启动 class.
中的配置错误有关
希望这对您有所帮助...
打开了这个问题 - https://github.com/aspnet/AspNetCore/issues/9834. Turns out, this was a bug that needed to be resolved by the Blazor team. You will also want to take a look at https://github.com/aspnet/AspNetCore/pull/10062。要立即解决,请在关闭此问题时执行拉取请求或等到下一个预览版。
我们有一个基本的剃须刀页面应用程序。我们想添加 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();
});
}
如果有人能给我指点一个包含 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
为了在您的 Razor 页面中嵌入 Razor 组件,您可以执行以下操作:
将名为 Components 的文件夹添加到您的应用 1.1 创建一个名为 App.razor 的组件,其中应包含:
<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />
创建一个名为 Pages 的文件夹(在 Components 文件夹下)
- 将您的 Counter.razor 文件放在该文件夹中。此文件夹可能包含更多 Razor 组件。
- 在 Pages 文件夹中添加一个 _ViewImports.cshtml。它应该包含:
@using WebApplication1.Components.Shared
@layout MainLayout
在您的 Components 文件夹中创建一个名为 Shared 的文件夹。此文件夹应包含两个文件:MainLayout.razor 和 NavMenu.razor。 只需从 Blazor 应用复制这些文件即可。
在 Components 文件夹中添加一个 _ViewImports.cshtml 文件 此文件应包含:@namespace WebApplication1.Components
实际上我们在这里所做的是创建一个 Blazor 应用程序,它将在您的 MVC 或 Razor 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()
{
}
}
}
就是这样。如果这不起作用,问题可能与启动 class.
中的配置错误有关希望这对您有所帮助...
打开了这个问题 - https://github.com/aspnet/AspNetCore/issues/9834. Turns out, this was a bug that needed to be resolved by the Blazor team. You will also want to take a look at https://github.com/aspnet/AspNetCore/pull/10062。要立即解决,请在关闭此问题时执行拉取请求或等到下一个预览版。