0

I am trying to submit some data and file to my controller's action:

[HttpPost]
public ActionResult Settle(SettlePrepaymentViewModel settlePrepaymentViewModel)
{
        //Do something and return JSON
}

My view model contains the following properties:

public HttpPostedFileBase File { get; set; }
public Guid? PrepaymentId { get; set; }

In my form I have some textboxes and a file input. When I press button, I want my form (with file) to be submitted to my action:

$('#btnConfirmSettlement').click(function (e) {
            $.ajax({
                url: '@Url.Action("Settle", "Prepayments")',
                type: "POST",
                data: $("#uploadFile").serialize(),
                success: function (data) {
                    if (data.isSuccess) {
                        toastr.success("Success");
                    } else {
                        toastr.error(data.errorMessage);
                    }
                },
                error: function (data) {
                    toastr.error(data.errorMessage);
                }
            });
            return false;
        });

However when using the above code it does not work (there is no file passed to my action. However when using the following code (where my form is simply submitted) it works fine:

@using (Html.BeginForm("Settle", "Prepayments", FormMethod.Post, new {enctype = "multipart/form-data", @id="uploadFileSubmi"}))
{
    @Html.TextBoxFor(model => model.SettlePrepaymentViewModel.File, new {type = "file"})

    <input type="submit" value="Settle"/>
}

I was trying to use form submit when I click "Save" on my twitter bootstrap modal but then it just returns me (redirects me to) a JSON result from my action - I don't want to be redirected. Can someone please help me with this? What am I doing wrong?

niao
  • 4,972
  • 19
  • 66
  • 114
  • To submit files using ajax, you need to use `FormData`. [Refer example here](https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects). Note its not supported in older browsers –  Jan 30 '15 at 23:42
  • I tried to use FormData but it didn't work either (controller's action is never invoked). I suppose I have to change my action's definition because I want to pass my viewmodel also. – niao Jan 30 '15 at 23:54
  • If your not hitting the controller, check the browser console for errors –  Jan 30 '15 at 23:55
  • I set my form data as follows: var formData = new FormData($("#settlePrepaymentForm")[0]); and I get an error in browser console: TypeError: 'append' called on an object that does not implement interface FormData – niao Jan 31 '15 at 00:06
  • please also note that I call ajax when button is clicked and not form submitted – niao Jan 31 '15 at 00:16
  • There are a few other ajax setting required such as `processData:false,`and `contentType:false`. [Refer this answer](http://stackoverflow.com/questions/9622901/how-to-upload-a-file-using-jquery-ajax-and-formdata) –  Jan 31 '15 at 00:30
  • [Another good example here](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) –  Jan 31 '15 at 00:35
  • that's probably a solution! Thanks Stephen! Will see tomorrow if that helps – niao Jan 31 '15 at 01:09
  • @StephenMuecke you should add your answer and I will mark it as a solution please. – niao Feb 02 '15 at 13:08
  • Best if you answer with the the actual code that worked for you, and then accept it :) –  Feb 03 '15 at 04:03

0 Answers0