MVC list of checkboxes check and select to Action then to csv file

Question

I have a view like:

@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>

Ok, so see how each checkbox has an attribrute data-invoiceid=@item.InvoiceId. Well I'm trying to get to an action method the Ids of all the invoices that have had their checkboxes checked. Also I'm trying to get the id of the selectlist expenseSelect which has options added to it on page load via jquery. I managed to achieve this with jquery and then sending the data with a $.post. The problem is in the file I'm sending the info to:

public ActionResult Export()
        {
            ...

            var csvData = _utility.GetCsvData(data);

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

brings up a save/open file dialog. I'm been informed this won't work for the jquery ajax call and I need to post the info back using a submit.

That's fine but now I have no idea how to send the select id and a list of the ids of the checked checkboxes to the method. Can anybody show me how to go about this?

score 3 · Accepted Answer · answered Dec 06 '11 at 06:52

You don't need any HTML5 data-* attributes since they are not sent to the server when you submit the form. In order to send their values you will have to use AJAX but this won't work with file downloads. So simply give your checkboxes a name:

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

and then on the server the default model binder will automatically construct an array of the ids of the checked items:

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

Depending on the type of InvoiceId you might need to adjust the type of the action argument.

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Radically changing my answer...

You could dynamically add a hidden IFRAME to your page. The IFRAME src can take your selected "ids" as a querystring parameter. This should get your your download dialog.

Got some help with the jquery from here: 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 +"'/>");

edited May 23 '17 at 11:51

Community

1
1

answered Dec 06 '11 at 00:40

russau

8,928
6
39
49

From what I'vve been told and experience the dialog won't appear for a javascript post like this. The form has to be submitted back or the dialog popup won't appear. – AnonyMouse Dec 06 '11 at 03:18
updated the answer to use a hidden iframe, so you get your download dialog. this means no ajax tho. – russau Dec 06 '11 at 04:05

MVC list of checkboxes check and select to Action then to csv file

2 Answers2