Blazor Editform изменения событий - PullRequest
Новая
       86

Blazor Editform изменения событий

0 голосов
/ 03 мая 2020

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

привязка к обоим @bind -Value и @onchange не работает (я предполагаю, что в значении связывания используются свойства ввода как значения, так и значения, измененного значением.

Я могу связать с oninput, но хотелось бы знать, есть ли лучший способ сделать это. 

<InputSelect id="inputPeriod" name="inputPeriod" class="form-control" @bind-Value="model.Period" @oninput="periodChanged">


protected void periodChanged(ChangeEventArgs e)
        {}

Я могу привязать к oninput следующим образом

, но в идеале я бы хотел привязать к событию @onchange после обновления свойства модели, или знаю, что Лучшая практика для этого - без использования значения привязки, проверка модели не будет работать, поэтому единственный альтернативный способ, которым я могу придумать, - это чтобы события изменения работали внутри свойств в моей модели, но это кажется неправильным

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Вот глупый пример, в котором вы должны ввести свое имя, а затем выбрать своего питомца, в результате чего вы переименуете его в имя вашего любимого питомца. Пример описывает, как вы можете манипулировать своей моделью при изменении поля: 

<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />

<div class="form-group">
    <label for="name">Enter your Name: </label>
    <InputText Id="name" Class="form-control" @bind-Value="@person.Name"></InputText>
    <ValidationMessage For="@(() => person.Name)" />

</div>
<div class="form-group">
    <label for="body">Select your pet: </label>
    <InputSelect @bind-Value="@person.Pet">
        <option value="Cat">Cat</option>
        <option value="Dog">Dog</option>
        <option value="Horse">Horse</option>
        <option value="Lion">Lion</option>
    </InputSelect>
     <ValidationMessage For="@(() => person.Pet)" />
</div>

<p>
    <button type="submit">Submit</button>
</p>
</EditForm>


 @code
 {
    private EditContext EditContext;
    private Person person = new Person();


    protected override void OnInitialized()
    {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

        base.OnInitialized();
    }

    // Note: The OnFieldChanged event is raised for each field in the model
    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        if (e.FieldIdentifier.FieldName == "Pet")
        {

            person.Name = person.Pet;

        }
    }


    public class Person
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Pet { get; set; }
    }
}

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

Совсем нет ...

Для моделей не требуется реализовывать INotifyPropertyChanged, но если они это сделают, вы можете легко подключить это к EditContext. Тогда вам не нужно использовать встроенные компоненты Input * - вместо этого вы можете связываться с обычными элементами HTML и получать уведомления об изменениях. Это обеспечивает большую гибкость при отображении пользовательского интерфейса за счет большей сложности и шаблонности в ваших классах моделей.

Надеюсь, это поможет ...

1 голос
/ 03 мая 2020

Это одно решение, которое достигает того, что вы хотите, без использования двусторонней привязки. Вместо этого значение привязывается только к блоку выбора, который запускает проверку. 

<InputSelect 
    id="inputPeriod" name="inputPeriod"      
    value="model.Period"
    class="form-control" 
    @onchange="periodChanged"
> 



@code
{

    void periodChanged(ChangeEventArgs e) 
        {
            model.Period = (string) e.Value;
            //your logic... 
        }

}
...