Razor Components is an ASP.NET Core library that allows you to write UI components while maintaining compatibility with Razor Pages and MVC.
Install the NuGet package
dotnet add package Projektanker.RazorComponentsRazor 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.WebGiven 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" />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>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.