How can I pass an array of objects through jQuery load in MVC 3?

Question

I am not looking to use the ajax jQuery method. I would like to use the .load() method for a div. Here's what my javascript method looks like:

function PartialViewLoadArray(aName, aValue, aGuid, aName2, aValue2, aGuid2) {

    modelArray = [];

    modelArray.push({ Name: aName, Value: aValue, Guid: aGuid });
    modelArray.push({ Name: aName2, Value: aValue2, Guid: aGuid2 });

    $('#examplediv').load(
        '/Example/PartialByModelArray/',
        { ModelArray: modelArray },
        function () {
            alert('the load has completed!');
        }
    );
}

Here is the action on the controller:

public PartialViewResult PartialByModelArray(ExamplePartialArrayModel aModel)
{
    return PartialView("_ExamplePartialByArray", aModel);
}

My array model:

public class ExamplePartialArrayModel
{
    public ExamplePartialModel[] ModelArray { get; set; }
}

The model contained in the above model:

public class ExamplePartialModel
{
    private string _Name;
    private int? _Value;
    private string _Guid;

    public string Name
    {
        get { return this._Name; }
        set { this._Name = value; }
    }

    public int? Value
    {
        get { return this._Value; }
        set { this._Value = value; }
    }

    public string Guid
    {
        get { return this._Guid; }
        set { this._Guid = value; }
    }
}

I know I can get this div to load the content if I render the partial view manually using the context and a stringwriter, etc, but it seems to me as though I should be able to get this load() statement to work. Why isn't MVC picking this data up? What is EXTREMELY odd is that when I set a breakpoint on the first line of my action it's showing me two items in the array--but all their properties are null. How can it determine the amount of items in the array but not bind their values? What is going on? I am mystified.

Joel Mitchell · Accepted Answer · 2012-11-13 01:05:00Z

2

The problem is that the data is being posted as form data and jquery does this in a format that the default model binder can't understand. In my test I used fiddler to see that the data came through in this format:

ModelArray[0][Name]  : name1
ModelArray[0][Value] : value1
ModelArray[0][Guid]  : guid1
ModelArray[1][Name]  : name2
ModelArray[1][Value] : value2
ModelArray[1][Guid]  : guid2

The easiest way to fix this is to post the data in json format:

function PartialViewLoadArray(aName, aValue, aGuid, aName2, aValue2, aGuid2) {
    var modelArray = [];

    modelArray.push({ Name: aName, Value: aValue, Guid: aGuid });
    modelArray.push({ Name: aName2, Value: aValue2, Guid: aGuid2 });

    $.ajax({
        type: 'POST',
        url: '/home/PartialByModelArray/',
        contentType: 'application/json',
        data: { ModelArray: modelArray },
        success: function (response) {
            $('#examplediv').replaceWith(response);
        }
    });
}

Note that this code used the json2 library to encode the json data and your controller action should be marked with the [HttpPost] attribute.

I'm not sure why you don't want to use the ajax method, but you could also look at finding a way to encode the form data into a more mvc friendly format or write a custom model binder, but that all seems like a lot more effort. This post explains the issue a bit more and might give you some ideas.

edited Nov 13, 2012 at 1:05

answered Nov 13, 2012 at 0:54

Joel Mitchell

9651 gold badge7 silver badges19 bronze badges

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

1 Comment

John Doe Over a year ago

I was just relatively sure that I could use the load function to accomplish this without the more extensive code required by the ajax method. It looks like what you have will work, but thank you for the response. Using load is often easy, but JSON is somewhat confounding for someone used to a tightly typed language. Thank you!

Collectives™ on Stack Overflow

How can I pass an array of objects through jQuery load in MVC 3?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related