标签: blazor-client-side

我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗？

Application Insights SDK 是否适用于 Blazor WASM？

我正在尝试连接我的应用程序，但它不发送任何指标。即使在实例化 TelemetryClient 时，它也只是挂起。

我正在尝试在 Blazor WASM 的 Program.cs 类中配置多个 API url。我没有看到像服务器端那样的 AddHttpClient 扩展。想知道是否有人对此有替代解决方案？

这是我到目前为止所拥有的：

var firstURI = new Uri("https://localhost:44340/");
var secondURI = new Uri("https://localhost:5001/");

void RegisterTypedClient<TClient, TImplementation>(Uri apiBaseUrl)
   where TClient : class where TImplementation : class, TClient
{
   builder.Services.AddHttpClient<TClient, TImplementation>(client =>
   {
       client.BaseAddress = apiBaseUrl;
   });
}

// HTTP services
RegisterTypedClient<IFirstService, FirstService>(firstURI);
RegisterTypedClient<ISecondService, SecondService>(secondURI);

我创建了一个 Asp.Net Core 托管的 Blazor webassembly 3.2.0 Preview 3 应用程序，其中包含应用程序内帐户的身份验证选项。然后我向 ApplicationUser 类添加了一些额外的属性，并将这些更改迁移到数据库。然后我实现了一个自定义声明工厂，如下所示：

public class MyCustomUserClaimsPrincipalFactory : UserClaimsPrincipalFactory<ApplicationUser>
{
    public MyCustomUserClaimsPrincipalFactory(
        UserManager<ApplicationUser> userManager,
        IOptions<IdentityOptions> optionsAccessor)
            : base(userManager, optionsAccessor)
    {
    }

    protected override async Task<ClaimsIdentity> GenerateClaimsAsync(ApplicationUser user)
    {
        var identity = await base.GenerateClaimsAsync(user);
        identity.AddClaim(new Claim(ClaimTypes.GivenName, user.FirstName ?? string.Empty));
        .....

        return identity;
    }
}

并在服务器应用程序中注册声明工厂，如下所示：

services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>()
            .AddClaimsPrincipalFactory<MyCustomUserClaimsPrincipalFactory>();

但是，当我在客户端 Web 应用程序组件中列出声明时，我没有看到我在自定义声明工厂中添加的任何其他声明。我用来列出索赔的代码是：

<AuthorizeView>
   <Authorized>
    <ul>
        @foreach (var claim in context.User.Claims)
        {
            <li><span>@claim.Type</span><span>@claim.Value</span></li>
        }
    </ul>
   </Authorized>
</AuthorizeView>

我确认正在调用声明工厂代码。如何在客户端 Web 应用程序中获取其他声明？

编辑：我甚至用ClaimsTransformer（如建议尝试 …

如何使用 Blazor + MatBlazor（Blazor 的材料设计）而不使用 Javascript 创建表单向导？用户应该能够在表单的不同页面之间导航，并且进度条应该动态更新。

Blazor 似乎使客户端可以轻松地使用下面称为 SignalR 的东西来调用服务器的方法。但是当我搜索 Blazor 是否在另一个方向上这样做时，答案是 Blazor 不会这样做，我必须自己使用 SignalR 来实现它。所以，我想到了投票。

也就是说，我喜欢按一定时间间隔读取服务器对象中的属性或调用方法来确定某些内容是否已更改。为了测试这一点，我将此属性添加到WeatherForecastService类中。每次读取时属性都会增加。

    int _Value = 0;
    public int Value
    {
        get
        {
            _Value++;
            return _Value;
        }
    }

在天气平板电脑示例中，我删除了显示天气的代码并添加了此代码。

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

<div>Value = @this.Value</div>

@code {
    private int Value = 0;

    protected override async Task OnInitializedAsync()
    {
        System.Timers.Timer t = new System.Timers.Timer();
        t.Elapsed += (s, e) => { Value = ForecastService.Value; };
        t.Interval = 1000;
        t.Start();
    }
}

但这没有用。我发现了一个现有的问题，但它使用了我不理解的 F#，而且我不知道它是什么ClientTImer，所以答案对我没有帮助。

我们正开始将项目迁移到 blazor，但在将内容限制为仅登录用户时遇到了一些问题。

对于此测试，我们使用了标准 Visual Studio 2019 Blazor 服务器端项目模板，并启用了本地用户和帐户身份验证。

然后，我们将 App.razor 文件更改为以下内容：

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
        <NotAuthorized>
            NOT AUTHORIZED!!!!!
        </NotAuthorized>
        <Authorizing>
            AUTHORIZING!!!!!
        </Authorizing>
        </AuthorizeRouteView>
</Found>
<NotFound>
    <CascadingAuthenticationState>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </CascadingAuthenticationState>
</NotFound>

中的代码<NotAuthorized>永远不会被击中，我已经确认浏览器上没有cookie，甚至也在私人浏览器窗口中尝试过。

我在另一个组件中注入了 HTTPContext 来查看当前用户发生了什么。当前用户不为空，它具有身份，但显示未经身份验证，并且没有预期的声明。

我在这里缺少什么吗？

我想将一个对象记录到控制台浏览器，以便在运行时在客户端 WASM Blazor 应用程序上查看。

我可以毫无问题地记录字符串值，但我喜欢能够像使用 javascript console.log 一样记录和深入了解对象。

我在跑步;

Microsoft.AspNetCore.Blazor 3.1.0-Preview3.19555.2
Blazor.Extensions.Logging 1.1.0-preview2

各州的文件

记录器支持 MEL 提供的相同字符串格式以及消息中的命名参数替换。

此外，您还可以在浏览器控制台中记录对象。您可以展开成员和层次结构以查看其中包含的内容。

如果你想记录一个可枚举的对象列表，那么浏览器端组件将通过调用console.table来显示它。

取自BlazorExtensions/Logging

但是，例如，如果我要按如下方式运行日志；

logger.LogDebug(result);

其中 result 是 POCO 对象。它不能编译。

我将记录器注入到razor文件中

@inject ILogger<AddForm> logger

并在我的startup.cs

services.AddLogging(builder => builder
    .AddBrowserConsole() 
    .SetMinimumLevel(LogLevel.Trace)
);

终于在我的_import.razor我拥有了；

@using Microsoft.Extensions.Logging

为了完整起见，我还尝试了 JSON 序列化对象；

 logger.LogDebug("Logging Contact Object", JsonConvert.SerializeObject(contact));

但这只是将“对象”输出到控制台。

并且;

logger.LogDebug($"Logging Contact Object :{contact}:");

但这只是记录对象的名称。

谁能帮助指导我这里哪里出了问题？

我最近开始使用 Blazor，发现它是一项非常有前途的技术。

我正在制作自定义嵌套 Blazor 组件，但我似乎没有让它按照我想要的方式工作。

目标是拥有一个具有“ContentHeader”和“ContentBody”属性的“Content”组件。但是，“ContentHeader”应该是另一个具有“Title”和“ActionBar”属性的自定义组件。所需的用法如下：

<Content>
    <ContentHeader>        
        <Title>
            Title
        </Title>        
        <ActionBar>
            <button>Test button</button>
        </ActionBar>
    </ContentHeader>
    <ContentBody>
        Body
    </ContentBody>
</Content>

“内容”组成部分：

<CascadingValue Value="this">
    <div class="content-container">
        @ContentHeader(Header)
        <div class="content-body">
            @ContentBody
        </div>
    </div>
</CascadingValue>

@code {
    [Parameter]
    public RenderFragment<ContentHeader> ContentHeader { get; set; }

    [Parameter]
    public RenderFragment ContentBody { get; set; }

    public ContentHeader Header { get; set; }

    public async Task SetContentHeader(ContentHeader contentHeader)
    {
        Header = contentHeader;
        await InvokeAsync(StateHasChanged);
    }
}

“内容标题”组件：

<div class="content-header">
    <h3>@Title</h3>
    <div class="content-header-action-bar">
        @ActionBar
    </div>
</div>

@code …

好吧，如此简单明了，我似乎无法调试客户端 blazor。

我已经添加了

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

正如此处建议的Blazor WebAssembly 3.2.0 Preview 3 版本现已推出

我已经在 IIS Express 和 kestrel 上尝试过 F5。

我读到您需要启用脚本调试。我打开了它，现在当我按 F5 时，我的浏览器尝试去

file:///C:/%5CProgramData%5CMicrosoft%5CVisualStudio%5CEdgeAdapter%5C8d1196ff/landingPage.html

我可以确认我在 env.IsDevelopment 下的 server ->startup.cs 中有以下内容

app.UseWebAssemblyDebugging();

尝试 Alt+Shift+D，然后尝试 Win+R，最后在新的浏览器窗口中再次尝试 Alt+Shift+D。这似乎只对服务器端有利，无论如何服务器端都在工作。

尝试了此处的各种建议无法从 Visual Studio 2019 16.6.2 调试 Blazor 托管的 WebAssembly 3.2.0

Visaul Studio版本：16.7.2
.NetCore 3.1.401
Edge（Chromium）版本84.0.522.63

我知道在一些地方我看到人们说他们的断点被忽略了。不确定它们的含义是否与此相同，但对我来说，Visual Studio 表示在调试时永远不会命中断点并且不会加载任何符号。

更新 1：
出于好奇，我创建了一个全新的项目。
Visual Studio -> Blazor 应用程序 -> Blazor WebAssembly 应用程序
配置 HTTPS 未选中 ASP.NET Core 托管已选中

在客户端项目中IncrementCount()放置一个断点。 F5 和同样的问题。Counter.Razor

UPDATE2：
所以只是添加一些更多的信息。我安装了 Visual …