Как перезапустить компонент на странице Blazor

У меня есть Syncfusion SfDialog в моем коде, и мне нужно, чтобы компонент в содержимом перезапускался каждый раз, когда открывается диалоговое окно. До сих пор я пробовал это:

            <SfDialog Visible = "_dialogTripRunAutoRoute" Width = "75%" ShowCloseIcon = "true" IsModal = "true" AllowPrerender = "true">
                <DialogEvents Closed = "@CloseDialogTripRunAutoRoute"></DialogEvents>
                <DialogTemplates>
                    <Content>                   
                        @_tripRunAutoRoute
                        </Content>
                </DialogTemplates>
                <DialogPositionData X = "center" Y = "top"></DialogPositionData>
            </SfDialog>

    private async Task ToggleDialogTripRunAutoRoute(){


        _tripRunAutoRoute = new TripRunAutoRoute();
        _tripRunAutoRoute.ModelTripRun = TripOps.TripRunAutoRouteFormModel;
        await InvokeAsync(StateHasChanged);
        _dialogTripRunAutoRoute = !_dialogTripRunAutoRoute;
    }

Результат

razor dialog blazor syncfusion

10.11.2022 20:44

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Мне нужно, чтобы компонент в содержимом перезапускался каждый раз, когда открывается диалоговое окно.

Вы можете заставить Blazor перезапустить компонент, назначив компоненту ключевой атрибут. Когда вы меняете ключ, Blazor заново создает компонент в DOM, таким образом, вы можете называть его перезапущенным или перезагруженным.

<ComponentInTheContent @key = "@(componentId)">

</ComponentInTheContent>

@code {
    private Guid componentId = Guid.NewGuid();

    private async Task CalledWhenDialogIsOpened()
    {
        // stuff

        // this change of id will make Blazor re-create 
        // the component in the DOM as it sees it as a new component.
        componentId = Guid.NewGuid(); 
    }
}

11.11.2022 03:46

Предположение. @_tripRunAutoRoute — это просто старый добрый RenderFragment.

Вы не можете «перезапустить» компонент. Рендерер управляет жизненным циклом компонента, а не вы. Любая попытка сбросить его состояние внутри будет отменена при следующем отображении страницы.

Переместите параметр переключения за пределы элемента управления следующим образом:

@if (_dialogTripRunAutoRoute)
{
  SfDialog stuff 
}

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

11.11.2022 11:41

Ответ принят как подходящий

Вы можете использовать события Opened и Closed элемента управления Dialog для повторного рендеринга компонента, добавленного в содержимое Dialog. См. API и код ниже,

<div class = " col-lg-8 control-section sb-property-border" id = "target" style = "height:350px;">
<div>
    @if (this.ShowButton)
    {
        <button class = "e-btn" @onclick = "@OnBtnClick">Open</button>
    }
</div>
<SfDialog Width = "335px" IsModal = "true" @bind-Visible = "Visibility" AllowPrerender = "true" CssClass = "dialog-medium">
    <DialogTemplates>
        <Header> Software Update </Header>
        <Content>
            @if (DialogBool)
            {
                @DialogContent
                <div>@count</div>
            }
           
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content = "OK" IsPrimary = "true" OnClick = "@DlgButtonClick" />
    </DialogButtons>
    <DialogEvents OnOpen = "@DialogOpen" Closed = "@DialogClose"></DialogEvents>
    <DialogAnimationSettings Effect = "@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>

@код {

SfCheckBox<bool> CheckboxObj;
public int count { get; set; } = 0;
public bool DialogBool { get; set; } = false;
public string DialogContent { get; set; } = "";
private bool Visibility { get; set; } = true;
private bool ShowButton { get; set; } = false;
private void DialogOpen(Object args)
{
    this.ShowButton = false;
    DialogBool = true;

}
private void DialogClose(Object args)
{
    this.ShowButton = true;
    DialogBool = false;
}
private void OnBtnClick()
{
    this.Visibility = true;
    DialogContent = "content added";
    count++;
}
private void DlgButtonClick()
{
    this.Visibility = false;
}

}

Ссылка API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened

15.11.2022 05:57