从 Blazor 中的动态组件中获取价值答案

【问题标题】：Get Value From Dynamic Component in Blazor从 Blazor 中的动态组件中获取价值
【发布时间】：2022-09-27 15:40:19
【问题描述】：

我正在尝试使用 .net 6 中发布的新动态组件功能。我已经观看了 youtube 上的所有视频并完成了示例。我似乎根本不知道如何从组件中获取值。我使用了与事件绑定在一起的动态组件的参数属性，但我的用例是将一堆动态组件加载到页面上，并且提交按钮是父页面的一部分，而不是动态组件。单击提交时，我只想要父页面上文本框动态组件的值。这是一个例子：

文本框组件

@Label: <input type=\"text\" style=\"margin: 5px;\" @bind-value=\"@TextBoxValue\"/> 
@code{
    public string Label { get; set; }
    public string TextBoxValue { get;set; }
    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }
}

索引页：

@page \"/\"
@if (type != null)
{
        <DynamicComponent Type=\"type\"  />
}

<button class=\"btn btn-primary\" @onclick=\"SaveToDatabase\">Submit</button>

@code {
    Type type;

    protected async override Task OnInitializedAsync()
    {
        type = typeof(TextBoxComponent);
    }

    private void SaveToDatabase()
    {
        // get the text value of the dynamic component and insert into db
    }
}

我尝试创建一个名为 Appstate 的对象并分配一个字符串属性，但我仍然无法获得该值。

标签： c# dynamic blazor

【解决方案1】：

要了解 Blazor，我推荐 official documentation。我在下面描述的内容直接来自文档。

我以两种方式修改了您的示例：

一种方法是使用@ref 获取对组件的引用，然后访问TextBoxValue 属性。获得对组件的引用后，您可以像这样访问 TextBoxValue 属性： (dc?.Instance as TextBoxComponent)?.TextBoxValue; *请注意，? 是因为我使用的是可为空的引用类型。

第二种方法是通过Parameters 参数传递EventCallBack。

@Label: <input type="text" style="margin: 5px;" @bind-value="@TextBoxValue" @oninput=OnInputCallBack /> 

@code{
    public string? Label { get; set; }
    public string? TextBoxValue { get; set; }

    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }

    [Parameter]
    public EventCallback<ChangeEventArgs> OnInputCallBack { get; set; }
}

@page "/"

@if (type != null)
{
    <DynamicComponent Type="type" @ref="dc" Parameters="parameters" />
}

<button class="btn btn-primary" @onclick="SaveToDatabase">Submit</button>

<h3>@Text1</h3>

<h3>@Text2</h3>

@code {
    Dictionary<string, object>? parameters;
    Type? type;
    DynamicComponent? dc;
    string? Text1;
    string? Text2;

    protected override void OnInitialized()
    {
        parameters = new() { { "OnInputCallBack", EventCallback.Factory.Create<ChangeEventArgs>(this, GetInput) } };
        type = typeof(TextBoxComponent);
    }

    private void GetInput(ChangeEventArgs e)
    {
        Text2 = (string?)e.Value;
    }

    private void SaveToDatabase()
    {
        Text1 = (dc?.Instance as TextBoxComponent)?.TextBoxValue;
    }
}

【讨论】：