I've been building with Umbraco for a while now, but admittedly at a pretty novice level, so please forgive me if this ends up being a really obvious answer!
Currently if I want to pass data over to my JS I use either data attributes or hidden divs. That's fine for a variable here and there, but I find myself having to put complex objects in there too and end up with rendered HTML that's very dense, exposes all data, and I guess is potentially slower?
There's got to be better way! A custom API? Am I finally going to have to learn how to MVC?
I'm got no problem going off and teaching myself whatever I need to learn, I'm just struggling to work out what it is I need to study!
Yes! This is exactly what I need, I'm surprised I hadn't found that page in the documentation, I really should stop researching things half awake in the middle of the night!
Thanks Matt
Following on from using data- attributes, often to create less friction between frontend and backend devs, we'll use a Global object for page-level data.
Where the pageData would be some sort of key/value pairs, e.g. a Dictionary<string, object> or JObject. Sometimes it'd be stored a Request.Item to collect data between partial-views, etc. Like most things in Umbraco, there's a gazillion ways to do it.
Note, I generally put the Html.Raw/JsonConvert bits in an extension method, only to hide the ugliness away.
All that said, there's nothing wrong with the WebApi approach, just mentioning how I'd been tackling it when working with frontend devs. e.g. they put everything they need in the Global object, and I swap it out later.
Passing data to JavaScript
Hiya,
I've been building with Umbraco for a while now, but admittedly at a pretty novice level, so please forgive me if this ends up being a really obvious answer!
Currently if I want to pass data over to my JS I use either data attributes or hidden divs. That's fine for a variable here and there, but I find myself having to put complex objects in there too and end up with rendered HTML that's very dense, exposes all data, and I guess is potentially slower?
There's got to be better way! A custom API? Am I finally going to have to learn how to MVC?
I'm got no problem going off and teaching myself whatever I need to learn, I'm just struggling to work out what it is I need to study!
Hi Tim,
Sounds like you want a Web API, so you can call it from your JS and return a JSON object (or whatever you want/ need).
Umbraco does have some documentation on them here - https://our.umbraco.com/documentation/Reference/Routing/WebApi/
Hopefully this is enough to get you started :)
Good luck and keep learning
Matt
Yes! This is exactly what I need, I'm surprised I hadn't found that page in the documentation, I really should stop researching things half awake in the middle of the night! Thanks Matt
Following on from using
data-attributes, often to create less friction between frontend and backend devs, we'll use a Global object for page-level data.Apologies if I'm teaching anyone to suck eggs.
e.g. at the bottom of the page, we'd have.
The Razor would be something like this...
Where the
pageDatawould be some sort of key/value pairs, e.g. aDictionary<string, object>orJObject. Sometimes it'd be stored aRequest.Itemto collect data between partial-views, etc. Like most things in Umbraco, there's a gazillion ways to do it.All that said, there's nothing wrong with the WebApi approach, just mentioning how I'd been tackling it when working with frontend devs. e.g. they put everything they need in the Global object, and I swap it out later.
Cheers,
- Lee
is working on a reply...