如何使用 Blazor 服务器将文本框中输入的值从模态 window 传递到另一个组件？

Question

我正在开发一个 Blazor 服务器项目并创建了这个模式 window。这是一个组件本身

        <div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"  @onclick="() => Close()">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label for="FirstName">Enter FirstName:</label>
                        <input type="text" id="FirstName" name="FirstName"><br><br>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
                    </div>
                </div>
            </div>
        </div>


        @if (ShowBackdrop)
        {
            <div class="modal-backdrop fade show"></div>
        }


        @code {
            public Guid Guid = Guid.NewGuid();
            public string ModalDisplay = "none;";
            public string ModalClass = "";
            public bool ShowBackdrop = false;

            public void Open()
            {
                ModalDisplay = "block;";
                ModalClass = "Show";
                ShowBackdrop = true;
                StateHasChanged();
            }

            public void Close()
            {
                ModalDisplay = "none";
                ModalClass = "";
                ShowBackdrop = false;
                StateHasChanged();
            }

            public void Done()
            {
                
            }
        }

我正在使用这样的组件。我希望能够使用在 Modal 中输入的 FirstName 当用户单击 Done 按钮时，在下面的这个组件中执行其他操作。

        @page "/modaltest"

        <MappingPoc.UI.Pages.MyModal @ref="Modal"></MappingPoc.UI.Pages.MyModal>


        <button @onclick="() => Modal.Open()">Open Modal</button>

        @code {
            private MappingPoc.UI.Pages.MyModal Modal { get; set; }
        }

如何将模式中输入的名字的值传递给此组件？

Answer 1

根据您的需要，您可以通过几种不同的方式执行此操作：

级联参数：关于它的基础知识的好视频 - https://www.youtube.com/watch?v=ZmDMKp1Q8kA

AppState 方法：一个很好的视频，涵盖两种不同的方式：https://www.youtube.com/watch?v=BB4lK2kfKf0

或者您可以将其作为参数传递给组件：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-5.0（向下滚动到 'Binding with component parameters' 部分

我收录了视频，因为我认为它们更有帮助，但如果不清楚，请告诉我。

Answer 2

您可以使用 EventCallback 来实现。

在您的 Modal 组件中，使用 @bind 属性将名字输入文本框绑定到一个字段：

<div class="modal-body">
    <label for="FirstName">Enter FirstName:</label>
    <input @bind="firstName" type="text" id="FirstName" name="FirstName"><br><br>
</div>

在同一组件的 @code 部分，定义一个名为 firstName 的字段，类型为 string:

private string firstName;

此 firstName 将绑定到文本框，文本框中的任何值更新也会将 firstName 的值设置为相同的值。
其次，在相同的代码部分，添加类型为 EventCallback<string> 的 public 属性作为 Modal 组件的参数（通过用 [Parameter] 属性装饰它：

[Parameter] public EventCallback<string> OnDoneCallback { get; set; }

在此代码部分中，使用 Done() 方法中的 InvokeAsync() 方法调用 EventCallback：

public void Done()
{
    // ...
    await InvokeAsync(() => OnDoneCallback.InvokeAsync(firstName));              
}

这就是您在子 Modal 组件中所需要的全部内容。

在父组件的 @code 部分，添加一个字段来保存子组件的名字：

private string _firstName;

现在，包含一个回调方法，当子组件的 Done 方法调用 EventCallback 时执行响应：

private void OnModalDone(string firstName)
{
                _firstName = firstName;
}

现在，在包含 Modal 组件的父组件中，将 OnModalDone 方法作为 EventCallback 的参数传递：

<MappingPoc.UI.Pages.MyModal @ref="Modal" OnDoneCallback="OnModalDone"></MappingPoc.UI.Pages.MyModal>
<h1>@_firstName</h1>

我还添加了一个 <h1> 标签来显示名字。现在，当您单击模态框的 Done 按钮时，它将调用 Done 方法。此 Done 方法将调用父级的 OnModalDone，参数设置为在模态文本框中输入的值。输入的值作为参数 firstName.
在 OnModalDone 中可用
事件回调不需要调用StateHasChanged，会自动调用

在 Blazor fiddle 中看到这个工作：https://blazorfiddle.com/s/rbsg30wv

如何使用 Blazor 服务器将文本框中输入的值从模态 window 传递到另一个组件？

How to pass the value entered in a text box from a modal window to another component using Blazor server?

c#

blazor

blazor-server-side