ASP.NET MVC Получение элементов, добавленных в список через Javascript для контроллера

Question

У меня есть ListBoxFor на моей html-странице:

@Html.ListBoxFor(model => model.SelectedProduct, new SelectList(Model.Products, "Value", "Text"), new { @class = "form-control col-12", @id = "produtosEnvolvidos" })

, и я хочу, чтобы пользователь мог добавлять элементы в этот список с помощью кнопки плюс (+)

<button type="button" id="addList" class="btn ml-2">+</button>

В настоящее время я добавляю элементы в список через javascript:

$(document).ready(function () {
    $("#addList").click(function () {
        var x = document.getElementById("produtosEnvolvidos");
        var option = document.createElement("option");
        option.text = document.getElementById("produtotxt").value;
        x.add(option);
    })
});

, и как только пользователь отправляет форму, я хочу получить все вновь добавленные элементы в моем контроллере, чтобы я мог обновить базу данных, но как только япроверьте список Model.Products, он всегда пуст, я думаю, потому что на самом деле JavaScript не правильно общается с asp.net.

Модель:

[Display(Name = "Product")]
public string SelectedProduct { get; set; }
public IEnumerable<SelectListItem> Products { get; set; }

Внутри Create GET:

model.Products = new SelectList(model._Products, "Product", "Text");

Есть ли какое-нибудь решение для этого?

Я могу использовать такие технологии, как JQuery и Ajax.