Question

I need to create a component on a web page to import an excel file so that the data it contains can be inserted into a table. This requires me to send the file to the server, extract the data and send the data back to be inserted into a table. I’m using ASP.NET MVC3 on the server side.

I got the file upload working without using Ajax and I performed the data extraction using an OleDB connection to access the file. The issue surrounds sending the data back to be inserted into the table. I had assumed I could use the Ajax.BeginForm() helper method for uploading the file but this apparently does not work for file uploads (anyone able to tell me why?). So I need to find a way for sending the data back to the client using Ajax. Googling around I’ve found many tools for ajax enabled file uploaders. The one I’ve looked at using is :

http://valums.com/ajax-upload/

This works by returning a json success message when the file is uploaded. This does not fit with what I’m trying to do because I don’t want to store the file on the server but instead want to pass the data back. I’m only learning JavaScript and JQuery so I’m wondering can I just return the data in json format instead and create a handler on the client side to add it to a table? I’d appreciate any code snippets or direction on how to achieve this.

Alternatively if there is a better approach to doing this I’d be happy to change my approach.

Answer 1

I’m not familiar with the ajax upload toolkit you mentioned. But your question doesn’t really explain where you’re stuck, but what you’re trying to accomplish. You’re able to upload to the server, but are you able to return the correct JSON?

Once you get that part working, it looks like that toolkit allows you to set a OnComplete function:

onComplete: function(id, fileName, responseJSON){},

which would allow you to take the responseJSON and populate your table as you see fit. For example (albeit not the greatest):

onComplete: function(id, fileName, responseJson){
    $(responseJson).each(function(){    
        $('#yourTable').append('<tr><td>' + this + </td></tr>')
    });
}

Here’s another good link on the subject: http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/

And here’s a hanselman link with probably more detail that you’re looking for: http://www.hanselman.com/blog/ABackToBasicsCaseStudyImplementingHTTPFileUploadWithASPNETMVCIncludingTestsAndMocks.aspx