标签: blazor-webassembly

环境

• Asp.Net 核心 5.0
• Blazor WebAssembly 应用程序（Asp.Net 核心托管）
• Asp.Net Core Identity（使用 Identity Server 4）

问题

我想在服务器端和客户端之间使用基于角色的授权。

我可以正确登录并UserManager.IsInRoleAsync(user, "admin")在服务器端返回 True 。

但是在客户端既不工作@attribute [Authorize(Roles = "admin")]也不行<AuthorizeView Roles="admin">。User.Identity.IsInRole("admin")在客户端也返回 False。

如何在客户端获取用户的角色？

代码

服务器.csproj

// Startup.ConfigureServices()

services.AddDefaultIdentity<ApplicationUser>(options =>
{
    options.SignIn.RequireConfirmedAccount = true;

    options.Password.RequiredLength = 6;
    options.Password.RequiredUniqueChars = 2;
    options.Password.RequireNonAlphanumeric = false;

    options.User.RequireUniqueEmail = true;
})
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

services.AddAuthentication()
    .AddIdentityServerJwt();

// Startup.Configure()

app.UseIdentityServer();
app.UseAuthentication();
app.UseAuthorization();

// RolesController.Get()

var userid = HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);
var currentUser = await …

在使用 VS 2022 预览版几次迭代后，我将其删除并在 VS 2022 Current 可用时安装了它。

现有 Blazor 托管应用程序不会在文件保存或按热重载按钮时热重载。它在预览版本中重新加载“良好”。无论我是否在调试的情况下运行它都没有关系。

使用新安装的版本创建的新应用程序会进行热重载。

我没有看到 *.csproj 或 launchSettings.json 文件有任何重要区别。他们都针对net6.0。我还删除了 .vs 目录并清理了解决方案。

唯一的区别是我的项目在新应用程序模板中使用 Program.cs 和 Startup.cs 而不是仅使用 Program.cs，但这并不重要。或者，是吗？

是什么阻止 Visual Studio 热重载现有应用程序？

更新

切换到单个 Program.cs 和 WebApplication 构建器确实有所帮助。现在热重载无需调试即可工作。通过调试，VS 表示它应用了更改，但它们并未应用在屏幕上。

我仍然想知道为什么需要进行此更改以及如何在调试时启用热重载？

我是 .net、C# 新手，目前正在编写我的第一个 Blazor（服务器端）应用程序。后来我想迁移到 Blazor WebAssembly..

但是，我想到了一个问题，我需要控制器吗？
我知道 NestJS 形式的控制器 - 控制器处理 http 请求并使用服务进行数据交换和其他任务。

但是因为目前一切都是在服务器端处理的，所以不会发出 http 请求。所以我想不出这个（部门）可以派上用场的情况。

此外，控制器是否在发出实际 http 请求的 WebAssembly Blazor 应用程序中使用？
因为在这里我可以想象这样的划分是有利的。


提前致谢。

我刚刚在 Blazor WebAssembly 中完成了第一个重要的测试应用程序。Blazor 是令人印象深刻的东西，但我发现很难推理属性的更改如何导致 DOM 更新 - 例如，在 Razor 组件中引用该属性。

<div>@SomeProperty</div>

public int SomeProperty {get;set;}

在 WPF 中，很容易推断更改如何流动并导致呈现更改，因为它们是由事件和 DependencyProperty 更改触发的。您可以看到这些并绑定到它们。在 Blazor 中，您可以通过某种方式更改属性值并更新页面。这背后的精确机制有点像魔术。因此，很难推断如何删除复杂组件的不必要更新。

谁能解释一下这个主题的基础？

是否有任何文档或视频深入探讨 Blazor 的这一领域？

我有一个 Blazor Webassemble、.NET 托管应用程序。在我们托管它的服务器上，应用程序的基本路径将为mydomain.com/coolapp. 因此，为了尝试让应用程序在服务器上正确呈现，我一直在遵循本页“应用程序基本路径”部分中概述的 Microsoft 步骤： https: //learn.microsoft.com/en-us/aspnet /core/blazor/host-and-deploy/?view=aspnetcore-6.0&tabs=visual-studio#app-base-path

我正在按照我在那里看到的所有步骤进行操作，但是当我尝试运行该应用程序时，我从 blazor 框架文件中收到 404。据我所知，我正在执行文档中描述的所有操作。

1. 创建新的 blazor wasm 项目，选中 .net core 托管选项
2. 将基本标签更改index.html为：<base href="/coolapp/" />
3. 将此行添加到Program.cs：app.UsePathBase("/coolapp");
4. 添加app.UseStaticFiles("/coolapp"); //without this, you get 404's from blazor.framework.js and nothing loads
5. "commandLineArgs": "--pathbase=/coolapp",在"BlazorApp1.Server"配置文件中设置命令行参数的启动选项

从那里开始，运行应用程序似乎可以正常工作，因为它找到了启动所需的 .js 文件，但随后无法加载运行应用程序的 DLL，返回所有 404：

如果我直接导​​航到此路径，则会出现 404 错误，但如果我/coolapp从 dll 的 url 中删除 ，它将下载该文件。所以它就像仍然托管在 的基本路径/而不是/coolapp.

我缺少什么？我正在尝试尽可能最基本的示例。我将代码推到这里进行检查：https ://github.com/DrLeh/BlazorAppNewBasePath

配套 dotnet git 问题：https ://github.com/dotnet/aspnetcore/issues/40205

在此页面的下图中，它显示当调用 OnInitializedAsync 返回未完成的任务时，它将等待该任务，然后渲染组件。

然而，当返回未完成的任务时，实际发生的情况似乎是立即渲染组件，然后在未完成的任务完成后再次渲染它。

该页面后面的一个示例似乎证实了这一点。如果组件在调用 OnInitializedAsync 之后没有立即呈现，而是仅在返回的任务完成后第一次呈现，您将永远不会看到“正在加载...”消息。

OnParametersSetAsync 行为看起来相同。当返回未完成的任务时，它立即渲染一次，然后在该任务完成后再次渲染。

我是否误解了渲染生命周期，或者这是文档中的错误？

谢谢

@page "/fetchdata"
@using BlazorSample.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <!-- forecast data in table element content -->
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

我目前正在使用 MudBlazor 并且非常喜欢它。

然而，我发现自己反复添加一些东西到像 CancellationTokens 这样的组件中，自己自定义模板。

有没有办法完全继承/扩展现有组件？

一种选择是创建一个新组件，其中包含我想要修改的组件的实例，并将所有参数添加到我的组件中并将它们映射回原始组件，但我觉得必须有更好的方法。

在 Blazor WASM 独立应用程序中，这很容易，因为有专门的元素：

<div id="app">Loading...</div>

一旦应用程序加载，它就会被替换。

在 .NET 8 上的 Blazor 中，情况则不同。考虑这两页：

@page "/home"

@page "/wasmPage"
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

当从 过渡/home到/wasmPageBlazor 时，会删除 的内容<main>，将其替换为bl-load注释并开始加载必要的文件...

我们没有任何元素可以显示该Loading...消息。

有什么可以订阅的吗？

来源，我发现：

• 也许答案隐藏在启动文档中，它描述了如何自己开始加载，但这不是我想要做的..
• 一旦加载过程开始，--blazor-load-percentagecss 变量就会出现。我可以想出一个解决方案，检查是否存在等，但我希望有更好的方法。
• 编辑加载脚本可能是一个选项，但同样 - 我希望有一个更简单的解决方案。

经过讨论后，@MrC aka Shaun Curtis很明显解决方案是存在的 - 使用预渲染页面。基本上仅在服务器上生成页面时放置Loading...（预渲染）。（关于SO的类似问题）。这不包括我的预渲染设置为 false 时的情况。我还是想看看是否有解决方案。

有任何想法吗？

要将 C# 编译为 WebAssemly 并与 JS 互操作，需要使用 Blazor WebAssembly ASP.NET 框架，该框架是为 SPA 设计的，如果您只想使用 JS 中的 C# 库，则会产生大量开销。

将 DLL 编译为 WebAssembly 并从 JavaScript 使用它的最低设置是什么？

我试图RenderFragment从组件私有方法返回 a ，但出现编译错误：

'__builder' does not exist in the current context

这是显示问题的最小代码：

<div>
    @RenderButton(1)
</div>

@code {
    private RenderFragment RenderButton(int number)
    {        
        return builder =>
        {
            <button type="button">@number</button>
        };
    }
}

在我看来，这可能是不可能/允许的，如果不是，有什么方法可以避免编写相同的渲染代码？假设我需要在RenderButton多个循环中使用此方法，并且 if else 块

编辑：我现在能想到的唯一解决方案是为每个RenderFragment方法创建一个组件