Parameters are coming in as null for Ajax Post method to Controller

Question

I have this bit of code that triggers on click. When I set a breakpoint at SaveNewProduct all the values are null. I tried to create a input object, I tried to add in each property manually, nothing worked. May I get any tips or suggestion.

var input = {
    name: name,
    type: type,
    description: description,
    category: category,
    file: file.files[0],
    acronym: acronym
};

$.ajax({
    type: "POST",
    url: '/Admin/SaveNewProduct',

    processData: false,
    data: {
        name: name,
        type: type,
        description: description,
        category: category,
        file: file.files[0],
        acronym: acronym,
        input: input
    },
    success: function (response) {
        alert("saved okay");
    }
});

[HttpPost]
public async Task<ActionResult> SaveNewProduct(SaveNewProductInput input)
{
    ...
    //breakpoint here, input values are all null
    ...
}

SaveNewProductInput.cs

public class SaveNewProductInput
{
    public string Name { get; set; }
    public string Acronym { get; set; }
    public string Type { get; set; }
    public string Category { get; set; }
    public string Description { get; set; }
    public HttpPostedFileBase File { get; set; }
}

I also tried remove processData, i Am presented with this error Uncaught TypeError: Illegal invocation

Have you tried adding [FromBody] on - public async Task SaveNewProduct([FromBody] SaveNewProductInput input) ... Also consider adding a content-type: application/json on the ajax request. — Alejandro, Nov 26 '19 at 06:01
why are you passing those attributes in data seperately when you already have them in input object? — TejasGondalia, Nov 26 '19 at 07:06
@BeginnerTejas if you have a suggestion that works instead of asking a question with a question, would be greatly appreciated. Clearly those are my attempts and it's not working. I'm illustrating what I've tried. — Master, Nov 26 '19 at 13:50
@Master, Haha. I've tried to post an answer. Maybe it has to do with property mapping or maybe binding. If that doesn't work, try to remove that File property because honestly I've never passed file as a parameter, and see if it works. If it does, then maybe you need FormData or something in JS to pass it to controller. Hope that helps : ) — TejasGondalia, Nov 27 '19 at 04:34

score 1 · Answer 1 · answered Nov 30 '19 at 16:30

You need to use FormData to send files in request with processData and contentType set to false

var formData = new FormData();
formData.append("name", name);
formData.append("type", type);
formData.append("description", description);
formData.append("category", category);
formData.append("file", file.files[0]);
formData.append("acronym", acronym);

$.ajax({
    url: "/Admin/SaveNewProduct",
    type: "POST",
    data: formData,        
    processData: false,
    contentType: false,
    success: function (response) {
        alert("saved okay");
    }
});

score 0 · Answer 2 · answered Nov 26 '19 at 05:59

0

JQuery automatically converts the 'data' object into request parameters, but I think it not doing that because you set 'processData' to false. Please remove processData and try.

answered Nov 26 '19 at 05:59

Nils

910
1
9
21

1

I believe the suggestion to remove processData should've worked, but based on your type HttpPostedFileBase I'm guessing you are attempting to pass a file or something complex that can't be passed over as JSON. This is why you received the "Invalid invocation" message. As a test try not passing file. For passing Files through Ajax take a look at this post - https://stackoverflow.com/questions/37825913/how-to-pass-file-data-with-ajax-and-jquery – Alejandro Nov 27 '19 at 03:09
Here is a better example with MVC https://stackoverflow.com/a/38703844/8161471 – Alejandro Nov 27 '19 at 03:43

score 0 · Answer 3 · answered Nov 27 '19 at 04:31

var input = {},
input.Name = name;
input.Type = type;
input.Description = description;
input.Category = category;
input.File = file.files[0];
input.Acronym = acronym;
$.ajax({
    url: "/Admin/SaveNewProduct",
    type: "POST",
    data: JSON.stringify(input),
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
    }
});

[HttpPost]
public async Task<ActionResult> SaveNewProduct(SaveNewProductInput input)
{
    ...
}

Parameters are coming in as null for Ajax Post method to Controller

3 Answers3