ExtJs standard form submit with jsonData for file download

Question

I'm trying to download a file from WebApi using ExtJs 4.2.3. After reading Extjs 4 downloading a file through ajax call, it looks like my best bet is to use the standard form.submit, however, my data is not passing as expected to the WebApi controller - using the below code, items comes through null.

Controller

public HttpResponseMessage Post(string exportType, List<PcAvailableComponent> items)
{
    var dataToExport = _service.ExportItems(exportType, items);
    HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
    var stream = new MemoryStream(dataToExport);
    result.Content = new StreamContent(stream);
    result.Content.Headers.ContentType =
        new MediaTypeHeaderValue("application/octet-stream");
    return result;
}

Standard Submit

expForm.submit({
    url: AppRootUrl + 'api/AdminDataExport?exportType=' + exportType,
    //this doesn't work
    jsonData: items,
    waitMsg: 'Generating export...',
    success: function (form, action) {
        if (typeof expWindow !== "undefined") {expWindow.close();}
    },
    failure: function(form, action) {
        Ext.Msg.alert('Failed', 'An error has occurred while generating the export: ' + JSON.parse(action.response.responseText)['ExceptionMessage']);
    }
});

Ajax submit (works but can't get file back)

Ext.Ajax.request({
        url: AppRootUrl + 'api/AdminDataExport',
        params: {
            exportType: 'PricingAndCosting'
        },
        jsonData: items,
        method: 'POST',
        success: function (response) {
            expWindow.close();
            console.log("success!");
    }
});

It looks like jsonData is property of data.reader and it is not there in form.submit. Moreover jsonData has been deprecated, instead you can send data using params and to get the rawdata you can use .rawData(). — Bala, Mar 14 '15 at 05:48
I tried doing something similar in `form.submit` -- to the tune of `params: { 'items': items }` but that just passed "object Object" - wasn't able to be parsed. I also tried JSON.stringify(items), but still the mapper did not parse it. I haven't heard of rawData() -- can I just use it like `items.rawData()` in the params object? — pennstatephil, Mar 14 '15 at 05:53
You can use Ext.encode(items) which will give you string. rawData works only if you are sending models or stores. — Bala, Mar 14 '15 at 08:23

score 1 · Accepted Answer · answered Mar 16 '15 at 16:19

Ended up abandoning WebApi for this controller, and just passing the JSON as a string, then deserializing it on the server side:

[HttpPost]
public ActionResult Index(string exportType, string items)
{
    var dataToExport = _service.ExportItems(exportType, JsonConvert.DeserializeObject<List<PcAvailableComponent>>(items));
    Response.AddHeader("Content-Disposition", "inline; filename=" + exportType + "_" + DateTime.Now.ToString("yyyyMMdd_HHmmss") + ".xlsx");
    return File(dataToExport, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
}

ExtJs standard form submit with jsonData for file download

Controller

Standard Submit

Ajax submit (works but can't get file back)

1 Answers1