问题[blazor-server-side](coding)

我正在使用 BlazorGoogleMaps NuGet 包。你可以在GitHub上查看源代码

我希望能够在执行期间将 MapType 更改为 Satellite 和 RoadMap。

以下代码没有影响。

_mapOptions.MapTypeId = MapTypeId.Satellite;
_map1.Options = _mapOptions;
//give the UI Access
await InvokeAsync(StateHasChanged);

我将此代码包含在 MapRoutes.razor.cs => AddDirections() 方法中。

谢谢

private async Task AddDirections()
{
    _durationTotalString = null;
    _distanceTotalString = null;
    if (await _dirRend.GetMap() is null)
    {
        await _dirRend.SetMap(_map1!.InteropObject);
    }

    _mapOptions.MapTypeId = MapTypeId.Satellite;
    _map1.Options = _mapOptions;
    //give the UI Access
    await InvokeAsync(StateHasChanged);

    //Adding a waypoint
    var waypoints = new List<DirectionsWaypoint>();
    waypoints.Add(new DirectionsWaypoint() { Location = "Bethlehem, PA", Stopover = true });

    //Direction Request
    var dr = new DirectionsRequest();
    dr.Origin = "Allentown, PA";
    dr.Destination = "Bronx, NY";
    dr.Waypoints = waypoints;
    dr.TravelMode = TravelMode.Driving;
    dr.DrivingOptions = new DrivingOptions()
    {
        DepartureTime = DateTime.Now.AddHours(1)
    };

    //Calculate Route
    _directionsResult = await _dirRend.Route(dr, new DirectionsRequestOptions
    {
        StripLegsStepsLatLngs = false,
        StripOverviewPath = false,
        StripOverviewPolyline = false,
        StripLegsStepsPath = false,
        StripLegsSteps = false
    });

    if (_directionsResult is null)
    {
        return;
    }
    var routes = _directionsResult.Routes.SelectMany(x => x.Legs).ToList();

    foreach (var route in routes)
    {
        _durationTotalString += route.DurationInTraffic?.Text;
        _distanceTotalString += route.Distance.Text;
    }
}

我正在尝试定义一个充当引导警报包装器的组件。

BootstrapAlert.razor

<div class="alert alert-@AlertType d-@(string.IsNullOrEmpty(Message) ? "none" : "block")" role="alert">
    @Message
</div>

@code {
    [ParameterAttribute]
    private string AlertType { get; set; } = "info"; // Default alert type
    [ParameterAttribute]
    private string? Message { get; set; }

    // Method to update the alert type and message
    public async Task ShowAsync(string alertType, string message)
    {
        AlertType = alertType;
        Message = message;
        await InvokeAsync(StateHasChanged);
    }

    // Method to hide the alert
    public async Task HideAsync()
    {
        Message = null;
        await InvokeAsync(StateHasChanged);
    }

     protected override async Task OnParametersSetAsync()
    {
        //Message is ALWAYS null here
        await base.OnParametersSetAsync();
    }

}

页：

<form class="row" @onsubmit="SubmitForm" @onsubmit:preventDefault>
  <Alert @ref=SaveAlert></Alert>
  <button type="submit">Save</button>        
</form>

@code {
    private Alert? SaveAlert;

private async Task SubmitForm()
{
    try
    {
        await SetIsLoading(true); //DISPLAYS A LOADING SPINNER

        if (SaveAlert != null) await SaveAlert.HideAsync();

        //.......

        if (SaveAlert != null) await SaveAlert.ShowAsync("success", "OK");
    }
    catch (Exception ex)
    {
        if (SaveAlert != null) await SaveAlert.ShowAsync("danger", ex.Message);
    }
    finally
    {
        await SetIsLoading(false);
    }

    StateHasChanged();
}

}

警报组件从未更新，在“OnParametersSetAsync”中“Message”参数始终为空。

我尝试过非异步版本的方法，到处都放“StateHasChanged”，不调用“Hide”方法，还删除了[ParameterAttribute]属性，因此它被用作常规变量，但对我来说似乎没有什么用

我对 Blazor 还不太熟悉，所以不知道还有什么相关内容。我使用的应用程序为 RenderMode="Server"

我做错了什么？

我有一个组件，它会在切换到其他页面时弹出一个对话框，询问您是否确定要放弃更改。我将其放在每个页面上，如下所示：

<ConfirmNavigation HasUnsavedChanges="@HasUnsavedChanges" />

此组件包括：

[Parameter]
public bool HasUnsavedChanges { get; set; }

private async Task OnBeforeInternalNavigation(LocationChangingContext context)
{
    if (!HasUnsavedChanges)
        return;

我的问题是，在父页面中，处理提交点击，我有：

HasUnsavedChanges = false;
await Task.Delay(1);
Navigation.NavigateTo(gotoUrl);

这不起作用。该方法在执行完这两行代码后返回，并且ConfirmNavigation仍然认为HasUnsavedChanges是 true。

有没有办法让 的改变值变成HasUnsavedChanges？ConfirmNavigation我最好的选择是添加一个方法来ConfirmNavigation设置值吗？我不喜欢这样做，因为它绕开了 ，这HasUnsavedChanges="@HasUnsavedChanges"违反了组件应该如何交互。

我将 Blazorise 与服务器端 Blazor 应用程序一起使用。当我尝试将 Blazorise 输入组件包装在自定义组件中时，验证消息停止工作。

我的意思是，当我单击“提交”时，我在具有无效值的字段下没有看到任何错误消息。如果我不包装 Blazorise 输入并单击“提交”，我会看到错误消息。

这是一个例子。该表单包含相同字段两次。一个包裹在我的自定义组件内TextField，另一个打开。

    <Form>
        <Validations @ref="@fluentValidations" Mode="ValidationMode.Manual" Model="AccountDto" HandlerType="typeof(FluentValidationHandler)">
            <TextField Label="Name" @bind-Text="@Account.Name" />
            <Validation>
                <Field>
                    <FieldLabel For="account-name-input">Name</FieldLabel>
                    <TextEdit ElementId="account-name-input" @bind-Text="@Account.Name">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Field>
            </Validation>
        </Validations>
        <Field>
            <Button Type="ButtonType.Submit"
                PreventDefaultOnSubmit
                Clicked="Submit">
                Submit
            </Button>
        </Field>
    </Form>

后面的代码包含以下表单内容（我遗漏了很多废话）：

    private Validations fluentValidations = null!;

    private async Task Submit()
    {
        if (await fluentValidations.ValidateAll())
            await CreateAccount(Account);
    }

自定义组件看起来像。（文件背后的代码不包含任何有趣的内容）：

    <Validation>
        <Field>
            <FieldLabel For="@GetInputId()">
                @Label
            </FieldLabel>
            <TextEdit ElementId="@GetInputId()"
                      Text="@Text"
                      TextChanged="TextChanged"
                      Disabled="@Disabled">
                <Feedback>
                    <ValidationError />
                </Feedback>
            </TextEdit>
        </Field>
    </Validation>

我知道验证工作正常，因为错误确实出现在展开的组件中，但不会出现在我的组件中。

我正在尝试创建一个简单的搜索输入控件，具有基于计时器的去抖功能。

Search.razor:

<input type="search" placeholder="Search" @oninput=@((e) => SearchChanged(e)) />

@code {
    
  [Parameter]
  public EventCallback<string> OnSearchChanged { get; set; }

  private System.Timers.Timer? _debounceTimer;

  string Text = string.Empty;

  public void SearchChanged(ChangeEventArgs e)
  {
     Text = e.Value == null ? string.Empty : e.Value.ToString()!;
     // Debounce search
     _debounceTimer?.Stop();
     _debounceTimer?.Dispose();
     _debounceTimer = new System.Timers.Timer(200);
     _debounceTimer.Elapsed += DebounceTimerElapsed;
     _debounceTimer.Enabled = true;
     _debounceTimer.Start();
  }

  private void DebounceTimerElapsed(object? sender, EventArgs e)
  {
    _debounceTimer?.Dispose();
    OnSearchChanged.InvokeAsync(Text);    // <<< Dispatcher exception
  }
}

我认为在这个组件中包含去抖动功能是有意义的，这样我就不必在每个父级上重复它。但我似乎无法使用 EventCallback 让父组件知道计时器已过。它抛出了臭名昭著的The current thread is not associated with the Dispatcher异常。

Blazor University 上的此页面解释了非 UI 事件（例如Timer.Elapsed在另一个线程上生成）。计时器确实是罪魁祸首，因为显然如果我OnSearchChanged.InvokeAsync()直接从SearchChanged. 但InvokeAsync()在这种情况下似乎没有同步回 UI 线程。但我认为应该有一种简单的方法来完成这项工作。

有没有一种（简单）方法让父组件知道子组件中的计时器已过？

目前我有这个：

 @foreach (var rol in Rollenlist)
 {
    <InputCheckbox class="form-check" @[email protected] @onclick="(() => RolSelected(rol.Id.Value))" />
 }

和

void RolSelected(int id) 
{
  ...
}

我想使用 MudCheckbox：

<MudCheckBox @bind-Checked="@rol.IsSelected" Label="@rol.Name" LabelPosition="LabelPosition.Start" Color="Color.Primary"
                               Size="MudBlazor.Size.Large" CheckedChanged="RolSelected(rol.Id.Value)"></MudCheckBox>

但它不起作用。

RZ1OO1O: The component parameter 'CheckedChanged' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'CheckedChanged' is
generated by the '@bind-Checked' directive attribute.

CS1503: Argument 2: cannot convert from 'void' to 'Microsoft.AspNetCore.Components.EventCallback

我怎样才能解决这个问题？