Razor Tutorial - Home (14.12.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.
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.
- Variables
Create variables and show using @variableName
- Conditions
if/else and ternary operator (condition ? true : false)
- Loops
Loops using for()
and foreach()
- 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: Re-Use 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.
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.
Basics: Set Page Title, Keywords etc. and Headers
Use the IPageService to set page properties, base tags and headers - even JsonLD and OpenGraph.
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.
- CmsContext.Platform – Dnn/Oqtane, Version etc.
- CmsContext.Culture – Current Language etc.
- CmsContext.Site – Name, URL etc.
- CmsContext.Page – Id, Parameters, etc.
- CmsContext.Module – ID, etc.
- CmsContext.User – ID, Permissions, etc.
- CmsContext.View – ID, Identifier, Edition, Name, etc.
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.
Images, Automatic Resizing and Responsive Pictures
Learn the basics of Images, Image Resizing and Pictures.
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
Data: Work with Data - Entities, SQL, CSV and more
Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
Data: Linq
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.
Data: Json
Easily work with JSON data.
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.
Advanced Settings and Automation
RazorBlade Tutorials
These examples help you quickly do hard stuff, once you've mastered the basics above
RazorBlade Examples for Text Manipulations
Helpers to get the non-empty string, get parts of a specific string, trim-to-ellipsis and more.
RazorBlade for Manipulating Html Strings
Clean out tags, remove specific attributes, replace <br>
with new-lines etc.
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
RazorBlade Fluent Html5 API
RazorBlade 3 contains over 130 objects with hundreds of properties so you can quickly generate Html5 tags correctly and safely.
RazorBlade Basic API to Generate Safe Attributes
Koi Tutorials
These examples help you do cool stuff, once you've mastered the basics above
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.
JavaScript
2sxc offers powerful helpers to just get things done - or to do things your way.
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.
Customize Edit UI / UX
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.
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
Next Tutorials (Work-In-Progress)
We'll create some more tutorials in 2022, incl. the following
- 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