Пример. Привязка с помощью параметров компонентов

Привязка, реальный пример с применением пароля (Проверка на "Пробелы не допускаются").
В примере используется делегат обработчика привязанных событий -"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";
}
        
An error has occurred. This application may no longer respond until reloaded. Reload 🗙
Web hosting by Somee.com