Размещение массива строк

Question

Я пытаюсь опубликовать строковый массив для действия post в проекте Razor Pages. Для этого я подумал об использовании скрытого тега <select>. Пользователь вводит текст в текстовое поле, нажимает кнопку, а затем я добавляю новый параметр в <select>, а затем публикую все с помощью кнопки отправки. Однако после того, как все опубликовано, свойство массива моей модели пусто.

Кто-нибудь знает, есть ли лучший способ сделать это или что я делаю неправильно?

Бритва:

<form method="post">
    <input id="string-value" />
    <input type="button" id="add-item" value="Add item" />
    <select asp-items="@Model.Model.ArrayOfStrings" id="hidden-select"></select>
    <table id="table-items">

    </table>
    <input type="submit" value="Submit" />
</form>

public class ArrayModel
{
    public List<SelectListItem> ArrayOfStrings { get; set; } = new List<SelectListItem>();
}
public class IndexModel : PageModel
{
    [BindProperty]
    public ArrayModel Model { get; set; }

    public void OnGet()
    {
        Model = new ArrayModel();
    }

    public void OnPost()
    {
        System.Diagnostics.Debugger.Break();
    }
}

JS:

$('#add-item').on('click', function () {
    debugger;
    var value = $('#string-value').val();
    $('#hidden-select').append(new Option(value, value));
    $('#table-item tr:last').after('<tr><td>' + value + '</td></tr>')
});

Хранилище можно найти здесь .

Answer 1

Опции выбора не будут опубликованы, поэтому это не будет работать.

Самый простой способ сделать это - добавить результаты к скрытому вводу с разделителем char, а затем разделить строку на стороне сервера.

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

Бритва:

  <input value="@String.Join(",", Model.Model.ArrayOfStrings)" id="tags"></select>

JS

$('#tags').val($('#tags').val() + ',' + value);

Контроллер

 public void OnPost(string tags)
{
    var tagsArray = tags.split(',');
}