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.
Basic

Quick Reference for Razor APIs (WIP = Work in Progress)
Quick Summary of most APIs for reference. This is still WIP...
- Dynamic Razor Code - Quick Reference
For Razor12 and Razor14
- Pro Razor Code - Quick Reference new v16
For the new base class Custom.Hybrid.RazorPro

Razor Basics
- Variables
Create variables and show using
@variableName
- Conditions
if/else and ternary operator
(condition ? true : false)
- Loops
Loops using
for()
andforeach()
- Work with HTML
Learn the difference of showing variables with
@variable
and@Html.Raw(variable)
, and re-use very simple snippets - Using Emojis / Emoticons π
Show Emojis in your output or use them for showing true/false

Basics: Reuse Code and Templates Across Files
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.
- Introduction Reuse templates and code
Explains the basics of re-using code across templates and code files.
- Create functions in your Razor
Normal C# functions are the basic block for reusing code.
- Template-Delegate Helpers - Razor-Style Functions
Shows how to create simple functions which use the classic Razor-style syntax.
- Razor Components with @Html.Partial and DynamicModel/MyModel
Reuse Razor files by calling them using
@Html.Partial
and passing parameters in DynamicModel (or MyModel). - Reuse Razor Helpers (mini-templates) with
CreateInstance
Use a shared razor file to hold multiple functions / helpers, and call them one-by-one as needed.
- Reuse a function library CreateInstance
Reuse a
.cs
file with shared functions usingCreateInstance
- Advanced code reuse with .cs files
Advanced uses of CreateInstance to share code across Razor files and WebApi Controllers.

Basics: Link between Pages and Views
Learn how to use Link.To(...) to link to specific pages or to link to the same page with certain URL parameters.
- URL Parameters (text)
Working with text URL Parameters like ?sort=ascending
- URL Parameters (number)
Working with number URL Parameters like ?id=27
- Preserve Parameters
Learn how to create links using current URL parameters
- View Switch
Learn how to switch between views using
Link.To()
- Working with difficult URLs
Working difficult URLs like images containing umlauts

Basics: Set Page Title, Keywords etc. and Headers
- Page Title, Keyword, Description
Get/Set Page Title, Keywords, Description and set meta-tags and more.
- Base tag in header
Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.
- Page Icons for Favicon, Apple/Android
Add various combinations of icons to the page header
- Meta and other Tags in header
Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.
- JSON-LD Headers for SEO
Add JSON-LD (Linked Data) headers for Google
- Open-Graph headers for Social Media
Add Open-Graph data headers for Facebook, Twitter and other sharing-systems

Basics: Get Information about Site, Page, User, etc.
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.
Content and Images
Show Content and Data Entities on a Page
- Working with Entity (Item) Values
Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.
- Show current Content in the Output
Show content which was entered for this module
Images, Automatic Resizing and Responsive Pictures
Learn the basics of Images, Image Resizing and Pictures.
- Introduction to the
<img>
Tag and Image formatsBasics of showing images in HTML and understand JPG vs. PNG vs. WebP.
- Resize and Crop Images on the Server
Learn to use the built-in Image-Resizer to create perfect images no matter what the editor adds in the CMS.
- Resize using Resize-Settings
Store all the resize-parameters in a variable for re-use.
- Resize and Crop using Global Presets
Site-wide and App-Wide Presets help to resize with the same settings everywhere.
- Resize combining Presets with Custom Resize-Settings
Merge presets with custom settings.
- Responsive Server-Side Images (img) for real pros!
Professional sites give each screen the best possible picture using
srcset
and<img>
- Responsive and optimal Server-Side Images (picture) for real pros!
Give each screen the best possible picture based on resolution and format using
srcset
and<picture>
- Leverage the picture tag to the fullest
Learn the newest best practices using the image service
Multi-Language Content and Resources (i18n) π
- Using multiple languages Everything in 2sxc can be multi-language. Discover how!
Data and DataSources
Data
Access App-Data directly or from an App-Query. Learn to query the data in C# using LINQ and work with SQL and JSON
- Introduction to Data
Overview about all the basics like Data vs. App.Data, Query etc.
- Data from the App using App.Data
Get any kind of data from the current App.
Data: List-Details Samples
Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
Data: Work with Data from Queries - Entities, SQL, CSV and more
Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
- Use a Query with App Data
Get data from a prepared query on the App.
- Use Query to get CSV Data
See an example how to use a Query to get Data from a CSV file as data source.
- Use Query to get CSV Data from a File Configured in Settings
Get gata from a CSV file - which is configurable.
- Use App Query to get SQL Data
- SQL data from a Query with Params
- Query with Params - Run multiple times
Data: LINQ (Language Integrated Query)
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.
- Introduction to LINQ
- Basic looking for something with Where(...) and Any(...)
- Get First() / Last() item in a list
- Take() / Skip() items in a list
- Count() items in a list
- Basic sorting of lists
- Get Authors of Books (sub-items) to show and for sorting
- Group books by authors in 3 ways
- Access a list in list in list
- Go backwards - find Books pointing to Authors with Parents(...)
Data: JSON
Easily work with JSON data.
DataSources: Use in C# Code
DataSources will usually be used in a VisualQuery, but you can also use them in C# for advanced scenarios. Learn about the Kit.Data API
- Get DataSources in Code - Introduction new v16
Overview about using DataSources directly in your code.
- Get DataSources in Code - Basics new v16
Use Kit.Data.GetSource() and more to get DataSource objects and work with them.
- Use DataSources in Code - Attach/Connect Multiple Sources new v16
We can use one or more DataSources as In data for another DataSource.
- Use DataSource in Code - GetQuery new v16
Queries are also just another DataSource. Discover how to use GetQuery()
DataSources: Create Custom Dynamic DataSources
Create custom DataSources directly in the App DataSources folder.
- Dynamic DataSources Overview new v16
Learn about DataSources in general, before we start using or even creating them.
- Dynamic DataSources - Basics new v16
Create custom, dynamic data sources directly in the App folder, without compiling to a DLL.
- Return Lists of Items new v16
This sample is more realistic, returning many items.
- Configuration of DataSources new v16
Learn how to create DataSources which can be configured.
- Process In (attached) Data new v16
Create DataSources which receive data and filter them before providing them on Out.
- Provide Multiple Lists/Streams new v16
Create DataSources which have multiple Out-Streams.
- Use Data from other DataSources new v16
Your DataSource can also create other DataSources internally to get data.
- Use in Visual Query new v16
Dynamic DataSources can also be used in VisualQuery.
- Relationships between Data Items new 16.01
Create Data with Relationships to other Data - such as parent/child or tree / folder structures
- Conversion Factory Options new v16
Customize how the Data in a Dynamic DataSource is Converted.
Data: External Data using .net APIs
Show data using .net APIs or DNN APIs
Advanced Settings and Automation
- Read Global/Site/App/View Settings using the Settings object π new in v12
- Deep dive into the Settings stack π new in v12
- Use PageService.Activate to enable features, Css and Js π new in v12
Imagine controlling web resources/features in central management. No duplicate loading, full control!
RazorBlade and Koi

RazorBlade Tutorials
These examples help you quickly do hard stuff, once you've mastered the basics above
- RazorBlade Introduction - Making real tasks easier
Properly create preview-texts, strip HTML, pick the right variables, set page titles and way more.

RazorBlade Examples for Text Manipulations
Helpers to get the non-empty string, get parts of a specific string, trim-to-ellipsis and more.
- RazorBlade - Text.Crop() and Text.Ellipsis()
Correctly crop text without splitting words or html-characters like &
- RazorBlade - Text.Has() tells you if something really has content
Check if strings really have something correctly, incl. spaces or even whitespaces.
- RazorBlade - Text.First() lets you pick a value from many variables RB 3.00
Often you have to check many variables to find the first one to use.
- RazorBlade - Text.Zip() lets you shrink all spaces, tabs, enters together
Very often you need to clean up some text before working with it.
- Razorblade - Text.After(), Text.AfterLast(), Text.Before(), Text.BeforeLast(), Text.Between() RB 3.09 / 2sxc 13.02
Choose where to split text and retrieve the optimal form

RazorBlade for Manipulating Html Strings
Clean out tags, remove specific attributes, replace <br>
with new-lines etc.
- Convert
<br>
tags to new-lines or just spaces - and also the other way around RB 1.00A common challenge is showing text as HTML or the other way around
- Use Scrub to Remove All or Specific HTML Tags RB 3.09 / 2sxc 13.02
Remove html from a string - important for teaser texts and protecting against cross-site-scripting attacks.
- Use Scrub to remove Tag-Attributes, Classes, Styles or whatever you need RB 3.09 / 2sxc 13.02
Clean out all kinds of HTML attributes

RazorBlade Examples for Modifying DNN Page Headers
2sxc 12 introduces the new PageService
which also works in Oqtane π§. We suggest you use that instead. π See Razor Page Service
- Page Title, Keyword, Description v1.01
Get/Set Page Title, Keywords, Description and set meta-tags and more.
- Base tag in header v3.00
Add a base tag to the header - which works correctly in DNN. Important for SPA JS applications.
- JSON-LD Headers for SEO v1.01
Add JSON-LD (Linked Data) headers for Google
- Open-Graph headers for Social Media v1.01
Add Open-Graph data headers for Facebook, Twitter and other sharing-systems
- Page Icons for Favicon, Apple/Android v2.01
Add various combinations of icons to the page header

RazorBlade Fluent Html5 API
- RazorBlade - using the Html5 Tag API The basics of creating html directly from code - new in 2.0 and enhanced in 2.1
- Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc. new! v3.00
The basics of creating html directly from code
- Common Attributes (Id, Title, Class, Style) with SmartJoin new! v3.00
Some attributes can be added, others replace the previous content. The attributes are super smart π‘
- Images with Unsafe URLs (Umlauts etc.) new! v3.00
The API automatically fixes unsafe URLs like Umlauts, japanese characters etc. - SuperSmart π
- Picture Tags for various sizes / resolutions new! v3.00
Here's an example how to easily generate picture tags, which are the future of Images
- Start and End Tags new! v3.00
In some cases you may want to just get the start or end-tag.
- Create custom (non Html5) tags or Tags whose name stems from a variable new! v3.00
Working with tags in your code to stay error-free and do amazing stuff

RazorBlade Basic API to Generate Safe Attributes
- Safe Html5 Attributes from code new! v3.00
Working with attributes in your code to stay error-free
- Json Html5 Attributes from code new! v3.00
Working with attributes in your code to stay error-free

Koi Tutorials
- Introduction - Koi - Cool things with CSS-Frameworks and Classes enhanced for v12Automatically include missing frameworks, conditionally modify the HTML or CSS-Classes and more, depending on what CSS-framework is used by the theme of this page.
- Koi - Auto-Add Bootstrap5 if missing
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.
- Koi - Auto-Add Bootstrap5 but inform Admin
Automatically add the Bootstrap5 CSS package from a CDN (same as above), but also show a warning to admins that this happened.
- Koi - Switch between template files new!
Automatically switch between Bootstrap3 and Bootstrap4 templates.
JavaScript, turnOn, WebAPIs / REST
JavaScript
- Get Data from the Backend using JS Use the 2sxc data API and get data of a specific Content-Type
- Get a Query from the Backend using JS Use the 2sxc data API and get data from a Query
- Add Parameters to Query from the Backend using JS Use the 2sxc data API and get data from a Query using Parameters
- Create data, update and delete using JS APIs Use the 2sxc data API and create, update, delete data
- Create Metadata using JS APIs Use the 2sxc data API and create new metadata
turnOn
- Execute JavaScript with turnOn new in v12Use the turnOn feature to execute Javascript functions from Razor files
- Basic turnOn usage and activation
Activate turn-on and execute local JavaScript functions
- Passing parameters with turnOn
Pass parameters to JavaScript functions with turnOn
- Passing module parameters with turnOn
Pass module parameters to JavaScript functions with turnOn
- Passing anonymous objects as parameters with turnOn
Pass anonymous object to JavaScript functions with turnOn
- Wait for multiple scripts
Await a library before executing JavaScript functions
- Await custom conditions through functions
Await custom conditions before executing JavaScript functions
- Await system scripts
Await a system script before executing JavaScript functions
WebApi / JSON Endpoints Examples
- Introduction to WebApi Provide data to SPAs and do things like sending mails, changing data and more.
- WebApi - Very basic examples
Creating the simplest possible hello WebApi and a Square(number) Api.
- WebApi - Basic example with CSRF protection
This is almost the same as the simplest WebApi, but with additional Cross-Site-Request protection.
- WebApi - Basic example using all HTTP methods
This is almost the same as the simplest WebApi, but with more methods.
- WebApi - Bare Metal for custom requests
Advanced use cases where you need the url/headers but will do the request yourself.
- WebApi Polymorph - basic examples
Basic example showing the same API in a live and staging editior, so you can develop while the users still use the sable one.
- WebApi App.Data - basic examples
Basic example reading App Data.
- WebApi Query - basic examples
Basic example reading App Query.
- Basic Hybrid WebApi
Basic example reading App Data.
Edit UI and Formulas
Customize Edit UI / UX - Toolbars
- Introduction Toolbars Customize the editor experience by providing great toolbars or custom input fields
- Customize Toolbars
- Customize Toolbars Workflows (new β)
- Call Toolbars Commands from JavaScript (new β)
Customize Edit UI - Fields
Create custom input fields and customize WYSIWYG to your needs.
Customize Edit-UI - Formulas (new!)
Add custom UI logic to your edit forms with formulas.
- Getting Started with Formulas
Create Your First Formula
- Value Formulas
Formulas affecting the Value of a Field
- Formulas for DropDowns
Change what options are available in a DropDown
- Formulas for Field-Settings
Formulas affecting Settings such as Required, Collapsed, Disabled, etc.
- Formulas for Field-Groups
Modify Groups - auto-collapse based on rules, change help texts etc.
- Formulas with parameters or App Settings new v16
Create formulas which modify the form using parameters or App Settings (new v16)
- Formulas using REST or WebApi Calls new!
Collection of previous samples, just all these using REST or WebApi.
- Advanced Formula API new v16
Do advanced things such as checking features or the current user.
Advanced / Other

Advanced Scenarios for Hybrid (Dnn / Oqtane) Razor
Most Razor is identical for DNN and Oqtane, but in some cases you wish to access platform specific objects or use certain features which require different code in Dnn and Oqtane. Here's how to switch between such code.

Crazy 2sxc Advanced Examples

Next Tutorials (Work-In-Progress)
We'll create some more tutorials in 2022, incl. the following- Typed.IsEmpty / IsNotEmpty
- Typed.ContainsKey / Typed.Keys()
- Typed.Mock
- ---
- UI Formulas
- Linking around in dnn
- Using js/css and image resources in the app folder
- Using app settings and resources
- Navigation links
- Leveraging Connect.Koi
- Permission examples
- In-Page Editing experience
- Customizing Search Results
- Work with icon-fonts, font-awesome etc.
- More data examples, working with users, SQL-write, PetaPoco etc.
- Working with DataSources in all kinds of ways
- Using data from other apps
- Customizing search from data
- Custom dynamic WebApi