Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  Tutorial - Razor Lists
< class="co--hide"> Nice Razor tricks to work with lists (old tutorial)

These demos can be tried and modified on your system!

Just install the Razor-Lists App from the catalog

Category List unsorted

Add more items to the list and see how it remains exactly as you added them
  • 2SexyContent

Category List sorted A-Z

Add more items to the list and see how they are automatically sorted alphabetically
  • 2SexyContent

This list is configurable

It has some intro-text and a title from the @ListContent, and some configuration from the @ListPresentation. Just add some data to see how it works, and edit the list-header/presentation to discover how you can change the OL-list to a UL-list. 

  1. 2SexyContent

List with examples of conditions...

Note: to use this example, add a few items to see how the conditions affect the list. It currently demonstrates 3 tricks

  1. Adding the class "first" (purple) on the first item with the formula
    @(rowCounter == 0 ? "first" : "")
  2. Add the classes "even" or "odd" (italic) for every item with the formula
    @(rowCounter % 2 == 0 ? "even" : "odd")
  3. Add the classes "column1/2/3" (indent) for every item with the formula
    column@(rowCounter % 3 + 1)

...so you can learn various tricks like special CSS-classes for the first item and stuff.

  • 2SexyContent
  • 2SexyContent
  • 2SexyContent
  • 2SexyContent
  • 2SexyContent
  • 2SexyContent
  • Error Showing Content - please login as admin for details.
    2serve . 2invent . 2create is 2be.