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
– AmmarCSE, Commented May 21, 2015 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
– Johnathon64, Commented May 21, 2015 at 15:08

Community · Accepted Answer · 2017-05-23 12:30:07Z

1

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered May 21, 2015 at 10:16

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot access properties of model in javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related