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.

Answer 1

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.