CODEWITHSUNDEEP
razorblazor
segu
segu

Reputation: 25

How can i use the value from a textbox component in blazor?

Im trying to create a textbox component to recicle code, but i cant get the value from the textbox in a page. I only need to get the TextBox value from the component to use it into other pages.

this is the TextBox component :

<style>
    .textbox-parameters{
        background: Red;
    }
</style>

    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <label for="@Id">@Label</label>
    }
    <div class="input-group mb-3 " >
        <input type="text" class="form-control textbox-parameters" id="@Id"  @bind="@CurrentValue">
    </div>

@code {
    [Parameter] public string? Label { get; set; }
    [Parameter] public string? Id { get; set; }
    private string CurrentValue {get;set;} = "";
}

and im trying to use there:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm">
            <label >Proyecto:</label>
            <div class="input-group mb-3">
              <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Lista modelos</p>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Lista Iteraciónes</p>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Imagen Semilla</p>
        </div>
        <div class="col-sm ">
            <div class="row">
                <div class="col-sm">
                    <label>Ancho</label>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend"></div>
                      <input type="text" class="form-control textbox-parameters" id="basic-url" aria-describedby="basic-addon3">
                    </div>
                </div>
                <div class="col-sm">
                    <TextBox Id="Alto" Label="Alto" CurrentValue="@alto" />
                </div>
                <label>Texto: @alto</label>
            </div>
        <div class="row">
            <div class="col-sm text-center">
                <label>Numero Imágenes</label>
                <div class="input-group mb-3 " >
                  <input type="text" class="form-control textbox-parameters" id="basic-url" aria-describedby="basic-addon3">
                </div>
            </div>
        </div>

        </div>

        <div class="col-sm">
           <button type="button" class="btn btn-outline-success">Generar</button>
        </div>
    </div>
</div>


@code{
    string alto="";

}

Sorry for my extra text but StackOverflow need more details but thats my only problem with my code. thanks.

Upvotes: 0

Views: 6383

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30036

You need to set up binding correctly - i.e. set up the Value and ValueChanged parameters on the component.

Here's TextBox:

<style>
    .textbox-parameters{
        background: Red;
    }
</style>

    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <label for="@Id">@Label</label>
    }
    <div class="input-group mb-3 " >
        <input type="text" class="form-control textbox-parameters" id="@Id" value="@Value" @onchange="this.OnChange">
    </div>

@code {
    [Parameter] public string Value {get;set;} = "";
    [Parameter] public EventCallback<string> ValueChanged {get;set;}

    [Parameter] public string? Label { get; set; }
    [Parameter] public string? Id { get; set; }

    private void OnChange(ChangeEventArgs e)
    {
        ValueChanged.InvokeAsync(e.Value.ToString());
    }
}

Note we've bound the value to Value and the change event to OnChange which then invokes ValueChanged.

And a test page:

@page "/"
<TextBox @bind-Value="@this.Value" />

<div>
    Value = @this.Value
</div>
@code {
    private string Value { get; set; } = "Fred";
}

@bind-Value tells the Razor pre-compiler to bind to Value to set the value and ValueChanged to update the bound field/property.

Upvotes: 1

Related Questions