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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments