Razor Tutorial - Home (14.12.0)

Create variables and show using @variableName

if/else and ternary operator (condition ? true : false)

Loops using for() and foreach()

Learn the difference of showing variables with @variable and @Html.Raw(variable), and re-use very simple snippets

Explains the basics of re-using code across templates and code files. 

Normal C# functions are the basic block for reusing code. 

Shows how to create simple functions which use the classic Razor-style syntax.

Reuse Razor files by calling them using @Html.Partial and passing parameters in DynamicModel.

Use a shared razor file to hold multiple functions / helpers, and call them one-by-one as needed. 

Reuse a .cs file with shared functions using CreateInstance

Advanced uses of CreateInstance to share code across Razor files and WebApi Controllers.

Working with text URL Parameters like ?sort=ascending

Working with number URL Parameters like ?id=27

Learn how to create links using current URL parameters

Learn how to switch between views using Link.To()

Working difficult URLs like images containing umlauts

Get/Set Page Title, Keywords, Description and set meta-tags and more.

Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.

Add various combinations of icons to the page header

Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.

Add JSON-LD (Linked Data) headers for Google

Add Open-Graph data headers for Facebook, Twitter and other sharing-systems

Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.

Show content which was entered for this module

Basics of showing images in HTML and understand JPG vs. PNG vs. WebP.

Learn to use the built-in Image-Resizer to create perfect images no matter what the editor adds in the CMS.

Store all the resize-parameters in a variable for re-use.

Site-wide and App-Wide Presets help to resize with the same settings everywhere.

Merge presets with custom settings.

Professional sites give each screen the best possible picture using srcset and <img>

Give each screen the best possible picture based on resolution and format using srcset and <picture>

Learn the newest best practices using the image service

Overview about all the basics like Data vs. App.Data, App.Data.Query etc.

Get any kind of data from the current App.

Get data from a prepared query on the App.

See an example how to use a Query to get Data from a CSV file as data source.

Get gata from a CSV file - which is configurable.

Imagine controlling web resources/features in central management. No duplicate loading, full control!

Correctly crop text without splitting words or html-characters like &

Check if strings really have something correctly, incl. spaces or even   whitespaces.

Often you have to check many variables to find the first one to use.

Very often you need to clean up some text before working with it.

Choose where to split text and retrieve the optimal form

A common challenge is showing text as HTML or the other way around

Remove html from a string - important for teaser texts and protecting against cross-site-scripting attacks.

Clean out all kinds of HTML attributes

Get/Set Page Title, Keywords, Description and set meta-tags and more.

Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.

Add JSON-LD (Linked Data) headers for Google

Add Open-Graph data headers for Facebook, Twitter and other sharing-systems

Add various combinations of icons to the page header

The basics of creating html directly from code

Some attributes can be added, others replace the previous content. The attributes are super smart 💡

The API automatically fixes unsafe URLs like Umlauts, japanese characters etc. - SuperSmart 😎

Here's an example how to easily generate picture tags, which are the future of Images

In some cases you may want to just get the start or end-tag.

Working with tags in your code to stay error-free and do amazing stuff

Working with attributes in your code to stay error-free

Working with attributes in your code to stay error-free

Automatically add the Bootstrap5 CSS package from a CDN, if the current theme does not include Bootstrap5 already, but skip it if it's already included.

Automatically add the Bootstrap5 CSS package from a CDN (same as above), but also show a warning to admins that this happened.

Automatically switch between Bootstrap3 and Bootstrap4 templates.

Activate turn-on and execute local JavaScript functions

Pass parameters to JavaScript functions with turnOn

Pass module parameters to JavaScript functions with turnOn

Pass anonymous object to JavaScript functions with turnOn

Await a library before executing JavaScript functions

Await custom conditions before executing JavaScript functions

Await a system script before executing JavaScript functions

Creating the simplest possible hello WebApi and a Square(number) Api.

This is almost the same as the simplest WebApi, but with additional Cross-Site-Request protection.

This is almost the same as the simplest WebApi, but with more methods.

Advanced use cases where you need the url/headers but will do the request yourself.

Basic example showing the same API in a live and staging editior, so you can develop while the users still use the sable one.

Basic example reading App Data.

Basic example reading App Query.

Basic example reading App Data.

Create Your First Formula

Formulas affecting the Value of a Field

Change what options are available in a DropDown

Formulas affecting Settings such as Required, Collapsed, Disabled, etc.

Modify Groups - auto-collapse based on rules, change help texts etc. 

Create formulas using page parameters

Collection of previous samples, just all these using REST or WebApi.