标签: blazor-webassembly

如何在 Blazor SPA 上嵌入 Leaflet 地图、使用 JSInterop、应定义哪些对象以及如何将表示在地图上单击的位置的数据从 JavaScript 传递到 Blazor

我有一个 API (asp net core 3.1) 和一个 Web 应用程序 (asp net Blazor WebAssembly)。在我的 API 中，我有一个 CustomerController，其 POST 方法如下：

    [HttpPost]
    public async
        Task<ActionResult>
        CreateOrderAsync(OrderDto orderDto)
    {
        orderDto.IdOrder =
            await repository
            .CreateOrderAsync(mapper.Map<Order>(orderDto));
        return CreatedAtRoute(nameof(GetOrderByIdAsync),
            new { idOrder = orderDto.IdOrder }, orderDto);
    }

在我的 Web 应用程序中，我有 DataServiceHelper 类，我在 Web 应用程序的实际数据服务中使用它。这里我有POST和GET等方法：

  ...
  static public async Task PostAsync(HttpClient httpClient, string endpoint, T item)
  {
     await httpClient.PostAsJsonAsync(endpoint, item);
  }
  static public async Task<T> FindOneByIdAsync(HttpClient httpClient, string endpoint)
  {
      return await JsonSerializer.DeserializeAsync<T>
         (await httpClient.GetStreamAsync(endpoint), new JsonSerializerOptions()
         { …

在 Blazor 中，我设置了两个 HttpClient。一份用于我的 API，一份用于 MS Graph API。Graph API 是新的，它迫使我找到一种将命名的 httpclient 注入到我的服务中的方法。

这是Main中的所有代码

public class Program
{
    public static async Task Main(string[] args)
    {
        var b = WebAssemblyHostBuilder.CreateDefault(args);
        b.RootComponents.Add<App>("app");

        var samsonApiUrl = new Uri(b.HostEnvironment.BaseAddress + "api/");

        b.Services.AddHttpClient("SamsonApi",client => 
        {
           client.BaseAddress = samsonApiUrl;
           // add jwt token to header
           // add user agent to header
        }).AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
        
        b.Services.AddTransient<GraphCustomAuthorizationMessageHandler>();
        b.Services.AddHttpClient<GraphHttpClientService>("GraphAPI",
                client => client.BaseAddress = new Uri("https://graph.microsoft.com/"))
            .AddHttpMessageHandler<GraphCustomAuthorizationMessageHandler>();
        
        b.Services.AddScoped(provider => provider.GetService<IHttpClientFactory>().CreateClient("SamsonApi"));
        b.Services.AddScoped(provider => provider.GetService<IHttpClientFactory>().CreateClient("GraphAPI"));
        
        b.Services.AddMsalAuthentication<RemoteAuthenticationState, CustomUserAccount>(options =>
        {
            b.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
            options.ProviderOptions.DefaultAccessTokenScopes.Add("1c8d4e31-97dd-4a54-8c2b-0d81e4356bf9/API.Access");
            options.UserOptions.RoleClaim = "role"; …

我正在开发一个 Web 应用程序 - 托管在 ASP.NET 上的 Blazor WebAssembly。我正在尝试开始从数据库获取价值（使用实体框架）。我在我的解决方案中使用存储库和工作单元模式。所以，我遇到了这个错误：

An unhandled exception has occurred while executing the request.
      System.InvalidOperationException: Unable to resolve service for type 'ReportApp.Core.Services.TaskService' while attempting to activate 'ReportApp.Server.Controllers.TaskController'.
         at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.GetService(IServiceProvider sp, Type type, Type requiredBy, Boolean isDefaultParameterRequired)
         at lambda_method8(Closure , IServiceProvider , Object[] )
         at Microsoft.AspNetCore.Mvc.Controllers.ControllerActivatorProvider.<>c__DisplayClass4_0.<CreateActivator>b__0(ControllerContext controllerContext)
         at Microsoft.AspNetCore.Mvc.Controllers.ControllerFactoryProvider.<>c__DisplayClass5_0.<CreateControllerFactory>g__CreateController|0(ControllerContext controllerContext)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, …

我有一个使用 Auth0 OIDC 身份验证的 Blazor .Net5 WebAssembly。我按照以下说明设置身份验证：https://auth0.com/blog/securing-blazor-web assembly-apps/

按照这些说明，我能够在本地开发我的应用程序并使其与 Auth0 身份验证一起使用。但是，当我使用 Azure 静态 Web 应用部署应用程序时，身份验证不再起作用。查看 Chrome 的开发人员工具，我可以看到它成功 (302) 调用我的授权端点：

https://login.mysite.com/authorize?clientid=*****...  (302)

下一个 url 是对我的网站的回调，该回调失败并出现 404：

https://myapp.mysite.com/authentication/login-callback?code=***... (404)

我的index.html 中有以下内容：

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

知道我能做些什么来解决这个问题吗？

我已经构建了一个 Web Assembly blazor 项目。

在其 blazor 组件之一中，有一个用于提交新数据的表单。

这种形式，通过 Web api 将数据 POST 到服务器以保存在数据库中。

<EditForm Model="@person">
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Id : </label>
        <InputNumber class="form-control col-3" @bind-Value="person.Id" placeholder="id" />
    </div>
    <br />
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Name : </label>
        <InputText class="form-control col-3" @bind-Value="person.Name" placeholder="name" />
    </div>

     <input type="submit" class="form-control  btn btn-primary text-center" @onclick="@AddPerson" value="Add" />
</EditForm>

背后的 C# 代码@AddPerson是这样的：

@code 
{

    public List<Person> people;
    public Person person = new Person();

    private async void AddPerson()
    {
        HttpResponseMessage …

例如，如果我有一个底层数据类型为 int 的 InputNumber，我想显示一条消息，指出不允许大于 int.MaxValue 的数字。目前，如果我要尝试任何大于整数最大值的数字，我会收到一条默认消息：“该字段必须是数字”。该消息显然不正确，我想更改它。有没有办法在 Blazor 中做到这一点？

我是 Blazor 新手。

我在 .NET 5 中的 Blazor Webassemble 项目中创建了一个轮播。它不会自动滑动，并且其上一个和下一个按钮不起作用。

请建议如何在没有javascript的情况下解决这个问题。

下面是我的代码。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="/images/slide/slide-1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span> …

我正在使用 Blazor Web 程序集项目的基本模板。我试图了解两种不同的方法似乎达到了相同的结果。

在我的第一次尝试中，我创建了一个方法，将新的 WeatherForecast 模型发布到我的 Web api 端点，然后从响应中将新创建的 WeatherForecast 添加到列表中。这是第一种方法：

private async void ValidSubmitHandler()
{
    var response = await Http.PostAsJsonAsync<WeatherForecast>(Configuration["APIBaseUrl"] + "/WeatherForecast", newForecast);

    var forecast = await response.Content.ReadFromJsonAsync<WeatherForecast>();
    forecasts.Add(forecast);
}

我期望 UI 能够使用新添加的预测进行更新，但尽管预测列表添加了新对象，但页面并未更新。我设置了一个断点，并观察到新的预测确实已添加到列表中，但只是 UI 没有呈现对列表状态的更改。

我听说你可以打电话

StateHasChanged() 

启动更改以呈现列表的新预测，目前还不错。在阅读了一些有关 StateHasChanged 的​​内容后，我似乎不应该经常使用它，而且它会显示出不良做法的迹象，因此我尝试了一位同事的建议，他说我需要将 Task 添加为返回类型而不是 void 到函数如下：

private async Task ValidSubmitHandler()
{
    var response = await Http.PostAsJsonAsync<WeatherForecast>(Configuration["APIBaseUrl"] + "/WeatherForecast", newForecast);

    var forecast = await response.Content.ReadFromJsonAsync<WeatherForecast>();
    forecasts.Add(forecast);
}

这确实允许 UI 接收更新，我只能假设 ValidSubmitHandler() 在新预测添加到列表之前退出。

如果我的方法没有等待异步操作的结果，有谁能解释为什么 StateHasChanged 似乎可以工作？

谢谢

我正在开发一个 Blazor Wasm（ASP.Net Core 托管，由通常的 3 个项目客户端、服务器和共享项目组成）应用程序，我想使用 docker 将其部署到 Linux。我正在将 nginx.conf 文件复制到服务器项目根文件夹，但在尝试发布到 Azure 应用服务容器时，我得到：

无法计算缓存键：“/nginx.conf”未找到：未找到

这是我的 Dockerfile：

FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
WORKDIR /src
COPY ["MyLocalShop/Server/MyLocalShop.Server.csproj", "MyLocalShop/Server/"]
COPY ["MyLocalShop.Services.MongoDb/MyLocalShop.Services.MongoDb.csproj", "MyLocalShop.Services.MongoDb/"]
COPY ["MyLocalShop.Server.Contracts/MyLocalShop.Server.Contracts.csproj", "MyLocalShop.Server.Contracts/"]
COPY ["MyLocalShop/Shared/MyLocalShop.Shared.csproj", "MyLocalShop/Shared/"]
COPY ["MyLocalShop/Client/MyLocalShop.Client.csproj", "MyLocalShop/Client/"]
RUN dotnet restore "MyLocalShop/Server/MyLocalShop.Server.csproj"
COPY . .
WORKDIR "/src/MyLocalShop/Server"
RUN dotnet build "MyLocalShop.Server.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "MyLocalShop.Server.csproj" -c Release -o /app/publish

FROM nginx:alpine AS …