@*
@{
    ViewData["Title"] = "CreateLunch";
}
<div class="text-center">
    <h2 class="display-4">Добавление обеда</h2>
</div>
<style>
    .row{
        margin-top: 10px;
    }
</style>
<form method="post">
    <div class="row">
        <div class="col-4">Название обеда:</div>
        <div class="col-8">
            <input type="text" name="name" id="name" />
        </div>
    </div>
    <div class="row">
        <div class="col-4">Продукты:</div>
        <div class="col-8">
             <select id="id" name="id" class="form-control" asp-items="@(new SelectList(@ViewBag.ProductList, "Id", "ProductName"))" multiple></select>
        </div>
    </div>
    <div class="row">
        <div class="col-8"></div>
        <div class="col-4">
            <input type="submit" value="Добавить" class="btn btn-primary" />
        </div>
    </div>
</form>*@
@{
    ViewData["Title"] = "CreateLunch";
}
<div class="text-center">
    <h2 class="display-4">Добавление обеда</h2>
</div>
<style>
    .row{
        margin-top: 10px;
    }
</style>
<form method="post">
    <div class="row">
        <div class="col-4">Название обеда:</div>
        <div class="col-8">
            <input type="text" name="name" id="name" />
        </div>
    </div>
    <div class="row">
        <div class="col-4">Продукты:</div>
        <div class="col-8">
             <select id="productId" name="productId" class="form-control" asp-items="@(new SelectList(@ViewBag.ProductList, "Id", "ProductName"))"></select>
             <input type="number" name="count" id="count" />
             <input type="button" value="Добавить продукт" class="btn btn-primary" onclick="addProduct()" />
             <ul id="productList"></ul>
        </div>
    </div>
    <div class="row">
        <div class="col-8"></div>
        <div class="col-4">
            <input type="submit" value="Создать" class="btn btn-primary" />
        </div>
    </div>
</form>

<script>
    var products = [];

    function addProduct() {
        var productId = document.getElementById("productId").value;
        var productName = document.getElementById("productId").options[document.getElementById("productId").selectedIndex].text;
        var count = document.getElementById("count").value;

        var product = { productId: Number(productId), count: Number(count) };
        products.push(product);

        var listItem = document.createElement("li");
        listItem.innerHTML = productName + " - " + count;
        document.getElementById("productList").appendChild(listItem);
    }
</script>