Question

我需要捕获其中包含public list<OrderItems>的采购订单。

我的PurchaseOrder课程如下：

public class PurchaseOrderModel
{
    public int OrderNumber { get; set; }
    public StatusState Status { get; set; }
    public DateTime OrderDate { get; set; }
    public DateTime EstimatedDeliveryDate { get; set; }
    public int SupplierID { get; set; }
    public int DeliveryMethodID { get; set; }
    public string CreatedBy { get; set; }
    public List<OrderItemModel> OrderItems { get; set; } //Class name should match
}

我的OrderItem课程如下：

public class OrderItemModel  
{
    public int ID { get; set; }
    public int Quantity { get; set; }
    public double Price { get; set; }
    public int ProductID { get; set; }
    public int PurchaseOrderNumber { get; set; }
}

我如何创建一个包含采购订单（相关字段是供应商和交货方式）和订单商品（相关字段是数量，价格和产品ID）的表单？

Answer 1

假设您正在寻找的行为是创建一个PO表单，然后您可以随后添加任意数量的订单项，那么我能想到的唯一方法是为每个订单项动态生成UI控件。 MVC通过索引将列表项映射到模型。所以作为一个简单的例子

<强> CreatePO.cshtml

@model PurchaseOrderModel

@using (Html.BeginForm())
{
    <!-- PO info controls -->
    ...
    <!-- Order item info controls -->
    <div id="orderItems"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" />
    <script type="text/javascript">

        $(function() {
            var itemCount = 0;

            $('#btnAddItem').click(function() {
                var $itemRow = $('<div id="orderItem' + itemCount + '">' +
                    '<input type="hidden" name="PurchaseOrderModel.OrderItems.Index" value="' + itemCount + '" />' +
                    '<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Quantity" />' +
                    '<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Price" />' + 
                    '<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].ProductID" />' + 
                    '<input type="button" class="remove" id="btnRemoveItem' + itemCount + '" value="Remove" /></div>');
                $('#orderItems').append($itemRow);
                itemCount++;
            });
            $('#orderItems').on('click', '.remove', function() {
                $(this).parent().remove();
                itemCount--;
            });
        });

    </script>

    <input type="button" id="btnAddItem" value="Add Line Item" />
}

见in action。

Answer 2

詹姆斯的答案很棒，但是当你在订单之间删除订单时我发现了一个问题。例如，您添加了4个订单但删除了第3个订单。发布表单时，您会注意到不会发布第4个订单。对于非顺序索引，您可以更改

'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Quantity" />'
'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Price" />'
'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].ProductID" />'

到

'<input type="hidden" name="PurchaseOrderModel.OrderItems.Index" value="' + itemCount + '" />'
'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Quantity" />'
'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].Price" />'
'<input type="text" name="PurchaseOrderModel.OrderItems[' + itemCount + '].ProductID" />'

请参阅Phil Haacked's Model Binding To A List

Answer 3

尝试这样，这只是示例

<强>模型

public class PurchaseOrderModel
{
    public int OrderNumber { get; set; }
    public StatusState Status { get; set; }
    public DateTime OrderDate { get; set; }
    public DateTime EstimatedDeliveryDate { get; set; }
    public int SupplierID { get; set; }
    public int DeliveryMethodID { get; set; }
    public string CreatedBy { get; set; }
    public List<OrderItemModel> OrderItems { get; set; }
}

public class OrderItemModel  
{
    public int ID { get; set; }
    public int Quantity { get; set; }
    public double Price { get; set; }
    public int ProductID { get; set; }
    public int PurchaseOrderNumber { get; set; }
}

查看

@mode xxx.PurchaseOrderModel <div> @Html.LabelFor(m => m.SupplierID) @Html.TextBoxFor(m => m.SupplierID ) @Html.ValidationMessageFor(m => m.SupplierID ) </div> <br /> <div> @Html.LabelFor(m => m.OrderItems[0].Quantity) @Html.TextBoxFor(m => m.OrderItems[0].Quantity) @Html.ValidationMessageFor(m => m.OrderItems[0].Quantity) </div>

Answer 4

您可以在视图中加入：

{{2p>您稍后会将这些类称为：

@model SoluntionName.Models.PurchaseOrderModel

和

@Model.OrderNumber 
@Model.SupplierID 
@Model.DeliveryMethodID

Answer 5

在控制器中构建模型并将其传递给视图：

var model = new PurchaseOrderModel();
model.OrderItems = // fill your order items
return view(model);

然后在你看来你会做这样的事情：

@model Your.Namespace.PurchaseOrderModel

@using(Html.Beginform()) {
   @Html.EditorFor(m => m.SupplierID )
    // etc etc.
}

然后在你的控制器中创建一个以模型为参数的post方法：

[HttpPost]
public ActionResult PurchaseOrder(PurchaseOrderModel model) {

if (ModelState.IsValid()) {
// save your model to database or whatever.
return Redirect( ...
}
// there are validation errors: show form again:
return view(model);

}

MVC 4视图用另一个模型列表创建模型

5 个答案: