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

Nice Razor tricks to work with lists

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
Error rendering template

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
  • Look inside

    Content Item

    These are the values a content-editor can manage.
    Name Type Value


    Presentation Item

    These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

    No Presentation parameters specified, using default presentation for this item.


    Template file

    <div>
    	<h2>Category List unsorted</h2>
    	<div>Add more items to the list and see how it remains exactly as you added them</div>
    	<ul>
    	@foreach(var e in List) {
    		var Content = e.Content;
    
    		<li class="sc-element">
    			@Html.Raw(Content.Toolbar)
    			@Content.Category
    		</li>
    	}
    	</ul>
    </div>

    Look inside

    Content Item

    These are the values a content-editor can manage.
    Name Type Value


    Presentation Item

    These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

    No Presentation parameters specified, using default presentation for this item.


    Template file

    <div>
    	<h2>Category List sorted A-Z</h2>
    	<div>Add more items to the list and see how they are automatically sorted alphabetically</div>
    	<ul>
    	@foreach(var e in List.OrderBy(e => e.Content.Category)) {
    		var Content = e.Content;
    
    		<li class="sc-element">
    			@Html.Raw(Content.Toolbar)
    			@Content.Category
    		</li>
    	}
    	</ul>
    </div>

    Look inside

    Content Item

    These are the values a content-editor can manage.
    Name Type Value


    Presentation Item

    These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

    No Presentation parameters specified, using default presentation for this item.


    Template file

    <div>
    	<h2>@ListContent.Title@Html.Raw(ListContent.Toolbar)</h2>
    	<p>@Html.Raw(ListContent.Content)</p>
    	<!-- create this tag based on the ListType in the ListPresentation, it's either ol or ul -->
    	<@ListPresentation.ListType>
    	<!-- now sort, and only take the amount configured in the ListPresentation -->
    	@foreach(var e in (List.OrderBy(e => e.Content.Category)).Take((int)ListPresentation.MaxLength)) {
    		var Content = e.Content;
    
    		<li class="sc-element">
    			@Html.Raw(Content.Toolbar)
    			@Content.Category
    		</li>
    	}
    	</@ListPresentation.ListType>
    	@if(List.Count > ListPresentation.MaxLength) {
    		<p>Note: only showed @ListPresentation.MaxLength items, as configured.</p>
    	}
    </div>

    Look inside

    Content Item

    These are the values a content-editor can manage.
    Name Type Value


    Presentation Item

    These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

    No Presentation parameters specified, using default presentation for this item.


    Template file

    @{
    	int rowCounter = 0;
    }
    <div>
    	<h2>@ListContent.Title@Html.Raw(ListContent.Toolbar)</h2>
        <p>Note: to use this example, add a few items to see how the conditions affect the list. It currently demonstrates 3 tricks</p>
        <ol>
            <li>Adding the class "first" (purple) on the first item with the formula <br/> @@(rowCounter == 0 ? "first" : "") </li>
            <li>Add the classes "even" or "odd" (italic) for every item with the formula <br /> @@(rowCounter % 2 == 0 ? "even" : "odd") </li>
            <li>Add the classes "column1/2/3" (indent) for every item with the formula <br />column@@(rowCounter % 3 + 1)</li>
        </ol>
    	<p>@Html.Raw(ListContent.Content)</p>
    
    	@foreach(var e in (List.OrderBy(e => e.Content.Category))) {
    		var Content = e.Content;
    
    		<li class="sc-element @(rowCounter == 0 ? "first" : "") @(rowCounter % 2 == 0 ? "even" : "odd") column@(rowCounter % 3 + 1)">
    			@Html.Raw(Content.Toolbar)
    			@Content.Category
    		</li>
    		rowCounter++;
    	}
    </div>
    
    <!-- some style infos just to see that it works -->
    <style>
    .first { color:blueviolet }
    .column1 { margin-left: 000px }
    .column2 { margin-left: 200px }
    .column3 { margin-left: 400px }
    .odd { font-style: italic }
    .even {  }
    
    </style>
    2serve . 2invent . 2create is 2be.