Razor language preview

1. Razor page

directives, expressions, and markup

horizon-dark

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

atom-one-dark

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

github-dark

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

dracula

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

nord

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

github

@page "/products"
@model ProductsModel

<h1>@Model.Title</h1>

<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name — @product.Price</li>
    }
</ul>

2. Implicit if/else blocks

@if/@else with embedded markup, not just @{ } blocks

horizon-dark

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

atom-one-dark

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

github-dark

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

dracula

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

nord

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

github

@if (Model.IsActive)
{
    <p class="status-active">Active</p>
}
@else if (Model.IsPending)
{
    <p class="status-pending">Pending</p>
}
@else
{
    <p class="status-inactive">Inactive</p>
}

3. Code blocks and comments

@{ } blocks and @* *@ comments

horizon-dark

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

atom-one-dark

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

github-dark

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

dracula

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

nord

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

github

@* product summary section *@
@{
    var total = Model.Items.Count;
    var label = total == 1 ? "item" : "items";
}

<p>You have @total @label in your cart.</p>
<a href="/checkout">Checkout</a>

4. Nested code blocks

@code with nested braces, @(), and interpolated strings

horizon-dark

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>

atom-one-dark

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>

github-dark

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>

dracula

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>

nord

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>

github

@code {
    private int total = 0;

    private void Increment()
    {
        if (total < 10)
        {
            total += 1;
        }
    }
}

<p>Total: @(total * 2)</p>
<p>@($"Current value is {total}")</p>