How to send json object to the Controller JsonResult Method

Question

I need to pass a JSON object that can have many elements, I tried it with the following code:

var app = new Vue({
   el: '#crearMetaCompuesta',
   data: {
      inputmin: 0,
      inputmax: 0,
      inputres: 0,
      rangos_creados: [{
         min: 1,
         max: 2,
         result: 3
      }]
   },
   methods: {
      additem: function() {

         let nuevoItem = {
            min: this.inputmin,
            max: this.inputmax,
            result: this.inputres,

         }

         this.rangos_creados.push(nuevoItem);
      },
      guardarMetaCompuesta: function() {

         console.log(JSON.stringify(this.rangos_creados));

         axios.post('@Url.Action("GuardarMetaCompuesta")', {
               msg: JSON.stringify(app.rangos_creados),
               id: 7
            }, {
               headers: {
                  'contentType': 'application/json; charset=utf-8'
               }
            }).then(function(response) {
               alert(response);
               console.log("--------->" + JSON.stringify(app.rangos_creados));
            })
            .catch(function(e) {
               console.log("---------> |" + e);
            });
      }
   }
})

the JSONResult Method:

public class MetasCompuestasClass{
    public string min { get; set; }
    public string max { get; set; }
    public string result { get; set; }
}


public JsonResult GuardarMetaCompuesta(MetasCompuestasClass msg, int id) {
  //here I put a breakpoint but the variable arrives null
    var x = 1;
    return Json(new { result = false, message = msg }, JsonRequestBehavior.AllowGet);
}

but the msg variable always arrives null.

How should I send the object or what 'headers' should I place so that the variable does not arrive null and I can save the elements of type MetasCompuestasClass?

I did it, even the variable 'id' also assigned an element of the instance, 'id' arrives correctly, 'msg' keeps coming null, I print it before sending it to make sure that no null is sent from JavaScript { msg: JSON.stringify(this.rangos_creados), id: this.inputres } — Andress Blend
– Andress Blend, Commented Mar 13, 2019 at 13:45
No, I meant stringify the whole object, not just msg. Like this: axios.post('@Url.Action("GuardarMetaCompuesta")', JSON.stringify({ msg: this.rangos_creados, id: 7 }),... Otherwise msg will be a string and won't be casted to MetasCompuestasClass. — adiga
– adiga, Commented Mar 13, 2019 at 13:46
is improving, 'msg' has arrived as a variable of type 'MetasCompuestasClass', however its elements are arriving null, 'min', 'max' and 'result' — Andress Blend
– Andress Blend, Commented Mar 13, 2019 at 13:54

Topher · Accepted Answer · 2019-03-13 13:54:43Z

2

It looks like your rangos_creados object is an array, and you're expecting a single object in your Action.

Try with the Action signature like this:

public JsonResult GuardarMetaCompuesta(List<MetasCompuestasClass> msg, int id) {

Or, if you didn't mean to make that an array because you're always only passing one item to the api action, change rangos_creados declaration to an object, and map the nuevoItem properties to it, or just update the rangos_creados with the values instead of using nuevoItem and don't push it into the collection anymore. But that Depends on what you're trying to do.

answered Mar 13, 2019 at 13:54

Topher

1,02911 silver badges20 bronze badges

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

2 Comments

Andress Blend Over a year ago

this worked for me, thanks !, also changing the way to form the json: axios.post('@Url.Action("GuardarMetaCompuesta")', JSON.stringify({ msg: app.rangos_creados})

Topher Over a year ago

Great, glad to have helped.

MattB · Accepted Answer · 2019-03-13 13:39:16Z

0

It looks like you're sending app. instead of this.

JSON.stringify(app.rangos_creados) vs. JSON.stringify(this.rangos_creados)

Keep in mind that this may be a different context in this scenario.

answered Mar 13, 2019 at 13:39

MattB

1,1048 silver badges15 bronze badges

2 Comments

Andress Blend Over a year ago

I've already tried it that way, but it does not work either :/

MattB Over a year ago

Can you monitor the network tab of developer tools and see what is being posted? If msg is missing or empty, that would point to the JavaScript.

Collectives™ on Stack Overflow

How to send json object to the Controller JsonResult Method

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related