将值从一个Blazor组件传递到另一个组件的泛型列表

Question

我在一个名为RowData的通用列表中有两个变量，它有两个名为RowPosition和RowInfo的变量，它们将在服务器端提供数据。

通用列表将被导入到一个函数中，该函数将构建表单并使用传递给它的数据

我的问题是，我在服务器端使用什么来允许数据传递？例如：

RowPosition : RowInfo
1 : blahyes
2 : blahno
3 : blahlol
4 : blahblah

Answer 1

您没有发布足够的代码让我有很多建议，但组件之间可以通过几种方式进行对话。

您可以使用级联值，子组件将能够像这样引用父组件：

<CascadingValue Value="GalleryManager">
<ArtistListViewer></ArtistListViewer>
<ImageListViewer></ImageListViewer>
</CascadingValue>

在这里，我的ArtistListViewer和ImageListViewer组件可以引用具有以下属性的Gallery Manager：

[CascadingParameter]
GalleryManager GalleryManager { get; set; }

如果使用太频繁，这可能会导致性能问题，这取决于您的网站有多忙

我写了一篇关于另一种方式的博客文章：

使用接口在组件之间进行通信https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

如果您发送任何复杂的内容，我更喜欢上面的方法，其中父对象是IBlazorComponentParent，子对象是IBlazorComponent。

Nuget包：DataJuggler.Blazor.Components

以下是您可以在子项上设置Parent属性的方法，如下所示：

<Login OnLogin="LoginComplete" Parent=this></Login>

Parent=这是可能的，因为我的登录组件是一个IBlazorComponent，而我的索引页面是一个IBClazorComponentParent。

子setter向Parent注册如下：

public IBlazorComponentParent Parent
{
get { return parent; }
set 
{ 
// set the parent
parent = value;
// if the value for HasParent is true
if (HasParent)
{
// Register with the parent to receive messages from the parent
Parent.Register(this);
}
}
}

"索引"页面上的"注册"事件将子项存储为属性：

public void Register(IBlazorComponent component)
{
// If the component object exists
if (NullHelper.Exists(component, Children))
{
// If this is the Login component
if (component.Name == "Login")
{
// Set the Signup control
this.Login = component as Login;
}
// add this child
Children.Add(component);
}
}

在这一点上，我的Login组件知道它的父级，并且父级Index页面将Login组件作为一个变量。

然后你可以发送一条你喜欢的信息。

在我的登录完成方法中，我向家长发送一条消息：

// if the Parent exists
if (HasParent)
{
// create a message to send
Message message = new Message();
// Set the text
message.Text = loginResponse.Message;
// Send a message to the parent
Parent.ReceiveData(message);;
}

我只是在上面传递文本，但还有一个NamedParameters集合，您可以传递任何类型的数据(对象(。

如果感兴趣的话，这里有一个完整的工作示例和教程：

代码https://github.com/DataJuggler/BlazorImageGallery

视频https://youtu.be/3xKXJQ4qThQ