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

Simple Demos using @Razor

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/29/2017

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

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div class="BasicContentWithPreview sc-element">
	@Html.Raw(Content.Toolbar)
	<div class="c_DNN6 c_DNN6_Header">
		<h1 class="Title Purple"><span>@Content.Title</span></h1>
	</div>
	@Html.Raw(Content.Content)
	<div>
		@if(Content.Link != ""){
			<ol>
			@foreach(var link in Content.Link.Split(',')){
				<li><a href="@link.Trim()">@link</a></li>
			}
			</ol>
		}
	</div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

@{
	var ContentToShow = "Text is too long (more than 100 characters)";
	if(Content.Content.Length <= 100) {
		ContentToShow = Content.Content;
	}
}
<div class="BasicContentWithPreview sc-element">
	@Html.Raw(Content.Toolbar)
	<div class="c_DNN6 c_DNN6_Header">
		<h1 class="Title Purple"><span>@Content.Title</span></h1>
	</div>
	<div>
	@Html.Raw(ContentToShow)
	</div>
	<div>note: message was @Content.Content.Length characters long</div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div class="BasicContentWithPreview sc-element">
	@Html.Raw(Content.Toolbar)
	<div class="c_DNN6 c_DNN6_Header">
		<h1 class="Title Purple"><span>@Content.Title</span></h1>
	</div>
		@Html.Raw(Content.Content)
		@if(Content.Link == ""){
			<span>I didn't find a link!</span>
		}
		else
		{
		<span>I found a link! it goes to <a href="@Content.Link" target="_blank">@Content.Link</a></span>
		}
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div class="BasicContentWithPreview sc-element">
	@Html.Raw(Content.Toolbar)
	<div class="c_DNN6 c_DNN6_Header">
		<h1 class="Title Purple"><span>@Content.Title</span></h1>
	</div>
		@Html.Raw(Content.Content.Replace("%yesterday%", DateTime.Today.AddDays(-1).ToString("d")))
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String This is very simple content This is very simple content
Content System.String <span>I'm just a short text to demo simple content with an image, so here's a bunch of l</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet ... <span>I'm just a short text to demo simple content with an image, so here's a bunch of l</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum sit amet neque pharetra laoreet
Link System.String
Image System.String File:800 File:800
Teaser System.String Teaser text, clicking on more... will open the lightbox with more content. Teaser text, clicking on more... will open the lightbox with more content.


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div class="BasicContentWithSingleImage sc-element">
	@Content.Toolbar
	<div>
		<h1 class="Title Red">
			@Content.Title
		</h1>
	</div>
	<img class="PreviewImage" src="@Content.Image?w=454" alt="@Content.Title" style="float: left; margin: 0 25px 10px 0" />
	<div class="Content">
		@Html.Raw(Content.Content)
	</div>
</div>
<div style="clear:both;"></div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<link rel="Stylesheet" href="@App.Path/Assets/Styles.css" data-enableoptimizations="true" />
<script src="@App.Path/Assets/Scripts.js" data-enableoptimizations="true"></script>

<div class="BasicContentWithPreviewAndImage sc-element">
	@Content.Toolbar
	<img class="PreviewImage" src="@Content.Image?w=200" alt="[Content:Title]" />
		<h1 class="Title Grey">
			@Content.Title
		</h1>
	<div class="BasicPreviewContent">
		@Content.Teaser<br />
		<a href="javascript:void(0);" class="ExpandBasicContent">More...</a>
	</div>
	<div class="BasicContent" title="[Content:Title]">
		<img src="@Content.Image?w=400" alt="@Content.Title" />@Html.Raw(Content.Content)
	</div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<link rel="Stylesheet" href="@App.Path/Assets/Styles.css" data-enableoptimizations="true" />
<script src="@App.Path/Assets/Scripts.js" data-enableoptimizations="true"></script>

<div class="BasicContentWithPreview sc-element">
	@Content.Toolbar
		<h1 class="Title Red">
			@Content.Title
		</h1>
	<div class="BasicPreviewContent">
		@Content.Teaser<br />
		<a href="javascript:void(0);" class="ExpandBasicContent">More...</a>
	</div>
	<div class="BasicContent">
		@Html.Raw(Content.Content)<br />
		<a href="javascript:void(0);" class="CollapseBasicContent">Collapse</a>
	</div>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<link rel="Stylesheet" href="@App.Path/Assets/Styles.css" data-enableoptimizations="true" />
<script src="@App.Path/Assets/Scripts.js" data-enableoptimizations="true"></script>

<div class="BasicContentWithLightBox sc-element">
	@Content.Toolbar
		<h1 class="Title Grey">
			@Content.Title
		</h1>
	<div class="BasicPreviewContent">
		@Content.Teaser<br />
		<a href="javascript:void(0);" class="ExpandBasicContent">More...</a>
	</div>
	<div class="BasicContent" title="@Content.Title">
		@Html.Raw(Content.Content)
	</div>
</div>
2serve . 2invent . 2create is 2be.