Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  Tutorial - Razor Basics
< class="co--hide"> Simple Demos using @Razor (old tutorial)

When writing simple Razor-Templates the mechanism is almost the same as using Tokens (here you see the original Token-Samples).

  1. Instead of writing [Content:Title] you write @Content.Title.
  2. Other differences are that the Portal or User data sources are not @Portal and @User, but @Dnn.Portal and @Dnn.User. Below you'll find a bunch of very simple demos to get started. 
  3. When using a placeholder like src="@Dnn.Portal.HomeDirectoryContent/Images" then Razor doesn't know when the variable-name stops and when HTML starts. So the right way to do it is using src="@(Dnn.Portal.HomeDirectory)Content/Images"
  4. Remember also that Razor automatically encodes HTML to protect against accidental script injection. When you really want to show HTML (like from a WYSIWYG) you must use @Html.Raw(Content.Body) instead of @Content.Body.
  5. for the nice quick toolbar you need @Content.Toolbar

This is very simple content

This is very simple content
I'm just a short text to demo simple content with an image, so here's a bunch of lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet in sed nulla. Suspendisse molestie enim sapien, quis eleifend enim dictum eu. Phasellus tristique justo nec augue sagittis, vel ornare augue volutpat. Aliquam volutpat cursus est quis fermentum. Cras ac vestibulum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. In fringilla, diam nec aliquet porttitor, mi eros faucibus turpis, in molestie erat enim eget diam.
[Content:Title]

This is very simple content

Teaser text, clicking on more... will open the lightbox with more content.
More...
This is very simple contentI'm just a short text to demo simple content with an image, so here's a bunch of lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet in sed nulla. Suspendisse molestie enim sapien, quis eleifend enim dictum eu. Phasellus tristique justo nec augue sagittis, vel ornare augue volutpat. Aliquam volutpat cursus est quis fermentum. Cras ac vestibulum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. In fringilla, diam nec aliquet porttitor, mi eros faucibus turpis, in molestie erat enim eget diam.

This is very simple content

Teaser text, clicking on more... will open the lightbox with more content.
More...
I'm just a short text to demo simple content with an image, so here's a bunch of lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet in sed nulla. Suspendisse molestie enim sapien, quis eleifend enim dictum eu. Phasellus tristique justo nec augue sagittis, vel ornare augue volutpat. Aliquam volutpat cursus est quis fermentum. Cras ac vestibulum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. In fringilla, diam nec aliquet porttitor, mi eros faucibus turpis, in molestie erat enim eget diam.
Collapse

This is very simple content

Teaser text, clicking on more... will open the lightbox with more content.
More...
I'm just a short text to demo simple content with an image, so here's a bunch of lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet in sed nulla. Suspendisse molestie enim sapien, quis eleifend enim dictum eu. Phasellus tristique justo nec augue sagittis, vel ornare augue volutpat. Aliquam volutpat cursus est quis fermentum. Cras ac vestibulum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. In fringilla, diam nec aliquet porttitor, mi eros faucibus turpis, in molestie erat enim eget diam.

Example with if-statement

To understand what this does, click on look-inside. It basically demonstrates an if-statement which work like this

  •  @if( condition ) { what happens } else { what happens otherwise }

Note that between the { ... } it's not always clear whether your code is a variable or text which should be shown. When in doubt (or when you see errors) put some HTML around your output like <span>didn't find it</span>. If the html is undesirable, use <text>didn't find it</text> so that Razor knows that this is just output. the <text> won't be shown.

I found a link! it goes to http://www.2sic.com/

Example text-replace

This sample takes this text you see right here and replaces a part of it with the current year to pretend that it was just updated yesterday. So the content actually has a %yesterday% which will be replaced with yesterdays date.

This was updated on 3/18/2024

Example with a simple loop

Sometimes as a project grows, suddenly you get additional requirements which could be solved very easily. For example, assume your editor suddenly said he needs to be able to add 1 or 5 or even 27 links, but it should be very simple to do and he's not going to pay money, so you better find a quick-and-dirty solution. So you tell him "no problem, just add all the links in the link field and separate them with a comma, my script will do the rest". This is what this demo does.

More sophisticated versions might offer a multi-line field and add <br> tags after each line or anything :)

Example with a variable

This example would show a message if this text was more than 100 chars long.
note: message was 76 characters long
Error Showing Content - please login as admin for details.
2serve . 2invent . 2create is 2be.