标签: blazor

我正在尝试使用最新版本的 Visual Studio for Mac（v8.4.6 版本 36）创建 Blazor WebAssembly 应用程序。

我安装了 .NET Core 3.1 SDK。

我还通过运行安装了最新的 Blazor WebAssembly 3.2.0 Preview 1：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1.

输出日志显示安装成功：

Templates                                         Short Name               Language          Tags                                 
----------------------------------------------------------------------------------------------------------------------------------
Blazor Server App                                 blazorserver             [C#]              Web/Blazor                           
Blazor WebAssembly App                            blazorwasm               [C#]              Web/Blazor/WebAssembly

但是，即使在重新启动后，Blazor WebAssembly App 模板也不会显示在 Visual Studio for Mac 中：

如果我从 CLI 创建一个 Blazor WebAssembly 应用程序，如下所示，它会构建但不运行：

dotnet new blazorwasm
dotnet build
dotnet run

如果我尝试在 Visual Studio for Mac 中运行它，我会收到此错误： Cannot open assembly '/Users/my.username/projects/blazor/BlazerWasm/bin/Debug/netstandard2.1/BlazerWasm.exe': No such file …

我目前正在开发一个将 chart.js 移植到 blazor的端口。在那里，我们从 JavaScript 到 C# 进行互操作，反之亦然。Chart.js 支持自定义刻度回调或onClick,onHover和onLeave图例处理程序等回调。为了让这些回调调用 C#，我们设置了一个函数，...args该函数通过 blazor 调用 C# 方法。Blazor 然后从 C# 方法中获取结果并将其返回给 JavaScript。这样我们就可以在两者之间进行充分的沟通。

当我们需要担心返回值时（比如自定义刻度回调），我们需要确保 chart.js 获得正确的值。在（服务器端）blazor 中，您只能与 JavaScript 异步通信，因为它构建在 websockets 上。这意味着此类互操作调用的返回值始终是一个Promise对象，而 chart.js 不理解这一点。

现在我想知道我可以做什么。chart.js 有没有办法使用异步回调？

附言。我对 Javascript 没有经验。我已经问过另一个关于同步等待承诺（在同一上下文中）的问题，但这不起作用。

pps。在这个专门的 github 问题中有更多信息（但主要是在 C# 方面）。

尝试在 C# (Blazor WASM) 中创建 FirebaseDb 对象在部署到 Firebase 后会引发阻止的混合内容错误。有没有办法强制它使用HTTPS？

错误：

阻止加载混合活动内容“ http://169.254.169.254/ ” dotnet.3.2.0-preview3.20168.1.js:1:163131 ?crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100.webassembly] bla .js:1:36074 未处理的异常呈现组件：类型错误：尝试获取资源时出现网络错误。blazor.webassembly.js:1:36074 WebAssembly.JSException: TypeError: 尝试获取资源时出现网络错误。blazor.webassembly.js:1:36074 在 WebAssembly.Net.Http.HttpClient.WasmHttpMessageHandler.doFetch (System.Threading.Tasks.TaskCompletionSource1[TResult] tcs, System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) <0x257c7e0 + 0x00988> in <filename unknown>:0 blazor.webassembly.js:1:36074 at WebAssembly.Net.Http.HttpClient.WasmHttpMessageHandler.SendAsync (System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) <0x255e648 + 0x00184> in <filename unknown>:0 blazor.webassembly.js:1:36074 at System.Net.Http.HttpClient.FinishSendAsyncBuffered (System.Threading.Tasks.Task1[TResult] sendTask, System.Net.Http.HttpRequestMessage request, System.Threading.CancellationTokenSource cts, System.Boolean disposeCts) <0x256c970 + 0x00278> in :0 blazor.webassembly.js:1:36074 at Google.Apis.Auth .OAuth2.ComputeCredential.IsRunningOnComputeEngineNoCache () <0x24f5570 + 0x0018c> in :0 blazor.webassembly.js:1:36074 at Google.Apis.Auth.OAuth2.DefaultCredentialProvider.CreateDefaultCredentialAsync …

我一定遗漏了一些非常明显的 blazor ......我想简单地渲染一个包含组件的列表，但没有（明显的？）方法来引用迭代器（这是一个组件）进行渲染？

TodoList.razor

<input @bind="_newTodo" />
<button @onclick="@AddTodoItem">+</button>

@foreach (TodoItem todoItem in _todoItems)
{
    // todoItem is a razor component, yet I can't simply render it here?
    // <todoItem />
}

@code {
    private IList<TodoItem> _todoItems = new List<TodoItem>();
    private string _newTodo;

    private void AddTodoItem()
    {
        if (!string.IsNullOrWhiteSpace(_newTodo))
        {
            _todoItems.Add(new TodoItem { Title = _newTodo });
            _newTodo = string.Empty;
        }
    }
}

TodoItem.razor

<span>@Title</span>

@code {
    public string Title { get; set; }
}

在默认的 Blazor 项目中，我们获取Pages/_Host.cshtml包含应用程序 HTML 模板之类内容的文件。

最近，我创建了我的第一个 Razor 组件库 (RCL)，并且它可以工作。这是它的脚本部分：

<script src="_content/Woof.Blazor/js/woof.js"></script>
<script src="_content/Woof.Blazor/js/modal.js"></script>
<script src="_content/Woof.Blazor/js/input.js"></script>
<script src="_content/Woof.Blazor/js/datatable.js"></script>
<script src="_content/Woof.Blazor/js/autocomplete.js"></script>

这些脚本手动包含在我的应用程序中。图书馆有没有办法自动将这些文件添加到应用程序模板中？顺便说一句，如果样式表也可以自动添加，那就太好了。

编辑：我只是尝试创建一个_Scripts.cshtml文件，但没有成功。Visual Studio 显示了很多奇怪的错误，可能是由于缺少包引起的，但我不知道。使脚本部分成为局部视图？它实际上并不是 MVC 的一部分。所以可能我错了。

我想要实现的是将上面的整个脚本部分替换为一行，包括我的库中的所有预定义和预配置的脚本。

我按照 Microsoft 的官方指南使用 Azure Active Directory B2C设置ASP.NET Core Blazor WebAssembly 独立应用程序，该应用程序运行良好，登录打开一个新窗口，要求提供凭据并注销刷新页面并将我注销。我检查了代码，似乎为了进行登录或注销，您只需要在

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string Action { get; set; }
}

并基于Microsoft docs可用的路线是

+--------------------------------+----------------------------------------------------------------------------+
|             Route              |                                  Purpose                                   |
+--------------------------------+----------------------------------------------------------------------------+
| authentication/login           | Triggers a sign-in operation.                                              |
| authentication/login-callback  | Handles the result of any sign-in operation.                               |
| authentication/login-failed    | Displays error messages when the sign-in operation fails for some reason.  |
| …

我正在开发 Blazor 应用程序，并且有一个显示记录列表的组件（从实体框架实体中检索），想知道在组件上实现分页的最佳和最简单的方法是什么。

任何帮助，将不胜感激。

我创建了一个返回FileStreamResult对象的 ASP.NET Core api 控制器。（如果需要，我可以更改结果类型）

Get函数的代码如下：

[HttpGet("[action]/{p_gInspectionID}/{p_nIndex}")]
public async Task<FileStreamResult> GetInspectionPictureToDownload(Guid p_gInspectionID, int p_nIndex)
{
  var l_strFilePath = await GetPictureFilePathAsync(p_gInspectionID, p_nIndex);

  using (var l_sReader = System.IO.File.OpenRead(l_strFilePath))
  {
    return (File(l_sReader, "image/jpeg"));
  }
}

现在我需要在 Blazor (Webassembly) 客户端应用程序中使用这个结果。

我的目标是有一个按钮来在用户点击文件时在浏览器中启动文件的下载。

这应该会启动浏览器的下载功能。是否可以在 Blazor 客户端应用程序中实现这一点？

我正在尝试在我的 Web 服务器上运行默认的 Blazor WebAssembly 项目模板。项目在本地运行时，没有任何问题。将其部署到服务器后出现问题。

我可以成功导航到任何不需要身份验证的页面。但是，当我尝试输入需要登录的内容时，可以看到这样的消息：

尝试登录时出错：“网络错误”

在网络浏览器控制台中，我可以看到：

阻止加载混合活动内容“ http://[subdomain.domain.com]/.well-known/openid-configuration ”

在 Firefox 的“网络”选项卡中，请求被标记为“已阻止”。

我的网络服务器在充当反向代理的 Nginx 上运行。我计划在 Internet 和 Nginx 之间配置 HTTPS 加密。Nginx 和其他服务之间的通信旨在通过纯 HTTP 进行。这是我的 Nginx 配置：

server {
        listen 80;

        location / {
            return 301 https://$host$request_uri;
        }
    }

[...]
server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name subdomain.domain.com;

        ssl_certificate /etc/nginx_ssl/live/fullchain.pem;
        ssl_certificate_key /etc/nginx_ssl/live/privkey.pem;
        ssl_session_cache builtin:1000 shared:SSL:10m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_pass http://blazorapp:80;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header …

我正在使用NavigationManager.LocationChanged捕获查询字符串。获取查询字符串值后，我进行了 ajax 调用，这是异步的。LocationChanged 本身是同步方法，貌似没有异步版本的LocationChanged. 并且在LocationChanged内部调用async方法时，async方法设置的值落后一步。

这是重现：

@page "/investigate"
@implements IDisposable
@inject NavigationManager NM

<h1>Sync: @SyncValue</h1>
<h1>Async: @AsyncValue</h1>
<button @onclick="TriggerLocationChange">Increment</button>

@code {
    private string SyncValue;
    private string AsyncValue;
    private int Counter = 1;

    protected override void OnInitialized()
    {
        NM.LocationChanged += OnLocationChanged;
    }

    public void Dispose()
    {
        NM.LocationChanged -= OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs args)
    {
        // sync action, just for comparison
        SyncValue = (Counter * 1000).ToString();

        DoSomeAsync();
    }

    private async Task DoSomeAsync()
    {
        // http …