Razor Components

Razor Components is an ASP.NET Core library that allows you to write UI components while maintaining compatibility with Razor Pages and MVC.

Installation

Install the NuGet package

dotnet add package Projektanker.RazorComponents

Razor Components works by using tag helpers.
As with all tag helpers, you will need to go to the _ViewImports.cshtml file and add a reference to the package's and your project's namespace like so:

@addTagHelper *, Projektanker.RazorComponents
@addTagHelper *, Sample.Web

Usage

Basic usage without child content

Given folder structure:

~/Views/Components
  - HelloWorld.cshtml
  - HelloWorld.cshtml.cs

HelloWorld.cshtml.cs:

namespace Sample.Web.Views.Components;

[HtmlTargetElement("HelloWorld")]
public class HelloWorld : RazorComponentTagHelper
{
    public string Greeting { get; set; } = string.Empty;
}

HelloWorld.cshtml:

@using Sample.Web.Views.Components
@model HelloWorld
<p>
  <strong>@Model.Greeting</strong> World
</p>

You would use it like this:

<HelloWorld greeting="Hello" />

Basic usage with single child content

Given folder structure:

~/Views/Components
  - Button.cshtml
  - Button.cshtml.cs

Button.cshtml.cs:

namespace Sample.Web.Views.Components;

[HtmlTargetElement("Button")]
public class Button : RazorComponentTagHelper
{
}

Button.cshtml:

@using Sample.Web.Views.Components
@model Button
<button class="btn btn-primary">
  <slot model="@Model" />
</button>

You would use it like this:

<Button>
  Click me
</Button>

A component can specify fallbacks for any slots that are left empty, by putting content inside the <slot> element:

@using Sample.Web.Views.Components
@model Button
<button class="btn btn-primary">
  <slot model="@Model">
    <em>no content was provided</em>
  </slot>
</button>

Advanced usage with named slots

Given folder structure:

~/Views/Components
  - Card.cshtml
  - Card.cshtml.cs

Card.cshtml.cs:

namespace Sample.Web.Views.Components;

[HtmlTargetElement("Card")]
public class Card : RazorComponentTagHelper
{
}

Card.cshtml:

@using Sample.Web.Views.Components
@model Card
<div class="card">
  <h3>
    <slot name="title" model="@Model">
      Missing title
    </slot>
  </h3>
  <slot name="content" model="@Model" />
</div>

You would use it like this:

<Card>
  <fragment slot="title">
    Card title
  </fragment>
  <fragment slot="content">
    <div>
      <p>Card content</p>
      <p>Lorem ipsum</p>
    </div>
  </fragment>
</Card>

The <fragment> element allows you to place content in a named slot.

Inspiration

• Acmion/CshtmlComponent
• techgems/razor-component-tag-helpers
• sveltejs/svelte