Sending JSON object to Web API

Question

I am trying to figure out how I can send some information from a form to a Web API action. This is the jQuery/AJAX I'm trying to use:

var source = { 
        'ID': 0, 
        'ProductID': $('#ID').val(), 
        'PartNumber': $('#part-number').val(),
        'VendorID': $('#Vendors').val()
    }

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/api/PartSourceAPI/",
        data: JSON.stringify({ model: source }),
        success: function (data) {
            alert('success');
        },
        error: function (error) {
            jsonValue = jQuery.parseJSON(error.responseText);
            jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
        }
    });

Here is my model

public class PartSourceModel
{
    public int ID { get; set; }
    public int ProductID { get; set; }
    public int VendorID { get; set; }
    public string PartNumber { get; set; }
}

Here is my view

<div id="part-sources">
    @foreach (SmallHorse.ProductSource source in Model.Sources)
    {
        @source.ItemNumber <br />
    }
</div>
<label>Part Number</label>
<input type="text" id="part-number" name="part-number" />

<input type="submit" id="save-source" name="save-source" value="Add" />

Here is my controller action

// POST api/partsourceapi
public void Post(PartSourceModel model)
{
    // currently no values are being passed into model param
}

What am I missing? right now when I debug and step through this when the ajax request hits the controller action there is nothing being passed into the model param.

Have you tried without JSON.stringify? data: { model: source }, or possibly just data : source - jQuery handles the conversion for you... — nnnnnn
– nnnnnn, Commented Dec 13, 2012 at 23:12
Yes, I did try it without JSON.stringify, but that didn't work either. I've tried every possible combination I can think of on the AJAX side, but I'm thinking there is something I'm missing on the controller.. I don't know though, this is purely a guess. — Cory
– Cory, Commented Dec 14, 2012 at 0:16
When you say "nothing" is being passed into the model param, do you mean instance "model" is null? Or are its values defaults / nulls? What happens if you change your model type to string to get the raw representation, or even remove the input parameter and probe the Request.Content and Request.Headers properties directly to find out what the server is receiving? — Snixtor
– Snixtor, Commented Dec 14, 2012 at 6:56

mnsr · Accepted Answer · 2012-12-14 01:15:38Z

30

Try this:

jquery

    $('#save-source').click(function (e) {
        e.preventDefault();
        var source = {
            'ID': 0,
            //'ProductID': $('#ID').val(),
            'PartNumber': $('#part-number').val(),
            //'VendorID': $('#Vendors').val()
        }
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/api/PartSourceAPI",
            data: source,
            success: function (data) {
                alert(data);
            },
            error: function (error) {
                jsonValue = jQuery.parseJSON(error.responseText);
                //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
            }
        });
    });

Controller

    public string Post(PartSourceModel model)
    {
        return model.PartNumber;
    }

View

<label>Part Number</label>
<input type="text" id="part-number" name="part-number" />

<input type="submit" id="save-source" name="save-source" value="Add" />

Now when you click 'Add' after you fill out the text box, the controller will spit back out what you wrote in the PartNumber box in an alert.

answered Dec 14, 2012 at 1:15

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cory Over a year ago

Thank you! by just changing data: source fixed it so it would correctly bind to the 'model' param in the controller. I thought I had to include the name 'model:' in my ajax in order for it to work. Thanks a lot!

Zwik Over a year ago

In the case of complex data format (that cant be deserialize by default) you need to receive the json string on the server side. You answer might work for simple data, but wont work for complex one (which is what im searching for haha). Your answer is good for this guys problem though!

V Maharajh Over a year ago

I found that i had to include contentType: 'application/json' in my ajax call. Why doesn't this answer need it?

Jeroen · Accepted Answer · 2012-12-14 00:33:48Z

6

Change:

 data: JSON.stringify({ model: source })

To:

 data: {model: JSON.stringify(source)}

And in your controller you do this:

public void PartSourceAPI(string model)
{
       System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

   var result = js.Deserialize<PartSourceModel>(model);
}

If the url you use in jquery is /api/PartSourceAPI then the controller name must be api and the action(method) should be PartSourceAPI

edited Dec 14, 2012 at 0:33

answered Dec 14, 2012 at 0:08

Jeroen

4,0232 gold badges26 silver badges41 bronze badges

1 Comment

Cory Over a year ago

I tried this and it didn't make any difference unfortunately.

Ashot · Accepted Answer · 2012-12-16 14:04:48Z

var model = JSON.stringify({ 
    'ID': 0, 
    'ProductID': $('#ID').val(), 
    'PartNumber': $('#part-number').val(),
    'VendorID': $('#Vendors').val()
})

$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    url: "/api/PartSourceAPI/",
    data: model,
    success: function (data) {
        alert('success');
    },
    error: function (error) {
        jsonValue = jQuery.parseJSON(error.responseText);
        jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
    }
});

var model = JSON.stringify({      'ID': 0,     ...': 5,      'PartNumber': 6,     'VendorID': 7 }) // output is "{"ID":0,"ProductID":5,"PartNumber":6,"VendorID":7}"

your data is something like this "{"model": "ID":0,"ProductID":6,"PartNumber":7,"VendorID":8}}" web api controller cannot bind it to Your model

Andy T · Accepted Answer · 2012-12-13 23:15:19Z

-4

I believe you need quotes around the model:

JSON.stringify({ "model": source })

answered Dec 13, 2012 at 23:15

Andy T

9,9315 gold badges56 silver badges97 bronze badges

6 Comments

nnnnnn Over a year ago

In an object literal the property names don't need to be quoted if they are numeric literals or valid identifier names. So {model:source} is fine.

Andy T Over a year ago

Have you used the browser's debugger tools to check what is being sent to the action method in the request body?

Cory Over a year ago

Queti, yes I'm using Fiddler and it says no content was sent with the request

Cory Over a year ago

I tried using quotes and exactly like you did and it didn't make any difference unfortunately.

nnnnnn Over a year ago

@z00l - You only need the quotes for JSON, which this is not. Object literals and JSON are not the same thing.

|

Collectives™ on Stack Overflow

Sending JSON object to Web API

4 Answers 4

3 Comments

1 Comment

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related