Question

I have a bit of code where I’m trying to send a Viewmodel back to the controller using Ajax post. If I write the code one way, it passes correctly, and another way it returns null or 0 values within the viewmodel.

The way that works:

$(document).ready(function () {
        $(".boxItem").change(function (event) {
            var url = "/Search/GetBoxChangeInfo";
            $.post(url, @Html.Raw(Json.Encode(Model)), function (data) {
                $("#column-1").html(data);
            });
        });
    });

And the way that returns null values:

$(document).ready(function () {
        $(".boxItem").change(function (event) {
            var url = "/Search/GetBoxChangeInfo";
            $.post(url, { json: @Html.Raw(Json.Encode(Model)) }, function (data) {
                $("#column-1").html(data);
            });
        });
    });

i need to use it the second way because I need to also pass parameters back about the selected value and ID, so it will look something like:

$(document).ready(function () {
        $(".boxItem").change(function (event) {
            var str = $(this).attr('id');
            var num = $(this).val();
            var url = "/Search/GetBoxChangeInfo";
            $.post(url, { json: @Html.Raw(Json.Encode(Model)), id : str, selected : num  }, function (data) {
                $("#column-1").html(data);
            });
        });
});

My controller looks like this btw:

[HttpPost]
public ActionResult GetBoxChangeInfo(EventViewModel json)
{ 
     //stuff
}

EDIT – as requested, here is EventViewModel structure

[JsonObject(MemberSerialization.OptIn)]
public class EventViewModel
{
    public int EventNumber { get; set; }
    public List<EventItemsViewModel> EventItems { get; set; }
    public List<LocationViewModel> Locations { get; set; }
    public int StartLocationID { get; set; }
    public bool Outbound { get; set; }
    public List<int> SelectedEvents { get; set; }
    public List<DurationsViewModel> Durations { get; set; }
}

Anyone know why this might be happening? Is there a limit to home much can be sent to the controller this way – it is quite a complex viewmodel, so wondered if that could be someting to do with it.

Thanks

Answer 1

Like this:

$(document).ready(function () {
    $('.boxItem').change(function (event) {
        var str = $(this).attr('id');
        var num = $(this).val();
        var url = '@Url.Action("GetBoxChangeInfo", "Search")';
        $.ajax({
            url: url,
            contentType: 'application/json',
            data: JSON.stringify({ 
                json: @Html.Raw(Json.Encode(Model)), 
                id: str, 
                selected: num  
            }),
            success: function(data) {
                $("#column-1").html(data);
            }
        });
    });
});

Things to notice:

• contentType: 'application/json'
• JSON.stringify to convert the object into a JSON string
• var url = '@Url.Action("GetBoxChangeInfo", "Search")'; to avoid hardcoding urls