Question

我正在使用MVC 4技术创建ASP.NET应用程序，我希望允许最终用户在发票上输入订单项。我希望用户能够根据需要为发票添加任意数量的订单项，然后在完成后可以单击表单上的“保存”按钮，然后将发票和所有订单项数据写入数据库。有人可以帮我指导如何处理这个问题吗？

Answer 1

这是我在其他几个想法失败后决定这样做的方式。这可能听起来很奇怪，但请耐心等待。我使用MVC索引视图作为基础。

在用户甚至看到发票之前，我向数据库添加了一个新的发票，以便我有一个发票ID。然后我显示发票索引视图。但是，而不是显示@foreach (var item in Model)的表格，我将其更改为@foreach (var item in Model.LineItems)。它现在是空白，但在我添加一些LineItsms之后，我将显示一个LineItems列表 - 这正是发票的所在。

但我们希望能够添加我们的发票索引视图。因此，在索引视图的顶部，在您可以编码的部分中，创建一个新的LineItem并将其LineItem.invoiceID保存为Model.ID。然后在显示LineItems表之前添加部分视图 - 创建LineItem。

现在，您在页面上有一个发票行列表，您可以在其中添加新的发票行。

这里是LineItem的索引视图中的一些代码：

@model MyAppName.Models.Invoice

@{
    ViewBag.Title = "Index";
    MyAppName.Models.LineItem line = new LineItem();
    line.invoiceID = Model.ID;
}

<h2>Invoice</h2>

@Html.Partial("Create", line)

<table>
    <tr>
        <th>
            @Html.DisplayName("Amount")
        </th>
        <th>
            @Html.DisplayName("Description")
        </th>
        <th></th>
    </tr>

@foreach (var item in Model.LineItems)
{
    <tr>
        <td>
@Html.DisplayFor(modelItem => item.Amount)
        </td>

@Html.DisplayFor(modelItem => item.Description
    </td>
    <td>
        @Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.invoiceID })
    </td>
    </tr>
}
    <tr>
        <th>Total</th>
        <th>R @Model.LineItems.Sum(amt => amt.Amount)</th>
        <th></th>
        <th></th>
    </tr>
</table>

这就是它的样子（除了我的不是发票）：

Screen Shot

Answer 2

有一个弹出窗口，您的用户可以搜索订单项并添加它们。选中后会捕获ItemId并使用它来构建一行，可能是tr或div。因此，对于包含订单项tr的每个订单项，然后是一个或两个文本框，您将获得div或Id。说出数量的文本框和价格的另一个文本框。然后要么做一个ajax帖子，你迭代所有的div并将该信息作为json数据并将其发布到你的控制器方法。或者格式化绑定可以收集它们的每个div，并在进行回发时通过提交按钮提交。这应该让你开始。

Answer 3

你想要像this这样的东西。但对你的情况来说会更复杂。使用jquery简化您的工作。

$('#add_item').click(function() {
    $('#invoice_listing tbody')
        .append(
            "<tr><td>" + $('#item').val() + "</td>" +
            "<td>" + $('#amount').val() + "</td></tr>"
        )
});

在添加的每个订单项上，[添加项目]按钮将触发事件，以将订单项数据的ajax帖子发送到MVC控制器。然后，控制器将执行业务逻辑并将行项数据存储到数据库中。一旦事务成功，控制器应该向客户端浏览器返回“成功”标志。使用JSON会有所帮助。您的JavaScript应该识别“成功”标记，并将该项添加到项目列表中。

最后，用户将按下[保存]按钮，完成整个发票数据输入。然后，您应该将发票标记为已成功输入。

尽量不让用户继续添加订单项而不保存。在添加项目行后保存失败时，他们会生气。

使用ASP.NET MVC添加发票行

3 个答案: