post formdata via ajax to webapi

Question

I'm looking to post formdata to a c# web api and have the model binding work. This looks like it should be possible, but my object is never populated. I want to keep the code simple and flexible. ie. i dont want to add a new json attribute to my ajax call every time i add a new form field and i would like to pass files if i wish to (not expecting files to bind to the model).

Here is basically what I have at the moment.

$('.save').click(function () {
    $.ajax({
        url: 'api/plant/insert',
        data: new FormData($('form')[0]),
        type: 'POST',
        processData: false,
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: function () {
            $.processing({ content: 'Saving Plant' });
        },
        error: function () {
            $.error({ content: 'An error occurred saving the plant' });
        },
        success: function (data) {
            location.assign('PlantEdit.cshtml?plant_id=' + data);
        }
    });
});

and in my controller

public int Insert([FromBody] Plant plant)
{
    return plant.Insert();
}

and my model

public class Plant : Data
{
    public int plant_id { get; set; }
    public bool live { get; set; }
    public string genus { get; set; }
    public string species { get; set; }
    public string variety_name { get; set; }

    public Plant() { }
}

and sample post data

------WebKitFormBoundaryc6x6E9JewE0ln4ql
Content-Disposition: form-data; name="live"

on
------WebKitFormBoundaryc6x6E9JewE0ln4ql
Content-Disposition: form-data; name="genus"

test genus name
------WebKitFormBoundaryc6x6E9JewE0ln4ql
Content-Disposition: form-data; name="species"

test species name
------WebKitFormBoundaryc6x6E9JewE0ln4ql
Content-Disposition: form-data; name="variety_name"

test variety name
------WebKitFormBoundaryc6x6E9JewE0ln4ql--

The result is the plant instance is not null, but all attributes are null, hence an empty row inserted into the database. So am I asking for too much, or am I going about this all wrong?

It would be helpful to know what your Plant object looks like. Also, if you look in the developer tools in your browser, what is it posting to the server? — peinearydevelopment, Jun 02 '15 at 17:38

score 0 · Answer 1 · answered Jun 02 '15 at 23:45

I would use fiddler to test the post to the service URL, but the data you are posting should be in json format I'm pretty sure:

{ plant_id: 1, live: true, genius: "test genius", ... }

What is the output of new FormData($('form')[0]) that it's sending as the POST data?

score 0 · Answer 2 · edited May 23 '17 at 12:14

Based on this answer, I believe you would need to do something like this:

$('.save').click(function () {
    var fd = new FormData();    
    fd.append( 'name', $('form')[0] );

    $.ajax({
        url: 'api/plant/insert',
        data: fd,
        type: 'POST',
        processData: false,
        contentType: false,
        beforeSend: function () {
            $.processing({ content: 'Saving Plant' });
        },
        error: function () {
            $.error({ content: 'An error occurred saving the plant' });
        },
        success: function (data) {
            location.assign('PlantEdit.cshtml?plant_id=' + data);
        }
    });
});

post formdata via ajax to webapi

2 Answers2