Fille Download on Dropdown change Jquery

Question

I'm trying to download an excel file on DropDownChange. So, below is my dropdown list

 <select  style="float: right; width: 15%;" id="templateDropDown" class="form-control">
                            <option value="select">Select</option>
                            <option value="Movies">Movies</option>
                            <option value="TV_SHOWS">TV SHOWS</option>
                        </select>
                        <label style="float: right;padding: 0.3%">Download Template</label>

Js

<script type="text/javascript">

        $("document").ready(function() {

            $('#templateDropDown').change(function () {
                showSpinner();
                var templateType = $('option:selected').val();
                $.ajax({
                    url: '@Url.Action("DownloadTemplate","Download")',
                    data: { templateType: templateType },
                    type: 'POST',
                    success: function(result) {
                        hideSpinner();
                    },
                    error: function() {

                    }
                });
            });

        });

</script>

And Below is my MVC Controller code

        public FileContentResult DownloadTemplate(string templateType)
        {
           if(templateType == Movies)
           {
              var fileAllBytes = System.IO.File.ReadAllBytes(Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\Movies.xlsx"));
              var filePath = Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\Movies.xlsx");
           }else{
              var fileAllBytes = System.IO.File.ReadAllBytes(Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\TVSHOWS.xlsx"));
              var filePath = Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\TVSHOWS.xlsx");
           }

            HelperExtensions.GetFileContentTypeProvider(filePath, out var contentType);
            return File(fileAllBytes, contentType, "Movies.xlsx");
        }

I'm returning the file in bytes,but it is not downloading the file. And I am not getting any runtime error also.Could anyone please tell me where I'm missing.

Thanks in Advance

score 0 · Answer 1 · answered Dec 24 '19 at 14:00

If you're retrieving the file via AJAX, the simplest answer is not to return the file, but to return the file URL and change the browser location to start a download. Downloading via AJAX is a tricky endeavor.

(As a side note, you don't need the $('document').ready wrapper - $('#templateDropDown') is shorthand for that already.)

$('#templateDropDown').change(function () {
    showSpinner();
    var templateType = $('option:selected').val();
    $.ajax({
        url: '@Url.Action("DownloadTemplate", "Download")',
        data: { templateType: templateType },
        type: 'POST',
        success: function(result) {
            hideSpinner();
            window.location.href = result;
        },
        error: function() {

        }
    });
});

Controller:

public string DownloadTemplate(string templateType)
{
    if (templateType == Movies)
    {
        var filePath = Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\Movies.xlsx");
    }
    else
    {
        var filePath = Path.Combine(_hostingEnvironment.WebRootPath, "Templates\\TVSHOWS.xlsx");
    }

    return filePath;
}

Fille Download on Dropdown change Jquery

1 Answers1