标签: blazor-webassembly

我在这件事上浪费了很多天，希望能得到一些指导，即使是在不同的网站上发布。

我正在使用 VS 2022 开发 Blazor Web Assembly 应用程序。大约一周前，我的调试器开始不再在客户端应用程序中的断点处停止。它确实停止在服务器应用程序上。

在这个问题开始的同时，我注意到当我启动调试会话时，它开始在 Edge 中打开一个新选项卡而不是一个新窗口；不确定这是否相关。

几点：

• MS Edge 和 Chrome 之间的行为是一致的。
• 如果我创建一个新应用程序，新应用程序会在断点处停止。
• 我在 VS 2022 上。在同一台笔记本电脑上的 VS2019 上尝试过，结果相同。

一直在寻找并找到一些可以尝试的小东西，但没有任何效果。

我想不出我对环境等做了什么改变。

希望得到某种指导。

我正在开发一个 Blazor 项目，并尝试将其中一个 JavaScript 文件移动到类库，我已阅读以下指南：

1. https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio#consume-content-from-a-referenced-rcl-1
2. https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#load-a-script-from-an-external-javascript-file-js
3. https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0#javascript-isolation-in-javascript-modules

我收到以下错误：

我不确定我缺少什么或者我需要做什么才能让它工作，所以这是我的设置：

事实：

1. 我在用着.NET 6。
2. 我正在使用 Visual Studio for Mac Version 17.0 Preview (17.0 build 8754)。
3. 解决方案的名称是LinkScreen。
4. 应用项目的名称是Client.Web。
5. 应用程序程序集的名称是LinkScreen.Client.Web。
6. 应用程序默认命名空间的名称是LinkScreen.Client.Web。
7. 该应用程序的托管模型是 Web Assembly。
8. 类库项目的名称是Client.BrowserInterop。
9. 类库程序集的名称是LinkScreen.Client.BrowserInterop。
10. 类库默认命名空间的名称是LinkScreen.Client.BrowserInterop。

项目结构及代码

1. 在类库中，我有一个screen-capture.js在以下目录下调用的脚本文件wwwroot\scripts，如下所示：

其构建操作设置为“内容”，并将复制到输出目录设置为“不复制”。

2. 类库像这样引用应用程序：

3. 我有一个名为的 C# 类ScreenCapture，它包装了 JavaScript 模块，screen-capture.js并返回引用，如下所示：

public static async ValueTask<ScreenCapture> CreateAsync(
        IJSRuntime jsRuntime,
        ElementReference videoTagReference)
    {
        var jsModuleRef …

所以我一直在 Net7 预览版中工作，并一直在尝试部署一个具有身份和身份验证功能的 WASM 项目，该项目在本地运行良好。当我部署网站 500 秒并深入研究一些日志时，我得到：

2022-11-07T13:42:28.854805951Z fail: Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler[3]
2022-11-07T13:42:28.854856853Z       Exception occurred while processing message.
2022-11-07T13:42:28.854865053Z       System.NullReferenceException: Object reference not set to an instance of an object.
2022-11-07T13:42:28.856255318Z          at Microsoft.AspNetCore.ApiAuthorization.IdentityServer.IdentityServerJwtBearerOptionsConfiguration.ResolveAuthorityAndKeysAsync(MessageReceivedContext messageReceivedContext)
2022-11-07T13:42:28.856286120Z          at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync()

在我的 Program.cs 中我有

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

builder.Services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddEntityFrameworkStores<ApplicationDbContext>();

builder.Services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

builder.Services.AddAuthentication()
    .AddIdentityServerJwt()
    .AddJwtBearer()
    .AddGoogle(googleOptions =>
    {
        googleOptions.ClientId = builder.Configuration["Authentication:Google:ClientId"];
        googleOptions.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
    });

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddHttpContextAccessor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{ …

我从 Blazor 静态 Web 应用程序调用“/.auth/login/google”（或其他提供商）。一旦用户同意，控制权将被路由回索引页面。有没有办法指定我想要不同的返回页面，例如通过“/.auth/login/google?callback=http...”之类的内容？

如何在 Blazor 页面上清晰地显示 JSON 格式？

parsedResult目前我在文本区域中显示 JSON ( )：

<div class="col-lg-12 noSidePadding" id="parser" data-bind="visible: ParserVisible">
    <h3>Parser</h3>
    <div>
        <EditForm Model=@TLogMessageRequestDto>
            <div class="form-group">
                <label for="lblMessage">Message:</label>
                <textarea class="form-control textAreaSize" id="source" @bind="inputMessage" rows="5"></textarea>
                <input type="submit" id="upload" class="btn btn-primary" @onclick="OnParseClicked" value="Parse"/>
            </div>
        </EditForm>
    </div>
    <br />
    <div>
        <label for="results">Results:</label><br />
        <textarea id="results" @bind="parsedResult"></textarea>
    </div>
</div>

输出：

我有一个令人兴奋的 NavMenu 组件

<MudPaper Class="py-3" Elevation="0">
  <MudNavMenu>
   <MudNavLink Href="/" Match="NavLinkMatch.All">Home</MudNavLink>
   <MudNavLink Href="/posts" Match="NavLinkMatch.All">Articles</MudNavLink>
   <MudNavLink Href="/about" Match="NavLinkMatch.All">About</MudNavLink>
   </MudNavMenu>
  </MudPaper>
<MudSwitch @ref="@darkModeSwitch" *@ ... @* />

那是在 a 里面MudDrawer。我真正想要的是将所有 NavLink 放在顶部，将开关放在底部，但我尝试过的所有操作似乎都没有效果。看起来该MudDrawer组件是在列表中一个接一个的事物上设置的。我缺少什么？或者有什么快速解决办法吗？

大多数情况下，我尝试在开关周围放置一个容器并为其提供顶部边距，并使用对齐和调​​整弹性类。