Oqtane Tutorials
Oqtane Tutorials

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. Quick Reference for all APIs 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. Basic set variable and show

    Create variables and show using @variableName

  2. Razor Conditions such as if, if-else and ? :

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

  3. Loops - for and foreach

    Loops using for() and foreach()

  4. Work with HTML Output

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

  5. Working with 😃 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.

  1. Reuse Code and Razor Templates

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

  2. Code - Function and Similar Helpers

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

  3. Reuse Shared Templates with Html.Partial and MyModel

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

  4. Use Shared C# Code

    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 Page URL Parameters

    Working with text URL Parameters like ?sort=ascending

  2. Linking with Number Url Parameters

    Working with number URL Parameters like ?id=27

  3. Linking with Modified Page Parameters

    Learn how to create links using current URL parameters

  4. Switch to view by URL

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

  5. Safely Linking URLs with Umlauts and similar

    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. Set Open-Graph headers for Social Media using the IPageService

    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. 

  1. Work with the Context (Page, Site, etc.)
    Whenever you need to know about the current environment, you need  Context information. These are the contexts you should know about: Platform Site Page Module View User

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

  2. Working with Block Contents

    Show content which was entered for this module

Images, Automatic Resizing and Responsive Pictures

Learn the basics of Images, Image Resizing and Pictures.

  1. The <img> Tag and Different Image Formats

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

  2. The Link.Image(...) Helper

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

  3. Resize with Reusable Settings

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

  4. Resize using Presets and Global Settings

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

  5. Merge image settings

    Merge presets with custom settings.

  6. Best-Possible Image for Every Screen & Device

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

  7. Browser-Capabilities picture with different formats

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

  8. Best practices using the Image Service

    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. Going all Multilanguage / i18n

    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. Working with Data

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

  2. Basic Example from 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.

  1. Basic List Details using Code

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

  2. Basic List Details using Code - with separate Details-File

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

  3. List Details using Automatic View-Switching

    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 using Automatic View-Switching and Query

    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. Look at the Content-Type of something (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. Example from CSV

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

  2. Various SQL Samples

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

  3. Use DNN APIs to get DNN Data
    DNN also provides a lot of data about users, pages etc. In this example, we'll list all the pages (tabs) in DNN and mark the one we're on. Please note that the DNN API isn't very consistent - so sometimes things use  ID , sometimes  Id , so best…

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. LINQ Basics

    Learn to use LINQ in your code.

  2. LINQ Relationships - Children, Parents, Grandchildren, ...

    Combine LINQ with navigating Children and Parents of related data.

Data: JSON

Easily work with JSON data.

  1. Working with JSON Data

    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. Data Sources Tutorial - use in C# / Razor Code

    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. Dynamic DataSources Tutorial

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

  2. Use Dynamic DataSources in Visual Query

    Dynamic DataSources can also be used in VisualQuery.

  3. Custom Dynamic DataSources - Data Relationships

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

Advanced Settings and Automation

  1. Settings in 2sxc
    Settings allow your code to use predefined settings across all apps and sites. And they allow you to overide a setting at any level of the application. You can read more about the settings in the docs 📕 .
  2. Use PageService.Activate Features like JS/CSS
    2sxc 12.04 helps with many advanced challenges like these: Make sure that certain scripts are only loaded once (like jQuery or FancyBox) Make sure that all apps use the same version of these scripts Starting things in the right order

RazorBlade and Koi

RazorBlade Tutorials

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

  1. RazorBlade Tutorials - Introduction

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

  2. RazorBlade Text Operations
    RazorBlade helps with many helper functions to optimize working with string variables, also when they contain html. 
  3. Scrub HTML Strings (Remove HTML Tags)
    These demos show how to strip all html from a string. You often need this in combination with  crop or ellipsis  to create teasers.

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. RazorBlade Basic Html5 Tag API Introduction v3.0

    The basics of creating html directly from code

  2. RazorBlade Fluent Tag API @Tag.Img().Src(...) and Srcset(...) v3

    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
  1. Use Koi to Adjust to the Page CSS Framework
    Learn how to use Connect.Koi to ensure your module/template has the right CSS frameworks, to either auto-include otherwise, show messages to the admin or generate different output. This uses  Connect.Koi . Some notes before we start Koi works like…

JavaScript, turnOn, WebAPIs / REST

JavaScript

2sxc offers powerful helpers to just get things done - or to do things your way.
  1. Use the 2sxc JS API to get Data

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

  2. Use the sxc data API to create/edit/delete data

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

  3. Use the sxc data API to create metadata

    Use the 2sxc data API and create new metadata

turnOn

Use the turnOn feature to execute Javascript functions from Razor files
  1. turnOn Tutorial
    Learn how to execute JavaScript functions using the 2sxc turnOn. Extend basic usage by passing data, awaiting conditions and more.

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. WebAPI and REST - Introduction

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

  2. WebAPI Basics: Call WebAPIs and REST using JavaScript

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

  3. WebApi with Polymorph Editions

    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. App.Data WebApi Examples

    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.

  1. 2sxc Toolbar Customization
    Since you can do so many things customizing the toolbar, we created a bunch of small examples for you. Note that we are basically providing a list of commands how the toolbar should be modified.
  2. Advanced Toolbar Customizations

Customize Edit UI - Fields

Create custom input fields and customize WYSIWYG to your needs. 

  1. 2sxc Custom Input Fields (11.02+)
    2sxc 11 makes it very easy to create custom input fields using standard  WebComponents . This example shows the most basic case - just a dummy message (so not a real input field). You can use it to learn about things like: Naming conventions for…

Customize Edit-UI - Formulas (new!)

Add custom UI logic to your edit forms with formulas.

  1. Get Started with Formulas

    Create Your First Formulas, affect Values and more.

  2. Formulas for Pickers / DropDowns

    Change what options are available in a DropDown

  3. Formulas affecting Field Settings

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

  4. Formulas affecting Groups of Fields

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

  5. Formulas using Parameters new v16

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

  6. Advanced Formula APIs 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. Hybrid Razor - Code which Runs on Dnn and Oqtane

    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