Oqtane Tutorials
Oqtane Tutorials

Razor Basics Tutorials

Tutorial Home › Razor Basics
Basic set variable and show
#2 Razor Conditions such as if, if-else and ? :
Loops - for and foreach
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Strong-Typed (2sxc 17.06+) Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)
Resources

Razor Conditions such as if, if-else and ? :

⬇️ Result | Source ➡️

it's green 
@inherits Custom.Hybrid.RazorTyped

@{
  var aValue = "green";
}
@if (aValue == "green") {
  <span>it's green </span>
}

⬇️ Result | Source ➡️

it's blue 
@inherits Custom.Hybrid.RazorTyped

@{
  var val2 = "blue";
}
@if (val2 == "green") {
  <span>it's green </span>
} else {
  <span>it's blue</span>
}

This is important, if you have an code block like an if, and you don't want a span-tag or similar in the output

⬇️ Result | Source ➡️

it's not pink 
@inherits Custom.Hybrid.RazorTyped

@{
  var val4 = "orange";
}
@if (val4 != "pink") {
  <text>it's not pink</text>
}

⬇️ Result | Source ➡️

it's not red 
@inherits Custom.Hybrid.RazorTyped

@{
  var val3 = "blue";
}
@(val3 == "red" ? "it's red" : "it's not red")

⬇️ Result | Source ➡️

Day of week: Thursday
It's a workday

It's a workday

@inherits Custom.Hybrid.RazorTyped

@{
  var dayOfWeek = DateTime.Now.DayOfWeek;
  var message = "";
  // use switch to show workdays and weekend
  switch (dayOfWeek)
  {
    case DayOfWeek.Monday:
    case DayOfWeek.Tuesday:
    case DayOfWeek.Wednesday:
    case DayOfWeek.Thursday:
    case DayOfWeek.Friday:
      message = "It's a workday";
      break;
    case DayOfWeek.Saturday:
    case DayOfWeek.Sunday:
      message = "It's the weekend";
      break;
  }
}
Day of week: @dayOfWeek
<br>
@message


@switch (dayOfWeek)
{
  case DayOfWeek.Monday:
    <p>It's a tough workday 💪🏾</p>
    break;
  case DayOfWeek.Tuesday:
  case DayOfWeek.Wednesday:
  case DayOfWeek.Thursday:
    <p>It's a workday</p>
    break;
  case DayOfWeek.Friday:
    <p>It's the best workday 🏖️</p>
    break;
  case DayOfWeek.Saturday:
  case DayOfWeek.Sunday:
    <p>It's the weekend 🥳</p>
    break;
}

⬇️ Result | Source ➡️

Day of week: Thursday
It's a workday 
@inherits Custom.Hybrid.RazorTyped
@using AppCode
@{
  var dayOfWeek = DateTime.Now.DayOfWeek;
  var message = dayOfWeek switch {
    DayOfWeek.Monday => "It's a tough workday 💪🏾",
    DayOfWeek.Tuesday => "It's a workday",
    DayOfWeek.Wednesday => "It's a workday",
    DayOfWeek.Thursday => "It's a workday",
    DayOfWeek.Friday => "It's the best workday 🏖️",
    DayOfWeek.Saturday => "It's the weekend 🥳",
    DayOfWeek.Sunday => "It's the weekend 🥳",
    _ => "Invalid day"
  };
}
Day of week: @dayOfWeek
<br>
@message

⬇️ Result | Source ➡️

Title: Title not provided 
@inherits Custom.Hybrid.RazorTyped

@{
  // Let's assume you have a property to which you don't know if it was set or not
  // so it will be null in this example
  var title = MyModel.String("Title", required: false)
    ?? "Title not provided";
}
Title: @title

This requires C# 8 to work, so you must have

  1. Dnn: 2sxc 17 with the CodeDom and inherits from RazorTyped or newer and have a @using AppCode (to force-use the latest compiler with C# 8)
  2. Oqtane: Should always work

⬇️ Result | Source ➡️

Title: Title not provided
Title after change: My Title 
@inherits Custom.Hybrid.RazorTyped
@using AppCode
@functions {
  private string Title
  {
    // null coalescing assignment operator (??=) 
    // this will assign a value to _title if it has not been set yet
    get => _title ??= "Title not provided";
    set => _title = value;
  }
  private string _title;
}
Title: @Title
@{
  // now change the title
  Title = "My Title";
}
<br>
Title after change: @Title

 

Basic set variable and show
#2 Razor Conditions such as if, if-else and ? :
Loops - for and foreach