标签: blazor-webassembly

我使用 .NET 5.0 RC1 Framework 创建了一个托管在 .NET Core 应用程序中的简单 Blazor Web 程序集项目，并在 Visual Studio 2019 预览版的向导期间添加了授权。它在调试中完美运行，但如果我发布它并尝试连接到服务器，我会收到 500 错误。检查日志错误是：

Microsoft.AspNetCore.Server.Kestrel[13]
      Connection id "0HM37MQFV38CV", Request id "0HM37MQFV38CV:00000003": An unhandled exception was thrown by the application.
      System.NullReferenceException: Object reference not set to an instance of an object.
         at Microsoft.Extensions.DependencyInjection.IdentityServerBuilderConfigurationExtensions.<>c.<AddSigningCredentials>b__10_2(IServiceProvider sp)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitFactory(FactoryCallSite factoryCallSite, RuntimeResolverContext context)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitCache(ServiceCallSite callSite, RuntimeResolverContext context, ServiceProviderEngineScope serviceProviderEngine, RuntimeResolverLock lockType)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitRootCache(ServiceCallSite singletonCallSite, RuntimeResolverContext context)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitIEnumerable(IEnumerableCallSite enumerableCallSite, RuntimeResolverContext context)
         at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitNoCache(ServiceCallSite callSite, TArgument …

我正在尝试将 MediatR 连接到客户端 Blazor 应用程序中，纯粹是为了处理组件之间的事件通知。

该事件已发布，并且由具有处理程序的单独组件拾取，但我无法从处理程序更新 UI。

我相信原因是 MediatR 调用的处理程序与 UI 组件使用的处理程序不是同一实例。如果这有道理吗？

有人在 Blazor 中使用过 MediatR 通知吗？

发布组件：

@inject MediatR.IMediator _mediator

<h3>Sender</h3>

<button @onclick="SendNotification">Send notification</button>

@code {

    private void SendNotification()
    {
        _mediator.Publish(new MyNotification { Message = "Hello World!" });
    }

}

订阅组件：

@using MediatR;
@implements INotificationHandler<MyNotification>;

<h3>Receiver</h3>

<p>Message: @Message</p>

@code {

    private string Message { get; set; } = "[No message]";

    public Task Handle(MyNotification notification, System.Threading.CancellationToken cancellationToken)
    {
        Message = notification.Message; // <-- THIS DOES NOT UPDATE THE UI

        return …

我正在使用 Blazor WebAssembly RC2。我目前正在创建一个基本组件，它只是一个表单。我遇到了一些我无法解决的奇怪错误。它没有编译。

它说我的作业有问题，但我看不到任何拼写错误或语法错误。

编译错误：

/.../net5.0/Razor/Components/Dashboard/ThesisRegistrationEditForm.razor.g.cs(314,388): error CS0131: The left-hand side of an assignment must be a variable, property or indexer [.../Client/VerwaltungAbschlussarbeiten.Client.csproj]\n/.../Client/obj/Debug/net5.0/Razor/Components/Dashboard/ThesisRegistrationEditForm.razor.g.cs(336,388): error CS0131: The left-hand side of an assignment must be a variable, property or indexer [.../Client/VerwaltungAbschlussarbeiten.Client.csproj]\n/.../Client/obj/Debug/net5.0/Razor/Components/Dashboard/ThesisRegistrationEditForm.razor.g.cs(359,388): error CS0131: The left-hand side of an assignment must be a variable, property or indexer [.../Client/VerwaltungAbschlussarbeiten.Client.csproj]\n/.../Client/obj/Debug/net5.0/Razor/Components/Dashboard/ThesisRegistrationEditForm.razor.g.cs(418,199): error CS0131: The left-hand side of an assignment must be a variable, property or indexer [/.../Client/VerwaltungAbschlussarbeiten.Client.csproj]\n/.../Client/obj/Debug/net5.0/Razor/Components/Dashboard/ThesisRegistrationEditForm.razor.g.cs(475,200): error CS0131: The left-hand side of …

我正在创建一个新的客户端 Blazor PWA，并在安装一些 NUGET 包后收到以下错误消息：

看起来这是一个已知问题，但我很困惑为什么它还没有得到解决，因为几个月前就有报道称：https ://youtrack.jetbrains.com/issue/RIDER-46561

他们是我同时可以采取的解决方法吗？

以下是我安装的 NUGET 软件包/版本（如果有影响的话）：

是否可以将现有的 C# 代码编译为 WebAssembly (.wasm)，以便无需或几乎无需更改代码？
我必须为此使用 Blazor 还是其他可能性？

在我们的 Blazor WebAssembly 应用程序中，我们有一个ParentComponent嵌套多个ChildComponents. 有3个文件：

1. Test.razor是客户端，使用 ParentComponent 和 ClientComponent。
2. ParentComponent.razor嵌套多个 ChildComponent。
3. ChildComponent.razor是 ParentComponent 的子组件。

文件：测试.razor

<ParentComponent DataSource="@AccountList">
    <ChildComponent TData="Account"><span>@context.FirstName</span></ChildComponent>
    <ChildComponent TData="Account"><i>@context.LastName</i></ChildComponent>
    <ChildComponent TData="Account"><b>@context.Age</b></ChildComponent>
</ParentComponent>

@code {

    // The datasource:
    private List<Account> AccountList = new List<Account>() {
        new Account() { FirstName = "Sam", LastName = "Soldier", Age = 33},
        new Account() { FirstName = "Lisa", LastName = "Johnson", Age = 25},
        new Account() { FirstName = "Jonas", LastName = "Peer", Age = 50 } …

在 Blazor 中，我想将maxlength属性添加到input类似的

<textarea type="text" name="TheNameOfMyField" 
          class="TheNameOfMyClass" value="" rows="2" maxlength="255">
</textarea>

Blazor 中的组件是这样的

<InputTextArea @bind-Value="_model.ShortDescription" 
               class="form-control" id="gapShortDescription" />

并且没有 maxlength 或自定义 HTML 属性的选项。

我怎样才能做到这一点？

我正在做.net 5 blazor wasm项目。我最近更新了Visual Studio 2019版本16.10.0。突然间，我的浏览器（Google Chrome）开始收到一条错误消息，console如下所示：

拒绝加载脚本“https://localhost:44340/_framework/aspnetcore-browser-refresh.js”，因为它违反了以下内容安全策略指令：“script-src 'sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI='”。请注意，“script-src-elem”未明确设置，因此“script-src”用作后备。

我没有_framework/aspnetcore-browser-refresh.js添加到我的index.html添加。这是我的脚本和样式声明index.html

styles内部声明<head>于index.html：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>App</title>
    <base href="/" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Web.styles.css" rel="stylesheet">
    <link href="_content/BlazorDateRangePicker/daterangepicker.min.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

scripts在index.html：

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/Chart.js"></script>
<script src="js/print.js"></script>
<script src="js/pdf.js"></script>
<script …

在 Visual Studio 2022 中创建新的 Blazor WebAssembly 应用程序时，有一个“ASP.NET Core 托管”选项（带有无用的工具提示）。

如果您勾选此项而不是解决方案中的 1 个 WASM 项目，则有 3 个，客户端（WASM）、共享和服务器。

尽管 Blazor Server 应用程序是启动项目，但它没有页面。当您运行它时，它会调用 WASM Blazor 客户端应用程序。

我找不到这样做的目的是什么的解释？如果我将 WASM 应用程序部署到 IIS 服务器，它无需服务器应用程序即可正常运行。

请注意，我并不是在问 Blazor 服务器（在服务器上运行的服务器端代码，将 HTML 发送到客户端）和 Blazor 客户端 WASM（编译到在浏览器中运行的 WebAssembly 的 C# 代码）之间的区别。我知道这个。

我问的是，如果您打算创建 WASM 应用程序，为什么需要在具有 Blazor WASM 应用程序的解决方案中使用 Blazor 服务器应用程序。

我找不到这个问题的直接答案。要么这篇文章没有回答这个问题，要么我遗漏了一些东西： ASP.NET Core 托管和服务器端 Blazor 之间到底有什么区别？

我找不到其他东西了。

那么 Blazor Server 应用程序的目的是什么，为什么它首先运行然后调用 WASM 应用程序。另外，您将如何主持？

谢谢。

更新

我知道 WASM 应用程序只是客户端，您需要连接一个 Web API 项目才能从 Web 服务器提取数据。

这个“.net Core Hosted”模板是否做了一些我自己无法通过使用 WASM 项目创建解决方案来完成的事情 - 然后添加一个 Web …

我已经下载了 Microsoft Blazor 官方文档附带的示例

https://github.com/dotnet/blazor-samples

然后在 VS Code 中打开文件夹

..\blazor-samples-main\6.0\BlazorSample_WebAssembly

我让 VS Code 在子文件夹 .vscode launch.json task.json 中添加资产

我已将 launch.json 修改为

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch and Debug Standalone Blazor WebAssembly App",
        "type": "blazorwasm",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "url": "https://localhost:5001"
    }
]}

我已将 Properties 文件夹中的 launchSettings.json 修改为

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:57953",
      "sslPort": 44307
    }
  },
  "profiles": {
    "blazorwasm": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": …