How do you post an object using ajax in asp.net?

Question

Here is the product class:

public class Product
{
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Description { get; set; }
    [Required]
    [Range(1, 1000000)]
    public decimal Price { get; set; }
    [Required]
    public string Category { get; set; }
}

Here is my .cshtml page:

<div class="alert alert-success">
    <span id="responseMessage"></span>
</div>
<div class="form-group">
    <label>Name</label>
    @Html.TextBoxFor(x => x.Name)
</div>
<div class="form-group">
    <label>Price</label>
    @Html.TextBoxFor(x => x.Price)
</div>
<div class="form-group">
    <label>Category</label>
    @Html.TextBoxFor(x => x.Category)
</div>
<div class="form-group">
    <label>Description</label>
    @Html.TextBoxFor(x => x.Description)
</div>
<button id="postButton">Ok</button>

Here is my javascript:

$(document).ready(function () {
    $("#postButton").click(function () {
        var product = 'product=' +
            JSON.stringify({
                Name: $('#Name').val(),
                Description: $('#Description').val(),
                Price: $('#Price').val(),
                Category: $('#Category').val()
            });


        $.ajax({
            url: "/api/products/postproduct",
            type: "POST",
            data: product,
            dataType: 'json',
            success: function (data, status, xhr) {
                $('#responseMessage').html('Insert status: ' + 
                data.d.status);
            },
            error: function (xhr, status, error) {
                alert('Error occurred: ' + status);
            }
        });
    });
});

Here is my controller:

    public async Task<IHttpActionResult> PostProduct(Product product)
    {
        if (ModelState.IsValid)
        {
            await Repository.SaveProductAsync(product);
            return Ok();
        }
        else
        {
            return BadRequest(ModelState);
        }
    }

Thank you in advance. The ajax post hits the controller ( i set a breakpoint there), but when i hover over the product parameter there are no values coming in. Let me know if you need any more information.

Have you tried leaving off the `'product='` part and just sending the object without the stringify? — Taplar, Aug 18 '17 at 19:42
If you are using .net core then make sure to add `[FromBody]` to the request model in the controller action. — nurdyguy, Aug 18 '17 at 19:54

ethane · Answer 1 · 2017-08-19T20:21:10.357

0

What I think your issue is:

You are passing data to your method but the parameter is not yet of type Product. You may need to change your parameter type to a more generic type of object. Then you could cast it to your desired product model.

Once data enters your controller, it expects a strongly-typed object of product. Thus, changing the parameter type to object allows you to parse every child of object.

edited Aug 19 '17 at 20:21

answered Aug 19 '17 at 19:34

ethane

2,329
3
22
33

score 0 · Answer 2 · answered Aug 19 '17 at 20:46

0

either change parameter name in controller to this public async Task PostProduct(Product Product)

Or change in jquery data : {"product", product}

Hope this will works.

answered Aug 19 '17 at 20:46

Qaiser Mehmood

202
2
10

How do you post an object using ajax in asp.net?

2 Answers2