Blazor - динамически создавать поле выбора - PullRequest
Новая
       4

Blazor - динамически создавать поле выбора

2 голосов
/ 27 февраля 2020

Я перевожу старое приложение JavaScript / JQuery в Blazor, и одна из последних вещей, которые мне нужно выяснить, - это как добавить выпадающий список с опциями динамически в пользовательский интерфейс.

В старой программе JavaScript я сделал это, щелкнув по кнопке «+»: 

<span class="add"><span class="add2"> + </span>

При щелчке он вызвал .on («щелчок»), который только что отображал html с .insertAfter и блоком выбора появился динамически после предыдущего элемента (который также оказался блоком выбора). Количество> 2 к нижней части сохраняло более 2-х выбранных от добавления: 

$('.add').on('click', function(){
    var everything = "<select name='number" + (count + 1) + "' class='number" + (count + 1) + "'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>'";
    $(everything).insertAfter('.number' + count).addClass('add2');
    count +=1;
    if(count > 2){
    $('.add').remove();
    }
});

В Blazor, похоже, есть несколько способов сделать это без JavaScript, что, я полагаю, в этом весь смысл Blazor, например, «RenderFragment» с такими методами, как «.AddContent» и «.AddAttribute», et c. Я еще не нашел достаточно документации по этой технике, чтобы узнать, подходит ли она к go. Так Blazor планирует добавлять / удалять элементы из пользовательского интерфейса? Я на правильном пути? Или очень холодно, ну так холодно? Я хотел бы сделать это самым последним рекомендуемым способом Blazor.

Будем благодарны за любые предложения, указания или документацию!

1 Ответ

1 голос
/ 27 февраля 2020

Вам не нужно напрямую использовать какой-либо метод RenderFragment (). Просто создайте простой простой компонент Blazor, который будет иметь:

  • модель представления для хранения «описания» состояния вашей динамической c формы
  • соответствующей логики c который преобразует модель представления в HTML

Что-то вроде следующего будет работать; см. встроенные комментарии для объяснения: 

@page "/Test"


@*Render the button if current number of select boxes is less than 2*@
@if (SelectBoxes.Count < 2)
{
    <div>
        <button type="button" class="btn btn-primary" @onclick="AddSelectBox">Add</button>
    </div>
}

@*Render the corresponding number of select boxes*@
@foreach (var box in SelectBoxes)
{
    <div>
        <select class="number@(box + 1)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

    </div>
}

@code {

    // this is your view model, ie. a collection of "IDs" of the select boxes
    List<int> SelectBoxes = new List<int>();


    // this method will add a new item to the collection of select boxes
    void AddSelectBox()
    {
        SelectBoxes.Add(SelectBoxes.Count);
    }
}
...