How to export data to Excel using ASP.NET MVC 5 without reloading the page?

Question

The process of exporting the data into Excel is working. But I don't need to reload the page. When I try to press the Export Data to Excel the page is reloading. How to avoid this? Please, help. Thank you.

C#:

public ActionResult Export(int id) {
    Excel.Application application = new Excel.Application();
    Excel.Workbook workbook = application.Workbooks.Add(System.Reflection.Missing.Value);
    Excel.Worksheet worksheet = workbook.ActiveSheet;
    var export = _context.Employees.Where(x => x.Id == id)ToList();

    worksheet.Cells[1, 1] = "Name";
    worksheet.Cells[1, 2] = "Age";
    worksheet.Cells[1, 3] = "Position";
    worksheet.Cells[1, 4] = "Address";
    worksheet.Cells[1, 5] = "Contact";

    foreach (var e in export)
    {
        worksheet.Cells[row, 1] = e.Name;
        worksheet.Cells[row, 2] = e.Age;
        worksheet.Cells[row, 3] = e.Position;
        worksheet.Cells[row, 4] = e.Address;
        worksheet.Cells[row, 5] = e.Contact;

        row++;
    }

    workbook.SaveAs(@"C:\Excel\sample.xls");
    workbook.Close();
    Marshal.ReleaseComObject(workbook);

    application.Quit();
    Marshal.FinalReleaseComObject(application);

    return View();
}

Ajax:

<script>
    $(document).ready(function() {
        $(".js-export").click(function(e) {
            var link = $(e.target);
             $.ajax({
                    url: "/home/export/" + link.attr("data-export-id"),
                    method: "GET"
                    })
        });
    });
</script>

Event:

<a href="#" class="js-export btn btn-danger btn-xs" data-export-id="@item.Id">Export to Excel</a>

return View() seems odd. Shouldn't you be sending the file back in the response stream? — lc.
– lc., Commented Feb 9, 2017 at 5:43
Are you sure the link you put is really what calls the Ajax event? There is no class in it with js-delete-property, and it does not have a data-id attribute, it has data-export-id. — Ghasan غسان
– Ghasan غسان, Commented Feb 9, 2017 at 5:43
Yes, I use return View(). How is that "result stream"? Can you help me. — Paul George
– Paul George, Commented Feb 9, 2017 at 5:44

Anand Systematix · Accepted Answer · 2017-02-09 06:11:38Z

0

Instead using ActionResult you can use JsonResult and can return only url of excel file :-

    $.ajax({
            type: 'GET',
            url: "/home/export/" + link.attr("data-export-id"),
            dataType: 'json',                
            success: function (data) {                  
               console.log(data.ExcelUrl);
            }
        });

Your code in controller :-

 public JsonResult Export(int id)
        {   
          //Exel generation code  here showing in your post. 
          return Json(new { ExcelUrl = "New Excel URL path" }, JsonRequestBehavior.AllowGet);
       }

edited Feb 9, 2017 at 6:11

answered Feb 9, 2017 at 5:51

Anand Systematix

6325 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paul George Over a year ago

Hi Anand, yes good suggestion. What is New Excel URL path? I can't understand.

Anand Systematix Over a year ago

Thanks, Its your excel file path like "C:\Excel\sample.xls". Please mark it as answer if it solve your issue, so other can use it.

Anand Systematix Over a year ago

//Get excel URL Here , you can get excel url here that you return from JsonResult method. As I get it like "data.ExcelUrl"

Paul George Over a year ago

One more thing Anand. Please, can you edit the example above? Thank you. The ajax part.

Developer Over a year ago

You should be sending file stream instead of file path unless the file path is shared one or in cloud blob storage. How will the client be able to access the C:\ drive or whatever drive of the server where you save the file?

|

Developer · Accepted Answer · 2017-02-09 07:00:21Z

0

Call the action via $.ajax and return FileResult in the action:

public FileResult Export(int id) 
 {
    //.........your file creation logic goes here ....//

    byte[] fileBytes = File.ReadAllBytes(filePath);
    return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
 }

answered Feb 9, 2017 at 7:00

Developer

6,4703 gold badges20 silver badges24 bronze badges

6 Comments

Developer Over a year ago

@Paul - filePath is the path where you have saved the file. In your sample, its C:\Excel\sample.xls

Paul George Over a year ago

I tried it but why it doesn't have a prompt like download?

Developer Over a year ago

Is it downloading the file now? or just that the prompt is missing?

Paul George Over a year ago

downloading the file now, but prompt is missing it must see like google when download in the bottom of the browser right?

Developer Over a year ago

Which browser are you using?

|

Collectives™ on Stack Overflow

How to export data to Excel using ASP.NET MVC 5 without reloading the page?

2 Answers 2

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related