CODEWITHSUNDEEP
c#jqueryasp.netajaxasp.net-mvc
Deepal
Deepal

Reputation: 1814

Post a serialized ASP.NET Model and a file with single Jquery Ajax call in ASP.NET MVC

I am developing a movie library application in asp.net. In admin page, I need to add a movie to the database(details such as name, actors, poster url). And also I need to upload the trailer of the movie to a specific folder in the server.

In my AddMovie View(which is strongly typed to a MovieDetails Model), I have a forms to include movie information as text and with a file input to upload a file(movie trailer). Within my controller I get the binded MovieDetails model and the uploaded file seperately as two parameters as follows.

AddMovie Controller

At first I just posted from my view to this controller without using ajax. I was able to get the Model and the file to the controller to do what I needed to do.

Then I moved to ajax and tried to do this without page refresh.

enter image description here

Now no files cannot be uploaded. I tried to debug and noticed that uploadFile parameter of the controller is null although I attached a file to the file input in the view.

Is there any way to post the model to the controller and upload the file without completely changing the controller and using a single ajax call?

Or else is it possible pass the file path through a model attribute, access that file path and upload the relevant file in the controller, using Ajax.

Thank you!

Upvotes: 1

Views: 2144

Answers (2)

Ali Dehghan
Ali Dehghan

Reputation: 462

As Darin mentioned, there is no simple way to handle file-uploading matters via ajax for some security reasons and you can't upload files to your server easily; but good news is there are some tricks which can resolve it, for instance, you can use jquery AjaxForm in your mvc form easily with a bit little modification. Take a look at jquery-ajax-form and its samples, you will get some good idea around it.

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038780

Normally you cannot upload files using AJAX. Modern browsers that support FormData would allow you to directly make AJAX requests containing multipart/form-data content. Also look at the native XMLHttpRequest object.

But if you need to support legacy browsers you will need some fallback mechanism such as hidden iframes or Flash movies. Plugins such as blueimp would detect the browser capabilities and upload the file using the best option that the browser supports.

Upvotes: 1

Related Questions