Assigning the Model to a Javascript variable in Razor

Question

I have a strongly-typed view bound to an object which contains a Collection (list) of some objects. I know Razor gets executed on the server-side when it's generating the page, whereas Javascript variables don't get instantiated until after the page is displayed... but would it somehow be possible to convert the Model (that the view is bound to) or any of its fields to JSON in Razor without resorting to an AJAX call to fetch that data afterwards?

You know, something like...

var myJavascriptVariable = @Model.MyCollection

where @Model.MyCollection is a list of some objects.

Thanks

Solution 1

To get json data you can use the following construction:

var jsData = @Html.Raw(Json.Encode(Model.MyCollection));

Solution 2

Try this, with this you can have the unobtrusive javascript:

HTML (Razor):

<script id="data" type="text/data-template">
@Html.Raw(Json.Encode(Model.MyCollection))
</script>

JS (you can user this in external file):

var
   jsonString = $('#data').html(),
   jsonValue = (new Function( "return( " + jsonString + " );" ))();

Example

HTML:

<script id="data" type="text/data-template">
    { 'name': 'Pedro', 'Age': 33}
</script>
<div id="result"></div>

JS​

var
   jsonString = $('#data').html(),
    jsonValue = (new Function( "return( " + jsonString + " );" ))();

$('#result').html(jsonValue.name);

​