Ajax 调用异步方法成功返回文件，但未执行 Ajax 请求的成功/完成部分

Question

I am trying to export selected records in to a file and reload the page to update the records in a current view. I am calling web api asynchronously to get all the records. An AJAX call is executing an action in a controller successfully and returning expected data without any error but none of the 'success', 'complete' or 'error' part of ajax function is executing. There are no errors in a developer tool of the browser, no exception, nothing unusual so its getting trickier for me to investigate this issue further. Can I request your a suggestions on this please? Thanks

View:

 @Html.ActionLink("Export records", "Index", null, new { Id = "myExportLinkId")

Script:

        $("a#myExportLinkId").click(function (e) {
             var selected = "";
             $('input#myCheckBoxList').each(function () {
               if (this.checked == true) {
               selected += $(this).val() + ',';
               }
             });
             if (selected != "") {
                $.ajax({
                  url: '/MyController/MyAction',
                  type: 'GET',
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: {
                    'MyString': 'stringValue'
                  },
                  success: function (data) {
                    alert("success");
                  },
                  error: function () {
                    alert("error");
                  }
            });
          })

And the action/method looks like this:

    [HttpGet]
    public async Task<ActionResult> ExportNewOrders(string OrderIdString)
    {
      //code to create and store file 

      //actually want to send the file details as json/jsonResult but for testing only returning 
      //string here
      return Json( "Success", "application/json", JsonRequestBehavior.AllowGet);
    }

Answer 1

Finally I have resolved this with Promisify functionality of an AJAX call. Obviously the json response I was returning had an issue so I have replaced

return Json( "Success", "application/json", JsonRequestBehavior.AllowGet);

to

 return new JsonResult(){
        Data = new { success = true, guid = handle, fileName = exportFileName },
        ContentType = "application/json",
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };

which has fixed the bug and the success function of ajax call got executed.

But other than this there were issues to wait until the file download (which involved encryption decryption, server validations etc) completes and then refresh the page. This I have resolved by implementing an ajax call with Promisify fuctionality. You can find codepen example here and the original post here .

Here is the complete code.

View/HTML

@Html.ActionLink("Export", "yourActionName", null, new { Id = "exportRequest", @onclick = "letMeKnowMyFileIsDownloaded();" })

Script/Ajax

        function letMeKnowMyFileIsDownloaded() {
        return new Promise(function (resolve, reject) {
            $("a#exportRequest").on("click", function () {
                    $.ajax({
                        url: this.href + "?param=whatever params you want to pass", 
                        dataType: "json",
                        data: {
                            'param1': 'value'
                        },
                        success: function (data) {
                            var a = document.createElement("a");
                            var url = '/yourControllerName/Download?fileGuid=' + data.guid + '&filename=' + data.fileName;//window.URL.createObjectURL(data);
                            a.href = url;
                            a.download = data.fileName;
                            document.body.append(a);
                            a.click();
                            a.remove();
                            window.URL.revokeObjectURL(url);
                            resolve(true);
                        },
                        error: function (error) {
                            reject(error);
                        }
                    });
            });
        });
    }

    letMeKnowMyFileIsDownloaded()
        .then(function (bool) {
            if (bool) {
                //alert("File downloaded 👇");
                window.location.reload(1);
            }
        })
        .catch(function (error) {
            alert("error");
        });

I have used nuget package ClosedXML to handle excel file functionality. Using the stream to create and download the data in excel file without storing the file physically on the server.

And in the controller

//can be async or sync action
public async Task<ActionResult> Index(YourModel model)
{
    //do stuff you want

    var exportOrders = your_object;

    //using DataTable as datasource
    var dataSource = new DataTable();

    //write your own function to convert your_object to your_dataSource_type
    dataSource = FormatTypeToDataTable(exportOrders);

    if (dataSource != null && dataSource.Rows.Count > 0)
    {
        //install ClosedXML.Excel from nuget
        using (XLWorkbook wb = new XLWorkbook())
        {
            try
            {
                var handle = Guid.NewGuid().ToString();
                wb.Worksheets.Add(dataSource, "anyNameForSheet");
                string exportFileName = "yourFileName" + ".xlsx";
                MemoryStream stream = GetStream(wb);
                TempData[handle] = stream; exportFileName);
                return new JsonResult()
                {
                    Data = new { success = true, guid = handle, fileName = exportFileName },
                    ContentType = "application/json",
                    JsonRequestBehavior = JsonRequestBehavior.AllowGet
                };
            }
            catch (Exception ex)
            {
                //ModelState.AddModelError("", ex.Message);
            }
        }
    }
}

 public virtual ActionResult Download(string fileGuid, string fileName)
    {
        if (TempData[fileGuid] != null)
        {
            var stream = TempData[fileGuid] as MemoryStream;
            var data = stream.ToArray();
            return File(data, "application/vnd.ms-excel", fileName);
        }
        else
        {
            return new EmptyResult();
        }
    }