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

Question

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.

Answer 1

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.