Question

I am trying to get model binding with MVC3 and JSON working but I have had no luck… No matter what I do I seem to be getting a null model on the server.

Method Signature:

public ActionResult FilterReports(DealSummaryComparisonViewModel model)

Javascript UPDATED:

<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        $('#filter-reports').click(filterReports);
    });

    function filterReports() {
        var filters = {
            SelectedRtoId: $('#SelectedRtoId').val(),
            SelectedPricingPointId: $('#SelectedPricingPointId').val(),
            SelectedLoadTypeId: $('#SelectedLoadTypeId').val(),
            SelectedBlockId: $('#SelectedBlockId').val(),
            SelectedRevisionStatusId: $('#SelectedRevisionStatusId').val()
        }
        var dealSummaries = { SelectedItemIds: $('#SelectedItemIds').val() }
        var model = { ReportingFilters: filters, DealSummaries: dealSummaries }

        $('#selected-items select option').attr("selected", "selected");
        $.ajax({
            url: '@Url.Action("FilterReports")',
            data: model,
            contentType: 'application/json',
            dataType: 'json',
            success: function (data) {
                alert(data);
            }
        }); 
    }
</script>

Models:

public class DealSummaryComparisonViewModel
{
    public ReportingFiltersViewModel ReportingFilters { get; set; }
    public LadderListViewModel DealSummaries { get; set; }
}

public class LadderListViewModel
{
    public MultiSelectList AvailableItems { get; set; }

    public int[] SelectedItemIds { get; set; }
    public MultiSelectList SelectedItems { get; set; }
}

public class ReportingFiltersViewModel
{
    public int? SelectedRtoId { get; set; }
    public ICollection<Rto> Rtos { get; set; }

    public int? SelectedPricingPointId { get; set; }
    public ICollection<PricingPoint> PricingPoints { get; set; }

    public int? SelectedLoadTypeId { get; set; }
    public ICollection<LoadType> LoadTypes { get; set; }

    public int? SelectedBlockId { get; set; }
    public ICollection<Block> Blocks { get; set; }

    public int? SelectedRevisionStatusId { get; set; }
    public ICollection<RevisionStatus> RevisionStatuses { get; set; }

    public bool? DealStatus { get; set; }
}

The model looks fine on the client side:

{"ReportingFilters":{
    "SelectedRtoId":"5",
    "SelectedPricingPointId":"20",
    "SelectedLoadTypeId":"55",
    "SelectedBlockId":"21",
    "SelectedRevisionStatusId":"11" 
},"DealSummaries":{
    "SelectedItemIds":["21","22","23","24","25"] 
}}

So why am I getting nothing back on the controller? This has been giving me trouble for the past two days so please help! Thanks!!

UPDATE
I’ve updated my javascript section to what I am currently using. This section now returns the model to the controller with the ReportingFilers and DealSummaries objects, but all values within are null.

Does it possibly have something to do with the values being strings? If so, how can I fix this?

Answer 1

Change your $.getJSON line to:

$.ajax({ 
   url: '@Url.Action("FilterReports")',
   data: JSON.stringify(viewModel),
   contentType: 'application/json',
   dataType: 'json',
   success: function (data) { alert(data); }
});

This way MVC knows that it is receiving JSON and will bind it to your model correctly.