Passing a viewmodel object to a jquery variable

Question

I need to access the members of viewmodel object in a javascript function and have tried to do this by assigning it to a jscript variable like this:

var teamEdit = (function() {
                return {
                    communityGroups: '@Model.CommunityGroups'
                }
            });


$(function() {
....
 var groups = teamEdit.communityGroups;

Unfortunately the groups variable comes out as undefined even though 'CommunityGroups' is defintely populated. (checked by debugging controller)

Answer 1

@Model.CommunityGroups would simply call ToString() that would emit something like "System.Collections.Generic.List`1[CommunityGroup]".

You need to serialize it to JSON instead:

communityGroups: @Html.Raw(Json.Encode(Model.CommunityGroups))