如何从动态生成的表单中收集数据？

Question

这是一个web应用程序，用户在客户端上创建订单。当然，用户应该能够在订单中添加多个产品。这是通过添加更多的下拉菜单与按钮。表单中的信息将被插入到数据库中的两个不同的表中，Orders和OrderLines。订单是关于订单的所有一般信息，orderLine是关于所订购产品的信息。当您有多个产品时，问题就会出现。

目前，我创建了order和orderLine的实例，但是当有多个产品时，这是行不通的。我做了一个小的jQuery脚本来统计行数。

如何告诉控制器已经生成了多少下拉菜单，以便它能够创建相应数量的orderLine对象？

如何使下拉菜单的名称不同，以便控制器可以将正确的产品分配给orderLine？

省略了不相关的代码。

视图

<div class="card-body">
    @using (Html.BeginForm("InsertOrder", "Add", FormMethod.Post))
    {
    <div class="row-3">
        @Html.DropDownList("fromDBProducts", (IEnumerable<SelectListItem>)ViewData["DBProducts"], "Velg produkt", new { @class = "form-control drop, insert-textbox" })
        @Html.TextBox("Price", null, new { @class = "form-control insert-textbox price-text", @placeholder = "kr" })
        <div class="qty mt-5 counter-div">
            <span class="minus btn-secondary unselectable">-</span>
            @Html.TextBox("count", 1, new { @class = "count unselectable" })
            <span class="plus btn-secondary unselectable">+</span>
        </div>
    </div>
    <div class="row-4">
        <button type="button" class="btn btn-outline-secondary" id="add-product-btn"></button>
        </div>         
    <div class="row-7">
        <input type="submit" value="Fullfør ✓" class="btn btn-success" id="form-submit" />
    </div>
    }
</div>

 @* Template for appending dropdowns. *@
    <script id="template" type="text/template">
        <div class="row-3">
            @Html.DropDownList("fromDBProducts", (IEnumerable<SelectListItem>)ViewData["DBProducts"], "Velg produkt", new { @class = "form-control drop, insert-textbox" })
            @Html.TextBox("Price", null, new { @class = "form-control insert-textbox price-text", @placeholder = "kr" })
            <div class="qty mt-5 counter-div">
                <span class="minus btn-secondary unselectable">-</span>
                @Html.TextBox("count", 1, new { @class = "count unselectable" })
                <span class="plus btn-secondary unselectable">+</span>
            </div>
            <button type="button" class="btn btn-danger" id="remove-btn"></button>
        </div>

    </script>

@* Add dropdown menu based on template *@
<script type="text/javascript">
        $(document).ready(function ($) {
            $('#add-product-btn').on('click', function (e) {
                $('.row-3:last').after($('#template').html());
            });

            $(document).on('click', '#remove-btn', function () {
                $(this).parent('div').remove();
            });
        });

@* Getting number of dropdown-divs *@
$(document).ready(function () {
            $(document).on('click', '#form-submit', function () {
                var rowCount = $('.row-3').length;
                return(rowCount);
            });
        });
    </script>

控制器

[HttpPost]
        public ActionResult InsertOrder(FormCollection formCollection)
        {
            string productName = Request.Form["fromDBProducts"];
            Product thisProduct = null;

            foreach(Product product in db.Products)
            {
                if(product.Name == productName)
                {
                    thisProduct = product;
                    break;
                }
            }

            OrderLine orderLine = new OrderLine();

            orderLine.RecordCreated = DateTime.Now;
            orderLine.RecordDeleted = false;
            orderLine.OrderID = order.ID;
            orderLine.ProductID = thisProduct.ID;
            orderLine.ProductName = thisProduct.Name;

        //InsertMethodHere(orderLine)

            return RedirectToAction("Index", vm);
        }

Answer 1

根据您希望它发布的方式，您需要给from控件不同的名称/ids。

因此，当添加HTML时，用Namecount替换ddl的名称。示例fromDBProducts、fromDBProducts1等

类似于：

  $('.row-3:last').after($('#template').html().replace(/fromDBProducts/g,"fromDBProducts[" + rowCount +"]"));