如何存储 html 元素并将其呈现在另一个视图中？

Question

我有一组按钮，当单击时，它们会将列表项添加到现有列表中。理论上，该列表是客户的订单，通过单击按钮创建。为了开始新订单，我创建了一个名为 print 的按钮，该按钮为空。

这是html：

 <ol class="order"></ol>
        <pre class="totalLine">Total:                 0.00</pre>

当点击其中一个按钮时：

 function AddItem(Name, Price, ID) {
                sum += parseInt(Price);
                ID = "Dish" + ID;
                   $(".order").append(
                        $('<li/>').addClass( ID).addClass("list-group-item").text(Name).append(
                            $('<span/>').addClass("badge").text(Price)
                        ));
                  
                $(".totalLine").text("Total:" + "                " + sum.toFixed(2));
            }

打印功能：

函数打印() {

        $(".order").empty();
        sum = 0;
        document.getElementsByClassName("totalLine")[0].innerHTML = "Total:" + "                " + sum.toFixed(2);
    }

我想创建另一个名为“AllOrders”的视图，例如，客户将能够在其中检查已创建的所有订单（或换言之列表）。我不确定解决此问题的最佳方法是什么，甚至不确定如何开始。我假设我需要将所有订单的列表发送到 AllOrderscontroller，但我不知道该怎么做。

有人告诉我应该使用 Ajax，但我不知道如何在这里应用它。

我找不到类似的东西，但任何关于我可以在哪里阅读或应该阅读什么的建议将不胜感激。

TIA

Answer 1

很难在一篇文章中提供完整的答案，因为有很多部分，但即：

• 服务器对这些订单一无所知，因为列表是在客户端建立的，因此如果您希望能够通过重定向重定向到新视图，控制器将不知道客户端上添加了什么.
• 您需要以某种方式将其运回后端并存储。最好这就是数据库的用武之地。
• 您可以：
  1. 添加订单时，您可以向服务器发送 AJAX 请求，然后将订单存储在数据库中。您可以发送所有相关信息，以便保存订单。
  2. 或者，您可以创建 HTML 输入元素（隐藏、文本框等），一旦保存页面，所有这些数据都会发布到服务器。我以这种方式对 Kendo 做了一些事情（但并不是说 Kendo 必须这样做：https://onallthingsweb.wordpress.com/2016/06/27/asp-net-mvc-and-client-side-lists-with-kendo/）
• 有多种方法可以实现这一点，但它可能有点复杂，需要对您使用的任何一种方法/技术都有很好的了解。

希望对入门参考有所帮助。