Cannot access properties of model in javascript

Question

I have tried a few suggestions on here however did not seem to work, I cannot seem to access the properties of the model. This is what I have so far

var widgetModel = '@Html.Raw(Json.Encode(Model.widgets))';
                [].forEach.call(widgetModel, function (widget) {
                    var template = document.querySelector('#panel-template');
                    var panelTitle = template.querySelector('.panel-title');
                    panelTitle.textContent = widget.WidgetName;
                });

Here is the rendered widgetmodel http://gyazo.com/4a960969d9bedbd71efb1dac9b99c7e6

I have also tried to access it like this, however there doesn't seem to be any properties hanging off the widget variable.

for (var i = 0; i < widgetCount; i++) {
                        var widget = widget[i];
                        var template = document.querySelector('#panel-template');
                        var panelTitle = template.querySelector('.panel-title');
                        panelTitle.textContent = widget.WidgetName;
                    }

@Johnathon64, perhaps I am misunderstanding and my answer did not help. What do you mean cannot access model properties? After trying my suggestion, did you try console.log(widgetModel) to make sure it has data? — AmmarCSE, May 21 '15 at 12:03
Hi @AmmarCSE I can get the data, I know there is data being assigned to widgetModel, however I am unsure how to access the individual properties of that model e.g. WidgetID, WidgetName etc... — Johnathon64, May 21 '15 at 15:08
@AmmarCSE sorry it took so long to get back but here is the console output, http://gyazo.com/87a432a1527d2b99d33b45b76da11a8d — Johnathon64, May 24 '15 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 12:30

Mixing javascript and Razor requires that you surround your Razor call with any code block

@{ ... } or @if(condition){}, etc.

and putting the code itself in an escaped sequence

@: or the <text> tag.

So, knowing this, you can do something like

@{
        <text>
            var widgetModel = '@Html.Raw(Json.Encode(Model.widgets))';
        </text>
     }

See Mix Razor and Javascript code and Using Razor within JavaScript

Cannot access properties of model in javascript

1 Answers1

Linked