Below you'll find a list of topics this tutorial covers. The easiest way to work with it is to look at an example, then look at the code shown below the examples.
Create variables and show using @variableName
@variableName
if/else and ternary operator (condition ? true : false)
(condition ? true : false)
Loops using for() and foreach()
for()
foreach()
Learn the difference of showing variables with @variable and @Html.Raw(variable), and re-use very simple snippets
@variable
@Html.Raw(variable)
Show Emojis in your output or use them for showing true/false
Use compiler Preprocessor Directives to enable Hybrid Razor
Learn how to use Link.To(...) to link to specific pages or to link to the same page with certain URL parameters.
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()
Link.To()
Working difficult URLs like images containing umlauts
You can place common templates, hlp and functions into shared files - both .cshtml and .cs. And you can split Razor files into code and templates.You can place common templates, hlp and functions into shared files - both .cshtml and .cs. And you can split Razor files into code and templates.
.cshtml
.cs
Explains the basics of re-using code across templates and code files.
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.
@Html.Partial
CreateInstance
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.
Now you can split out complicated C# code so designers don't have to worry about it.
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 JSON-LD (Linked Data) headers for Google
Add Open-Graph data headers for Facebook, Twitter and other sharing-systems
To enable Hybrid Razor which works on Dnn and Oqtane, we need standards so that our Dynamic Code can access information about the page, module etc.
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
Access App-Data directly or from an App-Query. Learn to query the data in C# using LINQ and work with SQL and JSON
Overview about all the basics like Data vs. App.Data, App.Data.Query etc.
Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
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.
The following examples show how to use LINQ (Language INtegrated Query) to sort, filter and group data. This is for quick work in your views - for more extensive querying, we recommend the Visual Query Designer.
Learn the basics of Images, Image Resizing and Pictures.
<img>
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>
srcset
Give each screen the best possible picture based on resolution and format using srcset and <picture>
<picture>
Learn the newest best practices using the image service
Imagine controlling web resources/features in central management. No duplicate loading, full control!
These examples help you quickly do hard stuff, once you've mastered the basics above
Properly create preview-texts, strip HTML, pick the right variables, set page titles and way more.
Helpers to get the non-empty string, get parts of a specific string, trim-to-ellipsis and more.
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
Clean out tags, remove specific attributes, replace <br> with new-lines etc.
<br>
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
2sxc 12 introduces the new PageService which also works in Oqtane 💧. We suggest you use that instead. 👉 See Razor Page Service
PageService
Working with attributes in your code to stay error-free
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
Automatically add the Bootstrap4 CSS package from a CDN, if the current theme does not include Bootstrap4 already, but skip it if it's already included.
Automatically add the Bootstrap4 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.
Add custom UI logic to your edit forms with formulas.
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.