ASP.NET Core MVC posting a model to controller using ajax

Question

I am trying to post a javascript object, representative of a Model, back to a controller using an ajax post. However, the model is always showing as null.

The model in question is as follows

public class Product
{
    [Key]
    public int Id { get; set; }

    [Required(ErrorMessage = "Name is required and must not be empty.")]
    [StringLength(200, ErrorMessage = "Name should not exceed 200 characters.")]
    public string Name { get; set; }

    public DateTime Created { get; set; }

    [Required(ErrorMessage = "Price is required and must not be empty.")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }
}

With the ajax call looking like so

$('#btnSaveNewProduct').click(function (e) {
                e.preventDefault();
                var form = $('#frmNewProduct');
                if (form.valid()) {
                    var data = { // to be replaced with form values
                        Name: 'Bob',
                        Price: 34
                    };
                    //ajax call to save product
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("AddProduct", "Admin")",
                        contentType: "application/json",
                        dataType: "json",
                        data: data,
                        success: function (response) {
                            alert('done');
                        },
                        error: function (response) {
                            alert(response);
                        }
                    });
                }
            });

The controller method looks like the following

    [HttpPost]
    public JsonResult AddProduct([FromBody] Product product)
    {
        bool success = false;
        // save product
        success = true;
        return new JsonResult(success);
    }

Any insight would be most appreciated.

I also suggest you look into AJAX Helpers. Here is a C# Corner post about them: https://www.c-sharpcorner.com/article/Asp-Net-mvc-ajax-helper/. — CodeBreaker
– CodeBreaker, Commented Oct 17, 2018 at 22:48

Jeremy Caney · Accepted Answer · 2020-11-12 20:22:19Z

1

To get your code to work as desired, make the following three modifications to your code.

From the Ajax call, remove this: dataType: "json"
From the Ajax call, remove this: data:data
In the Ajax call, add this: data:JSON.stringify(data)

IMPORTANT POINTS TO NOTE:

When you are using the [FromBody] attribute, the Content-Type value determines the formatter for the ASP.NET Core MVC Framework to use for parameter binding.
Since your Content-Type is application/json, a raw JSON string and not a JSON object, should be passed as data. Hence, apply JSON.stringify.
See this reference: Parameter Binding Using [FromBody] Attribute

edited Nov 12, 2020 at 20:22

Jeremy Caney

7,808115 gold badges57 silver badges86 bronze badges

answered Nov 12, 2020 at 19:12

Felix

313 bronze badges

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

Comments

Suresh Kamrushi · Accepted Answer · 2020-02-21 09:26:27Z

0

I found below working:

    $.ajax({
        method: "POST",
        data: { "Name": "bob", "Price": 10},
        url: "@Url.Action("AddProduct", "Admin")",
        success: function (data) {
            //success login
        },
        error: function (data) {
            alert('error' + data.status);
        }
    });

no need to mention dataType and contentType in ajax call. And your controller will like below:

[HttpPost]
public ActionResult AddProduct(Product product)
{
    //You logic will be here
}

answered Feb 21, 2020 at 9:26

Suresh Kamrushi

16.2k13 gold badges79 silver badges93 bronze badges

Collectives™ on Stack Overflow

ASP.NET Core MVC posting a model to controller using ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related