Inner objects not being populated in MVC controller call

Question

I have an object declared in my javascript which I would like to send to my controller. The object is of type VMInterface which looks like:

public class VMInterface
{
    public string Name { get; set; }
    public int SourceID { get; set; }
    public int ProjectID { get; set; }
    public string Description { get; set; }
    public VMConnection VMConnection { get; set; }
    public List<VMInteraction> Interactions { get; set; }

}

public class VMConnection
{
    public string Username { get; set; }
    public string Password { get; set; }
    public string Connection { get; set; }
}

public class VMInteraction
{
    public string Name { get; set; }
    public List<VMField> Fields { get; set; }
}

public class VMField
{
    public string InputOutput { get; set; }
    public string Name { get; set; }
    public int DataTypeID { get; set; }
}

My controller:

[HttpGet]
public JsonResult UpdateVM(VMInterface vm)
{
    return null;
}

My call to the controller:

$.ajax({
    url: '/Admin/UpdateVM',
    type: 'GET',
    data: {
        Name: "Test Name",
        Description: "Test Desc",
        SourceID: 1,
        ProjectID: 4,
        VMConnection: {
            Connection: "IPAddress goes here",
            Username: "Username",
            Password: "Password"
        },
        Interactions: [{
            Name: "Method",
            Fields: [{
                InputOutput: "INPUT OR OUTPUT HERE",
                Name: "DROP LOCATION HERE",
                DataTypeID: 1
            }],

        }]
    },
    success: function (response) {
        //Do nothing
    }
});

I have double checked that all the field names match up and that the properties inside my VMInterface class are all public with { get; set; }. My call is hitting my controller ok and all of the top level (ei Name, Description, SourceID and ProjectID) fields map correctly. However for my VMConnection and Interactions field the information is not being populated.

Is there anything I'm missing to get these mapped correctly?

You need to stringify the data - data: JSON.stringify{ vm: data } and set contentType: 'application/json', or alternatively name the properties to match your model using dot notation e.g. VMConnection.Connection: 'IPAddress goes here' and `Interactions[0].Name: 'Method' etc — user3559349
– user3559349, Commented Dec 2, 2016 at 10:22
Thank you for your comment, unfortunately neither of them worked. The 1st method returned null for everything and the 2nd method threw errors in Visual Studio — Novastorm
– Novastorm, Commented Dec 2, 2016 at 10:28
Method 1: your missing the { vm: yourData } as per my comment — user3559349
– user3559349, Commented Dec 2, 2016 at 10:35

user3559349 · Accepted Answer · 2016-12-02 11:27:52Z

Because your sending data to a GET method, the values must be generated as as a query string which means the the name/value pairs must match you model structure. The property name needs to be in the same dot notation that you would use to access the property in the server.

If you wanted to get the value of InputOutput in the first VMField of the first VMInteraction in your POST method, you would use

var value = vm.Interactions[0].Fields[0].InputOutput

Since the name of the parameter is vm, just strip that prefix and that is how you data needs to be, so you ajax call would be

$.ajax({
    ....
    data: {
        Name: "Test Name",
        Description: "Test Desc",
        ....
        VMConnection.Connection: "IPAddress goes here",
        VMConnection.Username: "Username",
        ....
        Interactions[0].Name: "Method",
        Interactions[0].Fields[0].InputOutput: "INPUT OR OUTPUT HERE",
        ....
    },

Note that this will create an ugly query string, and there is a risk that you could exceed the query string limit and throw an exception, so using type: 'Post', and marking the method [HttpPost] would be more appropriate.

The other alternative is to use your javascript object as it is, stringify it, and send it as contentType: 'application/json'. This means that it must be a POST, since as GET has no body. Your ajax call will then be

$.ajax({
    url: '/Admin/UpdateVM',
    type: 'Post', // must be a post
    contentType: 'application/json;charset=utf-8', // set contentType
    data: JSON.stringify(vm : { // stringify the data
        Name: "Test Name",
        Description: "Test Desc",
        SourceID: 1,
        ProjectID: 4,
        VMConnection: {
            Connection: "IPAddress goes here",
            Username: "Username",
            Password: "Password"
        },
        Interactions: [{
            Name: "Method",
            Fields: [{
                InputOutput: "INPUT OR OUTPUT HERE",
                Name: "DROP LOCATION HERE",
                DataTypeID: 1
            }],

        }]
    }}),

and change the method to be [HttpPost]

Great answer, really thoroughly explained! Thank you so much

Anadi · Accepted Answer · 2016-12-02 11:24:56Z

Try Like this.

Action Method:(HttpGet to HttpPost)

 [HttpPost]
 public JsonResult UpdateVM(VMInterface vm)
 {
       return null;
 }

Javascript:

  var myData = {
            Name: "Test Name",
            Description: "Test Desc",
            SourceID: 1,
            ProjectID: 4,
            VMConnection: {
                Connection: "IPAddress goes here",
                Username: "Username",
                Password: "Password"
            },
            Interactions: [{
                Name: "Method",
                Fields: [{
                    InputOutput: "INPUT OR OUTPUT HERE",
                    Name: "DROP LOCATION HERE",
                    DataTypeID: 1
                }],

            }]
        }

  $.ajax({
            url: '/Admin/UpdateVM',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            data: JSON.stringify(myData),                   
            success: function (response) {
                //Do nothing
            }
        });

It's working fine !!!!!!!

Collectives™ on Stack Overflow

Inner objects not being populated in MVC controller call

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related