Post 从组件到新组件的数据列表并在 Blazor 中呈现新组件

Question

问题

用户select ComponentA 的项目列表，然后查看select 编辑的项目列表。用户被重定向到 ComponentB，用户可以在其中找到 selected 项的列表。

在 MVC 中

这很简单，因为我们可以简单地将数据列表从 View post 传递到 Controller 的 Post 方法，然后从该控制器我们可以呈现所需的新视图。

How can we accomplish the same in the Blazor Server?

如果需要添加更多详细信息，请告诉我。

Answer 1

您可以尝试将两个组件包装在一个外部组件中，然后将外部组件用作状态容器。

容器

<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 派生并为您提供一个由您需要设置的布尔值过滤的列表。为了将关注点放在正确的位置，所有针对列表的函数也应该存在于 Container 组件中。您还参考了 2 个组件设置，因此您可以在外部对它们的 public 方法进行操作。

要访问组件，请使用 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>。

Answer 2

根据 ComponentA 和 ComponentB 是否都是可路由组件，您可以通过多种方式进行此操作。

如果ComponentB是ComponentA的子组件；也就是说，不可路由的ComponentB嵌入在ComponentA中，你可以将ComponentA的值作为Component参数传给ComponentB……下面的代码片段创建了一个父组件和一个子组件，并演示了如何将值从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;} 
}

如您所见，我们将年龄和国家/地区值从父组件传递到它的子组件。在现实生活中的代码中，您可能会传递对象集合、进行各种操作等。以上是父项如何与其子项通信并向其传递值的基本概述。反之亦然，即通过事件委托将值从子组件传递到其父组件。

当两个组件都是组件页面时；也就是说，两者都是可路由的，您通常需要一个中介对象来执行从一个组件到另一个组件的传递值。

假设您要将用户从当前页面重定向到 ComponentA，他在其中填写了包含大量数据项的表单，并重定向到 ComponentB，后者获取数据、处理数据等。下面是如何执行此操作的代码从 ComponentA 导航到 Navigate to ComponentB:

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

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

如您所见，上面的代码将用户从一个页面重定向到另一个页面，但是如何传递数据呢？为此，您必须定义一个服务 class，该服务可以注入到两个组件中以执行数据从一个组件到另一个组件的传递。是我的回答，我在其中详细介绍了这种机制。

希望这对您有所帮助...

Post 从组件到新组件的数据列表并在 Blazor 中呈现新组件

Post list of data from component to new component and render the new component in Blazor

asp.net-mvc

blazor

blazor-server-side

asp.net-blazor

Parent.razor

Child.razor