How can bind hidden input value to parent component in blazor dotnetcore 3.1

Question

I new to blazor. I have hidden input with a specific value bind send to a parent component. I went ahead with this tutorial

Child Component is (name is MyControl):

  <div>
        @foreach (var result in this.Results)
        {
            if (result.IsFinal)
            {

                        @(Text= result.Items[0].Transcript)
            <input type="hidden" @oninput="OnTextChanged" value="Text" />
            }
            else
            {
                <img class="embed-responsive" style="height: 50px; width: auto;" src="https://gifdownload.net/wp-content/uploads/2019/01/blue-loader-gif-3.gif"/>

            }
        }
    </div>
@code
{
    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public EventCallback<string> TextChanged { get; set; }

    private Task OnTextChanged(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
        return TextChanged.InvokeAsync(Text);
    }
}

and Parent Comonent is:

@inherits LayoutComponentBase

<div class="sidebar">
    <MyControl @bind-Text="text" />
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        <CascadingValue Value="text">
            @Body
        </CascadingValue>

    </div>
</div>
@code{

    private string text;

}

and usages for example in index component:

@page "/"



@if (text != null)
{
    <p>
        @text
    </p>
}



@code
{
    [CascadingParameter]
    public string text { get; set; }
}

note: I don't use a keyboard for wite text. input filling from @(Text= result.Items[0].Transcript). totally I want to give text from a child and send to parent but I don't show the text (For this purpose, I used a hidden input) , after that send to all components by CascadingValue parameter, but not working and no errors, I don't know why.

enet enet · Accepted Answer · 2020-06-10T23:12:34

This code: <input type="hidden" @oninput="OnTextChanged" value="Text" /> results in one way data-binding from the variable (Text property) to the control, but not the other way around, as no input UI is performed, and no input event is triggered to reflect this. Which is why the OnTextChanged handler is never called and the TextChanged 'delegate' is never invoked, and thus the parent component never gets a value from the Child Component( MyControl ).

To see that the rest of the code functions well, change 'hidden' to 'text', and type into the text box. This will trigger the input event, and the whole process will work.

I don't know what you're trying to do, but you should look for a solution without a hidden input that cannot get any input, and thus cannot trigger events, etc.

Hope this helps...

How can bind hidden input value to parent component in blazor dotnetcore 3.1

2 Answers