Blazor: Как динамически изменить URL?

Question

У меня есть страница, которая принимает строку bookingReference в качестве параметра маршрута Booking/{bookingReference}.

Эта страница является родительским компонентом, с дочерним компонентом, внутри которого осуществляется управление деталями бронирования. Дочерний компонент вызывает родительский компонент при обновлении данных бронирования.

@page "/Operations/Bookings/{bookingReference}"


<div class="header">
   <h1> @Booking.BookingReference </h1>
</div>

<div>
   <BookingDetails Booking="Booking" OnUpdateBooking="UpdateBooking" />
</div>


@code {

    [Parameter]
    public string BookingReference { get; set; }    

    private Booking Booking { get; set; }

    void UpdateBooking(Booking booking)
    {
        Booking = booking;
        StateHasChanged();
    }
}

Компонент BookingDetails выглядит следующим образом:

<EditForm Model="FormState" OnValidSubmit="@saveChanges">
   //inputs etc.
</EditForm>

@code {
    [Parameter]
    public Booking Booking { get; set; }

    [Parameter]
    public EventCallback<Booking> OnUpdateBooking { get; set; }

private async Task saveChanges()
{
        // update booking object
        Booking.BookingReference = FormState.BookingReference;

        try
        {
            Booking = await BookingService.UpdateBooking(Booking);
            await OnUpdateBooking.InvokeAsync(Booking);
            Toaster.Success("Booking updated successfully");
        }
        catch
        {
            Toaster.Error("Failed to update booking");
        }
    }
}

Пользователь может обновить ссылку на бронирование из дочернего компонента. и, таким образом, измените заголовок страницы - это отлично работает, все хорошо.

Однако я также хотел бы изменить URL-адрес на обновленную bookingReference - есть ли способ, которым я могу добиться этого, не форсируя Refre sh

Answer 1

Хорошо, сейчас единственный способ изменить значение BookingReference в URL-адресе - это перейти к текущему URL-адресу с новым BookingReference. Обратите внимание, что это действие не перезагружает и не обновляет компонент страницы. Это скорее действие по рендерингу. Жизненный цикл OnInitialized выполняется только один раз, что указывает на то, что компоненты не уничтожаются, а затем воссоздаются. Они только перерисованы. Это путь к go.

@code {

[Parameter]
public string BookingReference { get; set; }    

private Booking Booking { get; set; }

void UpdateBooking(Booking booking)
{
    Booking = booking;
    NavigationManager.NavigateTo($"/{Booking.BookingReference}");

}
}

Answer 2

Если под «форсированием refre sh» вы подразумеваете перезагрузку страницы, то ответ положительный. Вам не нужно перезагружать страницу, но вы должны заново визуализировать страницу, чтобы обновить sh представление (не перезагрузку, а повторную визуализацию). При перезагрузке страницы компонент страницы и встроенные компоненты создаются заново. При повторном рендеринге страницы компоненты страницы и встроенные компоненты не уничтожаются, и для отражения этого применяются только Html различия.

Вы не опубликовали код для компонента BookingDetails, поэтому мой ответ здесь только на основе предположения

<BookingDetails Booking="Booking" OnUpdateBooking="UpdateBooking" />


Your BookingDetails component should define a property named OnUpdateBooking
of type *EventCallback<Booking>* like this:



[Parameter]
public EventCallback<Booking> OnUpdateBooking {get; set;}

Он также должен определять свойство параметра с именем Booking, которое является объектом, передаваемым из родительского компонента.

// Supporting variable
private Booking booking;

[Parameter]
public Booking Booking 
{ 
  get => booking; 
set 
{
   if( booking != value)
   {
      booking = value;
      OnUpdateBooking.InvokeAsync(value);
   } 
}

Примечание: свойство Booking хранит значение, переданное из родительского компонента. Когда его значение изменяется по коду в дочернем компоненте, вы должны вызвать OnUpdateBooking «делегат», передав ему вновь обновленное значение. Это значение передается обратно в метод UpdateBooking, определенный в родительском компоненте, присваивает переданное значение частному полю Booking и затем повторно отображает родительскую страницу. Теперь вы должны увидеть изменения URL, чтобы отразить это.

Примечание. Удалите вызов метода StateHasChanged из UpdateBooking. Это не обязательно.