How to fetch data from drop down menu and pass to pop out dialog ? [Blazor]

Question

I have one drop-down menu with Id and I want to pass it to a pop-out dialog. For example, if I choose the data from the drop-down menu which is "JOHN", "JOHN" will be passed to the pop-out dialog when I press the Create Button, which the text field will be Name: "JOHN"

This is my drop-down menu: CodeDetails.razor

<MudAutocomplete Dense="true" T="int" Style="background-color: transparent; color: transparent;" Label="@_localizer["CodeDescription"]" For="@(() => AddEditCodeDetailModel.CodeId)" @bind-Value="AddEditCodeDetailModel.CodeId" ResetValueOnEmptyText="true" SearchFunc="@SearchCodes" Variant="Variant.Outlined" ToStringFunc="@(i => _codes.FirstOrDefault(b => b.Id == i)?.CodeDescription ?? string.Empty)" OffsetY="true" />

and want to pass to the pop-out dialog Text Field: AddEditCodeDetailModal.razor

<MudTextField ReadOnly="true" T="int" Label="@_localizer["CodeType"]" For="@(() => AddEditCodeDetailModel.CodeId)" @bind-Value="AddEditCodeDetailModel.CodeId" ResetValueOnEmptyText="true" Variant="Variant.Outlined"  OffsetY="true" />

Both are at different razor components.

Can someone teach me, please?

I have added a parameter on AddEditCodeDetailModal.razor.cs

[Parameter] public static CodeDetails CodeId { get; set; }

And Edit the Drop-down menu

<MudAutocomplete Dense="true"  Style="background-color: transparent; color: transparent;" Label="@_localizer["CodeDescription"]" For="(() => AddEditCodeDetailModal.CodeId)" @bind-Value="AddEditCodeDetailModel.CodeId" ResetValueOnEmptyText="true" SearchFunc="@SearchCodes" Variant="Variant.Outlined" ToStringFunc="@(i => _codes.FirstOrDefault(b => b.Id == i)?.CodeDescription ?? string.Empty)" OffsetY="true" />

And set the bind-value in TextField: AddEditCodeDetailModal.razor

<MudTextField ReadOnly="true"  Label="@_localizer["CodeType"]" For="@(() => AddEditCodeDetailModel.CodeId)" @bind-Value="CodeId" ResetValueOnEmptyText="true" Variant="Variant.Outlined"  OffsetY="true" />

and I got these error

CS1662 Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\obj\Debug\net5.0\Razor\Pages\Catalog\AddEditCodeDetailModal.razor.g.cs 323 Active

CS0411 The type arguments for method 'TypeInference.CreateMudTextField_1(RenderTreeBuilder, int, int, bool, int, string, int, Expression<Func>, int, object, int, Variant, int, object, int, T, int, EventCallback)' cannot be inferred from the usage. Try specifying the type arguments explicitly. Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\obj\Debug\net5.0\Razor\Pages\Catalog\AddEditCodeDetailModal.razor.g.cs 533 Active

CS0411 The type arguments for method 'TypeInference.CreateMudAutocomplete_0(RenderTreeBuilder, int, int, bool, int, string, int, string, int, Expression<Func>, int, bool, int, Func<string, Task<IEnumerable>>, int, Variant, int, Func<T, string>, int, bool, int, T, int, EventCallback)' cannot be inferred from the usage. Try specifying the type arguments explicitly. Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\obj\Debug\net5.0\Razor\Pages\Catalog\CodeDetails.razor.g.cs 325 Active

CS0411 The type arguments for method 'TypeInference.CreateMudTextField_1(RenderTreeBuilder, int, int, bool, int, string, int, Expression<Func>, int, object, int, Variant, int, object, int, T, int, EventCallback)' cannot be inferred from the usage. Try specifying the type arguments explicitly. Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\Pages\Catalog\AddEditCodeDetailModal.razor 1 Active

CS1662 Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\Pages\Catalog\AddEditCodeDetailModal.razor 1 Active

CS0411 The type arguments for method 'TypeInference.CreateMudAutocomplete_0(RenderTreeBuilder, int, int, bool, int, string, int, string, int, Expression<Func>, int, bool, int, Func<string, Task<IEnumerable>>, int, Variant, int, Func<T, string>, int, bool, int, T, int, EventCallback)' cannot be inferred from the usage. Try specifying the type arguments explicitly. Client C:\Users\yjing\source\repos\BlazorHeroPWA\src\Client\Pages\Catalog\CodeDetails.razor 1 Active

Answer 1

If these two components are in the same scope (Page or Component), you can create a variable that holds the selected value of drodownlist and the popup should bind with this variable.

If they are in different contexts, you can use [Parameter] or something like that.

In DDL Component, we have:

We receive a CallbackEvent to send the selectedItem to parent. The parent receives the value and set it in a new variable and then passes it to the POP component.

Result: