Question

我正在开发一个与订购页面有相似之处的网站，我决定使用ASP.NET Core编写它。

我目前卡住的地方是我正在创建一个页面，用户可以在其中输入一些“订单标题”信息，然后在页面上显示一个“行项目”部分，上面有几个东西（从下拉菜单中选择一个产品数量的文本框）。还会有一个“添加订单项”按钮，可以添加第二个和第三个，依此类推。

然后页面底部会出现一个“提交”按钮，可以保存所有内容 - 订单“标题”数据以及页面上的所有订单项。

不幸的是，我不知道如何做到这一点。

我的模型类如下，但我正在努力弄清楚（或找一个例子）如何为订单项创建一个或多个结构：

public class Product
{
    public int ID { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}
public class OrderLine
{
    public int ID { get; set; }
    public Product CurrentProduct { get; set; }
    public decimal Qty{ get; set; }
}
public class Order
{
    public int ID { get; set; }
    public DateTime OrderDate { get; set; }
    public string CustomerName { get; set; }
    public List<OrderLine> OrderLines { get; set; }
}

注意：这是一个全新的发展，所以如果我走完了错误的道路，改变航向还为时不晚。

Answer 1

您可以执行以下操作：当＆＃34;添加订单项＆＃34;时，您可以使用Javascript在表单中插入其他<input>代码。单击按钮。诀窍是为这些输入提供正确的名称，以便模型绑定器使用它们来填充模型中的OrderLines集合。

@model Order

@{
    // assume available options for Products are generated in controller or ViewModel
    IEnumerable<SelectListItem> availableProducts = Model.AvailableProducts ; 
    const string lineItemContainerId = "orderLineItemsContainer";
    const string lineItemTemplateId = "orderLineItem";
    const string addLineItemButtonId = "addOrderLineItem";
}

<div id="@lineItemContainerId">
    @* always show inputs for first order line item; 
       we will also use this as template for additional order lines *@
    <div id="@lineItemTemplateId">
        @* Note that the OrderLines collection must contain an empty OrderLine initially 
           for this Html helper syntax to work - initialize collection in ViewModel ctor *@
        @Html.DropDownListFor(m => m.OrderLines[0].CurrentProduct, availableProducts)
        @Html.TextBoxFor(m => m.OrderLines[0].Qty)
        @* Id will be set by Entity Framework when we create the OrderLine entity *@
    </div>
</div>

<button id="@addLineItemButtonId" type="button">Add line item</button>

<script type="text/javascript">
    $(document).ready(function() {

        var numberOfLineItems = 1;

        // clone and insert template if button is clicked
        $('#@addLineItemButtonId').on('click', function() {
            numberOfLineItems++; 

            // clone template and remove Id attribute from clone
            var newLineInputs = $('#@lineItemTemplateId').clone().removeAttr('id');

            // fix array indices in name attributes of cloned inputs
            // so model binder fills the OrderLines collection correctly
            newLineInputs.children().each(function() {
                 var existingName = $(this).prop('name');
                 // model binder expects zero based indices
                 var fixedName = existingName.replace('[0]', '[' + (numberOfLineItems - 1) + ']');
                 $(this).prop('name', fixedName)
            }); 

            // append cloned inputs to DOM
            $('#@lineItemContainerId').append(newLineInputs);
        });
    });
</script>

另见Model Binding To A List。

使用页面上的一个或多个“订单项”部分创建“修改”页面

1 个答案: