Skip to main content
Home  › ... Razor

Razor Tutorial - Home (17.10.0)

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

Quick Summary of most APIs for reference. This is still WIP...

  1. new v16

    2sxc Quick Reference for Razor using the new Typed API.

Razor Basics

Learn how to use variables and loops, encode HTML, use 🚀😁💪 Emojis. Also advanced stuff like re-using code or setting page titles and SEO stuff.


  1. Create variables and show using @variableName


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


  3. Loops using for() and foreach()


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


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


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


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


  3. Reuse Razor files by calling them using @Html.Partial and passing parameters in DynamicModel (or  MyModel).


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

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. 


  1. Working with text URL Parameters like ?sort=ascending


  2. Working with number URL Parameters like ?id=27


  3. Learn how to create links using current URL parameters


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


  5. Working difficult URLs like images containing umlauts

Basics: Set Page Title, Keywords etc. and Headers

Use the IPageService to set page properties, base tags and headers - even JsonLD and OpenGraph.

  1. Set Page Title, Keywords, Descriptions etc.

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

  2. Set <base> tag in header

    Add a <base> tag to the header. This is important for SPA JS applications.

  3. Page Icons for Favicon, Apple/Android

    Add various combinations of icons to the page header

  4. Meta and other Tags in header

    Add all kinds of meta-tags to the header. 

  5. JSON-LD Headers for SEO

    Add JSON-LD (Linked Data) headers for Google


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

In most cases a template will run in a context - so something prepared data for the template, which should now be visualized. These examples assume you're working with 2sxc, which lets editors work with content - and your template only needs to visualize it.

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


  2. Show content which was entered for this module

Images, Automatic Resizing and Responsive Pictures

Learn the basics of Images, Image Resizing and Pictures.


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


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


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


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


  5. Merge presets with custom settings.


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


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


  8. Learn the newest best practices using the image service

Multi-Language Content and Resources (i18n) 🌐

2sxc is super-powerful with multiple languages. It's actually one of the best multi-language solutions in all known CMS solutions out there.

  1. Everything in 2sxc can be multi-language. Discover how!

Replace Content Placeholders using TemplateService (new 🌟)

  1. Template Service Tutorials new 🌟

    Learn how to use the new Template Service.

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


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


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


  1. List-Details Example where a single Razor-file has the code for both the list and the details.


  2. List-Details Example where a Razor-file has the code for retrieving other Razor files for list and details. 


  3. List-Details Example where the View-Configuration is setup to use a different Razor if a URL-parameter is given for the details. 


  4. List-Details Example where the View-Configuration is setup to use a different Razor if a URL-parameter is given for the details. In this case it will use a Query to then get the details-data.

  5. (advanced)

    Use some internal APIs to look at the definition of a Content-Type.

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.


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


  2. Use SQL in Queries or in Code to get more data.


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.


  1. Learn to use LINQ in your code.


  2. Combine LINQ with navigating Children and Parents of related data.

Data: JSON

Easily work with JSON data.


  1. Easily convert JSON into usable objects in C#

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


  1. How to use DataSources directly in your Razor / C# Code.

DataSources: Create Custom Dynamic DataSources

Create custom DataSources directly in the App DataSources folder.


  1. Learn about DataSources in general, before we start using or even creating them.


  2. Dynamic DataSources can also be used in VisualQuery.


  3. Create Data with Relationships to other Data - such as parent/child or tree / folder structures

Advanced Settings and Automation



RazorBlade and Koi

RazorBlade Tutorials

These examples help you quickly do hard stuff, once you've mastered the basics above


  1. Properly create preview-texts, strip HTML, pick the right variables, set page titles and way more. 



RazorBlade Fluent Html5 API

RazorBlade 3 contains over 130 objects with hundreds of properties so you can quickly generate Html5 tags correctly and safely.

  1. The basics of creating html directly from code


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

Koi Tutorials

These examples help you do cool stuff, once you've mastered the basics above

JavaScript, turnOn, WebAPIs / REST

JavaScript

2sxc offers powerful helpers to just get things done - or to do things your way.

  1. Use the 2sxc data API and get data of a specific Content-Type


  2. Use the 2sxc data API and create, update, delete data


  3. Use the 2sxc data API and create new metadata

turnOn

Use the turnOn feature to execute Javascript functions from Razor files

WebApi / JSON Endpoints Examples

These examples show how to create and use WebApi. This isn't Razor, but also uses C#. You'll often need this when creating JavaScript and SPA apps.

  1. Provide data to SPAs and do things like sending mails, changing data and more.


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


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


  4. Basic example reading App Data.

Edit UI and Formulas

Customize Edit UI / UX - Toolbars

Sometimes you want to customize what the editor will experience - using special toolbars or custom input fields. Note that this only applies to 2sxc.



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.


  1. Create Your First Formulas, affect Values and more.


  2. Change what options are available in a DropDown


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


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

  5. new v16

    Create formulas which modify the form using parameters or App Settings (new v16)

  6. new v16

    Do advanced things such as checking features or the current user.

Advanced / Other

Hybrid - Advanced Scenarios for Razor on Dnn AND Oqtane

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. 


  1. Detect the platform in various ways and adjust what your code does. 

Crazy 2sxc Advanced Examples

These are really advanced examples and meant more to give guidance for specific questions. Don't worry if you don't understand these
  1. Inspect a Content-Block
    In this example, we'll see what content-blocks are in the system, and where they are in use.

Future Tutorials (Work-In-Progress)

  1. Linking around in dnn
  2. Navigation links
  3. Permission examples
  4. Work with icon-fonts, font-awesome etc.
  5. Using data from other apps
  6. Customizing Search Results
  7. Customizing search from data