MVC 复选框列表检查并选择操作，然后选择 csv 文件

Question

我有这样的看法：

@model IEnumerable<VectorCheck.Models.Invoice>
@{
    ViewBag.Title = "Exportable Invoices";
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script src="../../Scripts/Views/Export/index.js" type="text/javascript"></script
<header class="header">
    <div class="headerText">
        <h1>Exportable Invoices</h1>
    </div>
</header>
@using (Html.BeginForm("Export", "Export")) {
<table>
    <tr class="mainheader">
        <th>Invoice Number</th>
        <th>Date</th>
        <th>Organisation</th>
        <th>Total (Excl GST)</th>
        <th>Status</th>
        <th>Exported Date</th>
        <th>
            <select id="expenseSelect"></select>
            <input type="submit" id="btnexport" value="Export" />
        </th>
    </tr>
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.InvoiceNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.InvoiceDate, "{0:D}")
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Organisation.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TotalExcludingGst)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ExportedDateTime)
            </td>
            <td class="centered">
                <input type="checkbox" class="exportcheckbox" data-invoiceid=@item.InvoiceId />
            </td>
        </tr>
    }
</table>
}
<div>
    @Html.ActionLink("Back to Summary", "Index", "Invoice")
</div>

好的，看看每个复选框如何具有data-invoiceid=@item.InvoiceId 属性。好吧，我正在尝试使用一种操作方法来检查所有已检查其复选框的发票的 ID。此外，我正在尝试获取选择列表费用选择的 ID，该 ID 在通过 jquery 加载页面时添加了选项。我设法用 jquery 实现了这一点，然后用$.post 发送数据。问题出在我将信息发送到的文件中：

public ActionResult Export()
        {
            ...

            var csvData = _utility.GetCsvData(data);

            return File(Encoding.UTF8.GetBytes(csvData), "text.csv", "invoices.csv");
        }

打开保存/打开文件对话框。我被告知这不适用于 jquery ajax 调用，我需要使用提交将信息发回。

很好，但现在我不知道如何将选择 ID 和选中复选框的 ID 列表发送到方法。谁能告诉我该怎么做？

Answer 1

您不需要任何 HTML5 data-* 属性，因为在您提交表单时它们不会发送到服务器。为了发送它们的值，您必须使用 AJAX，但这不适用于文件下载。所以只需给你的复选框起一个名字：

<td class="centered">
    <input type="checkbox" class="exportcheckbox" name="ids" value="@item.InvoiceId" />
</td>

然后在服务器上，默认模型绑定器将自动构造一个包含已检查项的 id 的数组：

[HttpPost]
public ActionResult Export(int[] ids)
{
    byte[] data = ...
    return File(data, "text/csv", "invoices.csv");
}

根据InvoiceId 的类型，您可能需要调整操作参数的类型。

Answer 2

彻底改变我的答案...

您可以将隐藏的 IFRAME 动态添加到您的页面。 IFRAME src 可以将您选择的“ids”作为查询字符串参数。这应该会显示您的下载对话框。

从这里获得一些关于 jquery 的帮助：JQuery: Turn array input values into a string optimization

var selectedIdsArray = $(":checked").map(function(){return $(this).attr('data-invoiceid');});
var url = '@Url.Action("Export", "Export")?csv=' selectedIdsArray.get().join(',');
$('body').append("<iframe style='visibility:hidden' src='"+url +"'/>");