MVC模型绑定无法按预期在AJAX请求中的复杂类型上正常工作

Question

I have a 'ViewModel' I want to pass to my action, and it looks like this:

public class MyClass
{
    public int Id { get; set; }
    public int MyNumber { get; set; }
}

public class RequestViewModel
{
    public List<MyClass> MyClasses { get; set; }
    public int AnotherNumber { get; set; }
}

In javascript, I define my data like so:

       var actionRequest = {
            MyClasses: [
                {
                    Id: 1,
                    MyNumber: 30
                },
                {
                    Id: 2,
                    MyNumber: 40,
                }
            ],
            AnotherNumber: 12
        };

I make the call:

    $.ajax({
        type: "Get",
        url: " /Controller/MyAction",
        data: actionRequest,
        dataType: "json",
        traditional: true,
        success: function (data) {
            // Good stuff
        },
        error: function (data) {
            // Bad stuff
        }
    });

My action's signature:

public ActionResult MyAction(RequestViewModel request)

On inspecting request (my action is successfully hit), AnotherNumber is populated whereas my collection of MyClass is null .

I'm missing something obvious here, I just don't know what.

EDIT

I really do appreciate the suggestions and answers so far but none (upto now) have worked, so for now I'm settling for:

public class RequestViewModel
{
    public int[] MyClassIds { get; set; }
    public int[] MyNumberValues { get; set; }
    public int AnotherNumber { get; set; }
}

It feels horrible doing this, but it's a project that has quite a bit of urgency behind it now so I have to go with what works.

Answer 1

try below code and put the name same as it is in controller as shown below :-

$.ajax({
        type: "POST",
        url: " /Controller/MyAction",
        data: :{ request : JSON.stringify(actionRequest) },
        dataType: "json",
        traditional: true,
        success: function (data) {
            // Good stuff
        },
        error: function (data) {
            // Bad stuff
        }
    });

and I would suggest try POST request put httpPost attribute above action method as shown below :-

[HttpPost]
public ActionResult MyAction(RequestViewModel request)

Answer 2

Try using JSON.stringify and modify data in ajax request as :

data:{ request : JSON.stringify(actionRequest) }

and add contentType: "application/json" in your ajax request.

---

OR Try This :

var request = {
        MyClasses: [
            {
                Id: 1,
                MyNumber: 30
            },
            {
                Id: 2,
                MyNumber: 40,
            }
        ],
        AnotherNumber: 12
    };

 request = JSON.stringify({ 'request': request });

now use data in ajax request this way :

data: request 

Answer 3

I'm not sure where the difference is and now I can't reproduce the error but this works for me.

public class MyClass
{
    public int Id { get; set; }
    public int MyNumber { get; set; }
}

public class RequestViewModel
{
    public List<MyClass> MyClasses { get; set; }
    public int AnotherNumber { get; set; }
}

[HttpPost]
public ActionResult Save(RequestViewModel actionRequestX)
{
        return null;
}

var actionRequest = {
        MyClasses: [
            {
                Id: 1,
                MyNumber: 30
            },
            {
                Id: 2,
                MyNumber: 40
            }
        ],
        AnotherNumber: 12
    };

    $.ajax({
    type: "POST",
    url: "/Home/Save",
    contentType: "application/json, charset=utf-8",
    data: JSON.stringify({ actionRequestX: actionRequest }),
    dataType: "json",
    traditional: true,
    success: function (data) {
        // Good stuff
    },
    error: function (data) {
        // Bad stuff
    }
});
});