Опубликовать список данных из компонента в новый компонент и отобразить новый компонент в Blazor

Question

Проблема

Пользователь выбирает список элементов из ComponentA, а затем просматривает список выбранных элементов. Пользователь перенаправляется на ComponentB, где пользователь находит список выбранных элементов.

В MVC

Это просто, потому что мы можем просто опубликовать список данных из View в метод Post из Controller, и из этого контроллера мы можем отобразить требуемый новый вид.

How can we accomplish the same in the Blazor Server?

Пожалуйста, дайте мне знать, если необходимо добавить больше деталей.

Answer 1

Это можно сделать различными способами в зависимости от того, являются ли ComponentA и ComponentB одновременно маршрутизируемыми компонентами.

Если ComponentB является дочерним компонентом ComponentA; то есть ComponentB, который не маршрутизируется, встроен в ComponentA, вы можете передавать значения из ComponentA в ComponentB в качестве параметров компонента ... Следующий фрагмент кода создает родительский компонент и дочерний компонент и демонстрирует, как передавать значения из родительский компонент к дочернему компоненту:

Parent.razor

@page "/parent"

<Child Age="age" Country="country" /> 

@code
{
 private int age = 21;
 private string country = "Thailand";
} 

Child.razor

@ No @page directive here as the child component is not routable @
<p>Country: @Country</p>

@code
{
 [Parameter]
 Public int Age {get; set;} 

 [Parameter]
 Public string Country {get; set;} 
} 

Как видите, мы передаем значения возраста и страны из родительский компонент к его дочернему компоненту. В реальном коде вы можете передавать коллекции объектов, выполнять различные манипуляции и т. Д. c. Выше приведено общее представление о том, как родитель может общаться со своим ребенком и передавать ему значения. Обратный путь, то есть передача значений от дочернего компонента к его родительскому элементу, осуществляется через делегаты событий.

Когда оба компонента являются страницами компонентов; то есть оба являются маршрутизируемыми, для передачи значений из одного компонента в другой обычно требуется объект-посредник.

Предположим, вы хотите перенаправить своего пользователя с текущей страницы, скажем, ComponentA, где он заполнил форму с большим количеством элементов данных, в ComponentB, который получает данные, обрабатывает их и т. д. c. Вот код, как перейти от ComponentA к Navigate to ComponentB:

<button type="button" @onclick="ShowList">Show list of women</button>

@code
{
   private void ShowList()
  {
      NavigateManager.NavigateTo("/ComponentB");
  }
}

Как видите, приведенный выше код перенаправляет пользователя с одной страницы на другую, но как передать данные? Чтобы достичь этого, вы должны определить класс обслуживания, который можно внедрить в оба компонента, чтобы выполнить передачу данных от одного к другому. следующая ссылка относится к моему ответу, где я подробно говорю об этом механизме.

Надеюсь, это поможет ...

Answer 2

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

Контейнер

<div>

    <ComponentA @ref="_componentA" ListItems="ListA"/>

    <ComponentB @ref="_componentb" ListItems="ListB"/>

</div>

@code {

    Public List<T> ListA { get; set; }
    Public List<T> ListB => ListA.Where(x => x.IsSelected).ToList();

    ComponentA _componentA;
    ComponentB _componentB;
}

Теперь ваши списки отделены от деталей рендеринга, а ListB просто выводится из ListA и дает вам список, отфильтрованный по логическим значениям нужно будет настроить. В целях сохранения проблем в нужных местах все функции списка (списков) также должны находиться в компоненте контейнера. У вас также есть ссылки на 2 компонента, настроенных так, что вы можете использовать их методы publi c извне.

Чтобы получить доступ к компонентам, установите для них свойство IsVisible, начальное значение, методы для отображения и скрытия и свойство EventCallBack, чтобы вызывающий код мог устанавливать методы. Вам также понадобится элемент управления (кнопка?) Для обратного вызова.

Компонент A

<div style="display: @(IsVisible ? "flex" : "none")">

    @foreach (var item in Items)
    {
       //Do something awesome
    }

    <button @onclick="@(() => ToggleToB.InvokeAsync())">Toggle to Component B</button> 

</div>

@code {

    [Parameter]
    public List<T> Items { get; set; }

    [Parameter]
    public EventCallBack ToggleToB { get; set; }

    private bool IsVisible { get; set } = true

    public void Show()
    {
        IsVisible = true;
    }

    public void Hide()
    {
        IsVisible = false;
    }

... other component details
}

Компонент B будет иметь ту же настройку, но начальное значение IsVisible будет false, так как вы не хотите видеть это изначально.

Теперь вы можете настроить методы из Container, которые воздействуют на методы компонента, поэтому ваш контейнер будет выглядеть ниже. Обратите внимание на методы обратного вызова в тегах <Component>:

Контейнер обновлено

<div>

    <ComponentA @ref="_componentA" ListItems="ListA" ToggleToB="@ShowComponentB"/>

    <ComponentB @ref="_componentb" ListItems="ListB" ToggleToA="@ShowComponentA"/>

</div>

@code {

    Public List<T> ListA { get; set; }
    Public List<T> ListB => ListA.Where(x => x.IsSelected).ToList();

    public ComponentA _componentA;
    ComponentB _componentB;

    public void ShowComponentA()
    {
        _componentA.Show();
        _componentB.Hide();
    }

    public void ShowComponentB()
    {
        _componentB.Show();
        _componentA.Hide();
    }

    public void ListBConfirmed()
    {
        // Do whatever you do once you go through Component B
        ShowComponentA();
    }
}

Наконец, помните, что ни компоненту A, ни B не нужны @page в списке, вместо этого сделайте это в Container для вашей маршрутизации, поскольку каждый компонент в контейнере теперь предназначен для упаковки в контейнер для захвата ссылки и получения ее списка.

И все, теперь у вас есть Компоненты A и B для визуализации списков из другого источника, и вся сантехника, необходимая для обработки методов из внешнего источника для обновления списков по мере необходимости. Просто добавьте больше EventCallBack параметров по мере необходимости, и если у вас есть параметры для передачи в методы контейнера, не забудьте использовать EventCallBack<T>.