Skip to main content

Razor Tutorial - Home (10.25.0)

How to use this Tutorial

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. You can also modify the source files and see what happens :)

Razor Basics

  1. Very Basics
    Basic use of Razor with variables, loops, conditions etc.
  2. Working with HTML
    Learn the difference of showing variables with @variable and @Html.Raw(variable), and re-using snippets with @helper
  3. Using Emojis / Emoticons 👍
    Show Emojis in your output or use them for showing true/false
  4. Reuse templates and code
    You can place common templates, hlp and functions into shared files - both .cshtml and .cs.

Working with Content & Data

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. Visualize current Content
    Show content which was entered for this module
  2. Visualize Data enhanced!
    Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
  3. Visualize JSON new!
    Easily work with JSON data.
  4. LINQ Examples
    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.

RazorBlade Examples

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

  1. RazorBlade - Making real tasks easier enhanced!
    Properly create preview-texts, strip HTML, pick the right variables, set page titles and way more. Includes...
    • Text manipulation, clean-up, cropping and ellipsis
    • Picking the ideal string-values
    • Html stripping for teasers and to protect against XSS
    • Convert html to text and back
    • Set page title, headers, keywords
    • Create SEO JSON-LD headers
    • Create social media Open-Graph headers
    • Create favicons, apple-icons, android icons and more (new!)
    • Add base-tags with the correct url (new!)
  2. RazorBlade - using the Html5 Tag API enhanced!
    The basics of creating html directly from code - new in 2.0 and enhanced in 2.1

Koi Examples

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

  1. Koi - Cool things with CSS-Frameworks and Classes
    Automatically 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.

WebApi 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 - Providing Data and more to JavaScript (new!)
    Provide data to SPAs and do things like sending mails, changing data and more.

Next Tutorials (Work-In-Progress

We'll create some more tutorials in March/April 2019, incl. the following

  • Linking around in dnn
  • Using js/css and image resources in the app folder
  • Using app settings and resources
  • Image Resizing on the server
  • Navigation links
  • Leveraging Connect.Koi
  • Permission examples
  • In-Page Editing experience
  • Customizing Search Results
  • Add multi-language examples
  • 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