Question

这是一个网络应用，用户可以在客户端上创建订单。用户当然应该能够将多个产品添加到订单中。这可以通过添加带有按钮的更多下拉菜单来完成。来自表单的信息将被插入到数据库中的两个不同表中，即Orders和OrderLines。订单是有关订单的所有常规信息，而订单行是有关所订购产品的信息。当您拥有多个产品时，就会出现此问题。

当前，我同时创建了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控件赋予不同的名称/标识。

因此，在添加HTML时，请使用Name [count]替换ddl的名称。例如fromDBProducts [0]，fromDBProducts [1]等

类似：


.toggle, [id=drop] {
  display: none;
}
nav { 
margin:0;
padding: 0;
background-color: black;

}
#logo {
display: block;
  padding: 10px 0 0 30px;
  width: 10%;
float: left;
}
nav img{
  width: 200px;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 32px;
}
nav ul li {
  display: inline-block;
  float: left;
}
nav a {
  display: block;
  padding: 14px 20px;
  color: white;
  font-size: 17px;
  text-decoration: none;
}

nav a:hover {
color: #FF4E00;
}


li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color:black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}

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

1 个答案: