Blazor TwoWay Binding на заказном компоненте - PullRequest
Новая
       21

Blazor TwoWay Binding на заказном компоненте

0 голосов
/ 02 октября 2019

Я создаю приложение на стороне сервера Blazor, и у меня возникают проблемы с привязкой значения между двумя пользовательскими компонентами.

Я рассмотрел другой пример того, как должно работать bind или @bind, но яне могу понять, какая актуальная информация по этому вопросу.

Учитывая класс модели Пользователь: 

public class User
    {
        [Mapping(ColumnName = "short_id")]
        public string ShortId { get; set; }

        public User()
        {

        }
    }

Я хочу создать форму, которая отображает все свойства этого пользователя и имеет ихво входе, чтобы его можно было отредактировать и в конце сохранить в базу данных.

Моя форма (родительский компонент) выглядит следующим образом: 

<div class="edit-user-form">
    <AnimatedUserInput TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
    <button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>
@code {
    [Parameter] public vUser User { get; set; }

    [Parameter] public Action Hide { get; set; }

    bool _error = false;

    void SaveUser()
    {
        ValidateUserData();
    }

    void ValidateUserData()
    {
        _error = string.IsNullOrWhiteSpace(User.ShortId);
    }
}

Где AnimatedUserInput - это пользовательский компонентэто выглядит так: 

<div class="edit-area @FocusClass @WiggleClass">
    <input type="text" @bind="@TbText" />
    <span data-placeholder="@Placeholder"></span>
</div>
@code {
    [Parameter]
    public string TbText { get; set; }

    [Parameter]
    public string Placeholder { get; set; }
}

Теперь в текстовом поле ввода я правильно вижу ShortId объекта User в моем родительском компоненте.

Однако, если я изменю текст на входе и нажму кнопку Save, которая вызывает метод ValidateUserData и позволяет мне посмотреть на текущий объект User, я вижу, что никаких изменений не было сделанов фактическом свойстве User.ShortId, но только на входе.

Есть ли способ связать его так, чтобы изменения во входе автоматически применялись к свойству binded?

У меня есть несколькоиз этих свойств, которые должны быть показаны в форме, поэтому я не хочу подключать пользовательское OnChanged событие для каждого из этих свойств.

1 Ответ

0 голосов
/ 07 октября 2019

Хорошо, так что для всех, кто споткнулся об этом. Я попробовал немного больше и нашел решение. Поэтому к своему пользовательскому компоненту ввода AnimatedUserInput я добавил EventCallback, который я вызываю каждый раз, когда значение на входе обновляется: 

@code {

    [Parameter]
    public string TbText
    {
        get => _tbText;
        set
        {
            if (_tbText == value) return;

            _tbText = value;
            TbTextChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public EventCallback<string> TbTextChanged { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    private string _tbText;
}

И привязка на моем родительском компоненте выглядит следующим образом: 

<div class="edit-user-form">
    <AnimatedUserInput @bind-TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <AnimatedUserInput @bind-TbText="@User.FirstName" Placeholder="First name" />
    <AnimatedUserInput @bind-TbText="@User.LastName" Placeholder="Last name" />
    <AnimatedUserInput @bind-TbText="@User.UserName" Placeholder="Username" />
    <AnimatedUserInput @bind-TbText="@User.StaffType" Placeholder="Staff type" />
    <AnimatedUserInput @bind-TbText="@User.Token" Placeholder="Token" />
    <button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
    <button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>

@code {
    [Parameter] public vUser User { get; set; }
}

Таким образом, Blazor может корректно связывать значения и обновлять их с обеих сторон так, как я ожидаю, что они будут связываться.

...