ASP.NET MVC 主详细信息输入表

Question

我正在尝试使用 ASP.NET MVC 实现订单输入表单，但面临很多困难。我找到的所有示例都与查看主详细信息表单相关，没有一个用于添加或编辑。

假设我有两个表：Order 和 OrderLines，它们以一对多关系相互关联。在主视图中，我有一个“新建”按钮，单击它应该显示一个由订单字段组成的新订单视图，一个显示订单行的网格，以及一个“保存”按钮，单击该按钮将保留整个订单以及将其行存入数据库。网格应该有三个按钮：“添加行”、“编辑行”和“删除行”。单击“添加行”时，应显示一个新视图，允许用户将行添加到订单视图网格线中 - 在此阶段数据库不受影响 -。当用户单击“编辑线”时，将显示一个视图，允许用户编辑所选线，并在完成后更新订单网格线。

最困难的问题是：

如何在订单视图和订单行视图之间传递订单及其行集合？

如何根据订单行视图的变化更新订单视图？

以及如何在不涉及数据库的情况下保留视图之间的更改？

有没有一个具体的例子展示如何使用MVC来实现这个？

感谢您的帮助和反馈。

Answer 1

请查看我的 博客发布关于在 ASP.NET MVC 中创建主详细信息表单的文章。它还包含您可以下载的演示项目

Answer 2

与 WebForms 不同，ASP.NET MVC 不会尝试隐藏 HTTP 的无状态性质。要跨多个表单处理复杂对象，您有几个选择：

• 每次更改时将对象保存在服务器上，以便仅使用 id 即可使用更新后的对象
• 使用 jquery 填充订单行表单并将详细信息保存到主表单 。

我通常自己使用客户端选项，主表单具有将在子表单中编辑的数据的隐藏字段 不过，您可能会发现服务器端选项更容易 - 如果您确实不想涉及数据库，则可以将部分更新的对象保留在会话中。

Answer 3

第 1 步：创建视图模型

public class OrderVM
{
    public string OrderNo { get; set; }
    public DateTime OrderDate { get; set; }
    public string Description { get; set; }
    public List<OrderDetail> OrderDetails {get;set;}
}

第 2 步：添加用于添加订单行的 javascript

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    $(function () {
        $('#orderDate').datepicker({
            dateFormat : 'mm-dd-yy'
        });
    });

    $(document).ready(function () {
        var orderItems = [];
        //Add button click function
        $('#add').click(function () {
            //Check validation of order item
            var isValidItem = true;
            if ($('#itemName').val().trim() == '') {
                isValidItem = false;
                $('#itemName').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#itemName').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) {
                isValidItem = false;
                $('#quantity').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#quantity').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) {
                isValidItem = false;
                $('#rate').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#rate').siblings('span.error').css('visibility', 'hidden');
            }

            //Add item to list if valid
            if (isValidItem) {
                orderItems.push({
                    ItemName: $('#itemName').val().trim(),
                    Quantity: parseInt($('#quantity').val().trim()),
                    Rate: parseFloat($('#rate').val().trim()),
                    TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim())
                });

                //Clear fields
                $('#itemName').val('').focus();
                $('#quantity,#rate').val('');

            }
            //populate order items
            GeneratedItemsTable();

        });
        //Save button click function
        $('#submit').click(function () {
            //validation of order
            var isAllValid = true;
            if (orderItems.length == 0) {
                $('#orderItems').html('<span style="color:red;">Please add order items</span>');
                isAllValid = false;
            }

            if ($('#orderNo').val().trim() == '') {
                $('#orderNo').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderNo').siblings('span.error').css('visibility', 'hidden');
            }

            if ($('#orderDate').val().trim() == '') {
                $('#orderDate').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderDate').siblings('span.error').css('visibility', 'hidden');
            }

            //Save if valid
            if (isAllValid) {
                var data = {
                    OrderNo: $('#orderNo').val().trim(),
                    OrderDate: $('#orderDate').val().trim(),
                    //Sorry forgot to add Description Field
                    Description : $('#description').val().trim(),
                    OrderDetails : orderItems
                }

                $(this).val('Please wait...');

                $.ajax({
                    url: '/Home/SaveOrder',
                    type: "POST",
                    data: JSON.stringify(data),
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function (d) {
                        //check is successfully save to database 
                        if (d.status == true) {
                            //will send status from server side
                            alert('Successfully done.');
                            //clear form
                            orderItems = [];
                            $('#orderNo').val('');
                            $('#orderDate').val('');
                            $('#orderItems').empty();
                        }
                        else {
                            alert('Failed');
                        }
                        $('#submit').val('Save');
                    },
                    error: function () {
                        alert('Error. Please try again.');
                        $('#submit').val('Save');
                    }
                });
            }

        });
        //function for show added items in table
        function GeneratedItemsTable() {
            if (orderItems.length > 0) {
                var $table = $('<table/>');
                $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
                var $tbody = $('<tbody/>');
                $.each(orderItems, function (i, val) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(val.ItemName));
                    $row.append($('<td/>').html(val.Quantity));
                    $row.append($('<td/>').html(val.Rate));
                    $row.append($('<td/>').html(val.TotalAmount));
                    $tbody.append($row);
                });
                $table.append($tbody);
                $('#orderItems').html($table);
            }
        }
    });

</script>

步骤 3：创建一个保存数据的操作，

[HttpPost]
    public JsonResult SaveOrder(OrderVM O)
    {
        bool status = false;
        if (ModelState.IsValid)
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };
                foreach (var i in O.OrderDetails)
                {
                    //
                   // i.TotalAmount = 
                    order.OrderDetails.Add(i);
                }
                dc.Orders.Add(order);
                dc.SaveChanges();
                status = true;
            }
        }
        else
        {
            status = false;
        }
        return new JsonResult { Data = new { status = status} };
    }

您可以下载源代码和视频教程

Answer 4

您可以尝试 Telericks 免费的 MVC 网格控件...

http://demos.telerik.com/ aspnet-mvc/grid/hierarchyserverside

Answer 5

就在我的头顶上（一种大脑垃圾场）...

• 你可以有一个表单的主网格部分。这将是从操作加载的完整视图（带有订单号或不带有订单号，具体取决于是否加载现有订单号）。

• 单击事件（新建或编辑）时，可能会以“灯箱”样式打开部分视图。然后，这会将 json 对象传回主窗体。

• 然后，传递的 json 对象将使用模板呈现到表底部（对于新表）或更新现有记录。这也可以在同一个 ajax 调用中保存回服务器。或者只是更新客户端并需要用户单击保存按钮。

• 将需要一个 isDirty 标志，以便任何更改将其设置为 true，并且当浏览器尝试离开或关闭等时，您可以提示用户保存或不保存。

希望这有帮助。

编辑

没有尝试过这个，但您的问题的无数据库方面可能会很有趣点击

Answer 6

步骤 3：创建保存数据的操作。
[http邮报]

    public JsonResult SaveOrder(OrderVM O)

    {

        bool status = false;

        if (ModelState.IsValid)

        {

            using (ManageMobileStoreWebContext dc = new ManageMobileStoreWebContext())

            {

                //Random rnd = new Random();

                //OrderID = rnd.Next(),

                Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };

                foreach (var i in O.OrderDetails)

                {

                    if(order.OrderDetails == null)

                    {

                        order.OrderDetails = new List<OrderDetail>();

                    }

                    // i.TotalAmount = 

                    order.OrderDetails.Add(i);

                   //dc.OrderDetails.Add(i);

                }

                dc.Orders.Add(order);

                dc.SaveChanges();

                status = true;

            }

        }

        else

        {

            status = false;

        }

        return new JsonResult { Data = new { status = status } };

    }