Razor Tutorial - Home (12.4)
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 :)
- Very Basics
Basic use of Razor with variables, loops, conditions etc.
- Work with HTML
Learn the difference of showing variables with
@Html.Raw(variable), and re-use very simple snippets
- Using Emojis / Emoticons 👍
Show Emojis in your output or use them for showing true/false
- Reuse templates and code
You can place common templates, hlp and functions into shared files - both
.cs. And you can split Razor files into code and templates.
- Set Page Title, Keywords etc. and Headers new in v12
Use the IPageService to set page properties, base tags and headers - even JsonLD and OpenGraph.
- Hybrid Razor for Dnn and Oqtane new in v12
Advanced way to create Razor which works on Dnn and Oqtane
Work with Content, Data & Settings 🆕
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.
- 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.
- Visualize current Content
Show content which was entered for this module
- Visualize Data
Show data from DNN, the current App, DataSources or SQL, CSV etc. Also includes list/details (parent/child) examples.
- Visualize JSON
Easily work with JSON data.
- 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.
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.
- Using multiple languages
Everything in 2sxc can be multi-language. Discover how!
Advanced Settings and Automation
- Use Settings 🆕 new in v12
Work with settings on View/App/Site/System.
- Automatically Resize Images based on Presets 🆕 new in v12
Link.Image generates resize-links with centrally managed sizes / rules.
- 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!
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 the Edit Experience
Customize the editor experience by providing great toolbars or custom input fields
These examples help you quickly do hard stuff, once you've mastered the basics above
- RazorBlade - Making real tasks easier
Properly create preview-texts, strip HTML, pick the right variables, set page titles and way more. Includes...
RazorBlade - using the Html5 Tag API
- 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
The basics of creating html directly from code - new in 2.0 and enhanced in 2.1
These examples help you do cool stuff, once you've mastered the basics above
- Koi - Cool things with CSS-Frameworks and Classes enhanced for v12
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.
Provide data to SPAs and do things like sending mails, changing data and more.
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
- 2sxc Advanced Stuff
Really special crazy stuff
Next Tutorials (Work-In-Progress
We'll create some more tutorials in March/April 2019, incl. the following
- UI Formulas
- 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
- 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