Пример. Привязка с помощью параметров компонентов
Привязка, реальный пример с применением пароля (Проверка на "Пробелы не допускаются").
В примере используется делегат обработчика привязанных событий -"EventCallback<string>."
Password Binding
Password Component
password: Not set
Исходный код
....................Pages\Bind\BindParamPassword\PasswordEntry.razor................дочерний компонент
<div class="card bg-light mt-3" style="width:22rem ">
<div class="card-body">
<h3 class="card-title">Password Component</h3>
<p class="card-text">
<label>
Password:
<input @oninput="OnPasswordChanged"
required
type="@(showPassword ? "text" : "password")"
value="@password" />
</label>
<span class="text-danger">@validationMessage</span>
</p>
<button class="btn btn-primary" @onclick="ToggleShowPassword">
Show password
</button>
</div>
</div>
@code {
private bool showPassword;
private string password;
private string validationMessage;
[Parameter]
public string Password { get; set; }
// `EventCallback` Привязанный делегат обработчика событий.
//Обязательно! Имя свойства `EventCallback` должно сотоять, из имени привязываемого свойства параметра и слова `Changed`
[Parameter] public EventCallback<string> PasswordChanged { get; set; }
private Task OnPasswordChanged(ChangeEventArgs e)
{
password = e.Value.ToString();
if (password.Contains(' '))
{
validationMessage = "Spaces not allowed!";
return Task.CompletedTask;
}
else
{
validationMessage = string.Empty;
return PasswordChanged.InvokeAsync(password);
}
}
private void ToggleShowPassword()
{
showPassword = !showPassword;
}
}
...............................Pages\Bind\BindParamPassword\PasswordBinding.razor:................Предок
@page "/password-binding"
<h1>Password Binding</h1>
<PasswordEntry @bind-Password="password" />
<p>
<code>password</code>: @password
</p>
@code {
private string password = "Not set";
}