DalSoft.RazorComponents 0.0.2

dotnet add package DalSoft.RazorComponents --version 0.0.2
NuGet\Install-Package DalSoft.RazorComponents -Version 0.0.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="DalSoft.RazorComponents" Version="0.0.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add DalSoft.RazorComponents --version 0.0.2
#r "nuget: DalSoft.RazorComponents, 0.0.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install DalSoft.RazorComponents as a Cake Addin
#addin nuget:?package=DalSoft.RazorComponents&version=0.0.2

// Install DalSoft.RazorComponents as a Cake Tool
#tool nuget:?package=DalSoft.RazorComponents&version=0.0.2

DalSoft.RazorComponents

Why

Since Blazor Server-Side has been shipped with ASP.NET Core 3.0, you have also been able to use Razor Components in ASP.NET Razor Pages or View.

You do it like this in your Razor Page (for a Razor Component named HelloWorld):

<component type="typeof(HelloWorld)" render-mode="Static" param-message='$"Hello World {DateTime.Now}"' />

This package is a simple tag library that allows you to use friendly markup for your Component in a Razor Pages project, exactly how you would in a Blazor app.

<hello-world message='$"Hello World {DateTime.Now}"' />

How to use

Create a Razor Component

First of all to use Razor Components, you need a ASP.NET Core 3.0 Razor Pages or MVC project.

Use an existing Razor pages project or create a new one using Visual Studio or the dotnet CLI:

> dotnet new razor

Add a Razor component using either Visual Studio or the dotnet CLI

> dotnet new razorcomponent --name MyComponent

Add your code to your Razor Component, for example:

@code {

    [Parameter]
    public string Message { get; set; }
}

<h3>@Message</h3>

Using DalSoft.RazorComponents with your Razor Component

Now you have a Razor Pages or MVC project - your ready to use DalSoft.RazorComponents with your Razor Component.

Install DalSoft.RazorComponents package via DotNet CLI
> dotnet add package DalSoft.RazorComponents
Create a Components mapping class

This is very simple class that maps our Razor component to our Tag Library using a base class.

You can create this class anywhere in your Razor pages project.

namespace MyRazorPages.Pages._Components
{
    [HtmlTargetElement(tag:"hello-world", TagStructure = TagStructure.WithoutEndTag)]
    public class TheClassNameIsNotImportant : ComponentTagHelperBase<Components.MyComponent> { }
}

This is a simple class but lets take a moment to understand what is going on:

The components mapping class inherits from ComponentTagHelperBase - the important thing to note is the generic parameter, this parameter is the Razor component we created in the last step.

How do you know what the generated Razor component namespace / class name is?

Simple - the namespace is your project name followed by the directory structure your Razor component is in. The class name is the file name of your Razor component.

Lastly the HtmlTargetElement attribute is important and required, in this example we are saying we want the tagname to be <hello-world>, and that we don't require a end tag.

Add our project to the registered tag libraries

Now all we need to do is register our tag library. We do this by adding @addTagHelper *, DalSoft.RazorComponents.Example to _ViewImports.cshtml.

It will look like this for our example:

Note MyRazorPages is the Assembly Name

@using MyRazorPages
@namespace MyRazorPages.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, MyRazorPages
Profit

Now in your Razor pages you can use the friendlier tag name for your component that you specified in your components mapping class.

It now looks like how you would use a Razor component in a Blazor app.

<hello-world message='$"Hello World {DateTime.Now}"' />
Child Content / Components

Child components are supported and give you the opportunity to create terser razor for thing like layouts. For example:

<grid>
   <row>
      <col align="right">Hello from col 1</col>
      <col algn="left">Hello from col 2</col>
    </row>
</grid>

See <ChildDemo> in this example for how it works.

Bonus

This package works perfectly with Razor components class libraries; making it trivial to create reusable components for Razor pages using friendly markup.

Limitations

Thanks to this PR by @pwhe23 this is no longer a limitation.

You can't nest components in Razor pages (you can in Blazor) this is a Razor pages limitation.

This won't error but won't work as you expect in Razor pages:


Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.0 is compatible.  netcoreapp3.1 was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • .NETCoreApp 3.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.0.2 1,443 10/5/2020
0.0.1 584 2/15/2020

Child components now supported thanks to @pwhe23