(C# ASP.NET Core) Razor Components in the Context of Razor Pages Apps

Key Points about Razor Components

In nutshell: razor components are used to generate HTML - for example a rating bar, pager, shopping cart counter, hit counter, etc.,

Razor components can be "embedded" at various places of your project.

They are self-contained components - that can take external parameters for their internal calculations, styling and processing. Beyond that, they have no communication with the containing razor page.

Simply speaking, razor components are a shortcut for substituting HTML content.

Your page has a 1-way and 1-time communication with a razor component - of providing the embedding parameters.

Razor components are written inside files of extension .razor and .razor.cs. And, since they are stand-alone components, these files can be "copy-pasted" to other projects also.

Razor Components vs Partial Views?

Both generate HTML, and a clever developer can twist either of them into work.

Partial Views are "chained" into the flow of a page. ViewBag and HttpContext - for example - are accessible within a partial view, because partial page is a part of the chain. Behaviour of a partial page depends on the context, on the page of which it is a part.

Razor Components are "embeddable", iframe-like, units; they are independent, stand-alone, and of a consistent behaviour, even across projects. You cannot access ViewBag inside a razor component. You cannot access HttpContext either. As a workaround, if you are hard-pressed for that, then you can, however, pass discrete data and references, such as of HttpContext (!) as a parameter.

Video Explanation with a Working Example

Please watch the following youtube video:

Naming Convention

Razor components are named according to the pascal convention. So MyComponent is valid, but myComponent is not.

General Structure of a Razor Component
(see the linked video for details)

Write your html first. Then use the razor syntax to insert parameters.

After that use the @code blocks to write the members of the partial class. Please note that the compiler will add a partial class of the same name as your .razor file.

External parameters must be marked as [Parameter] and public.

// MyComponent.razor file 
// place it adjacent to your razor page 
// can even be placed in a folder in the 
// root directory - but do check the  
// namespace  

// first: write your html, possibly, with 
// parameters with razor syntax 

<span>
  Square of @i is @makeSquare()  
</span>

// second: write the functions 
// properties and other members 
// of the partial class, use the 
// code blocks as shown 

@code {

  // partial class members 

  // parameter of default value 0 
  [Parameter] public int i { get; set; } = 0;

  // function for calculation 
  private int makeSquare()
  {  
    return i * i;
  }
}

Code-behind for a Razor Component
(alternative to @code{} above)

If the code is too large, then you can consider using a code behind file of extension .razor.cs and write your partial class there.

// MyComponent.razor.cs codebehind file 
// NOTE: OPTIONAL 
public partial class MyComponent
{

  // parameter of default value 0 
  [Parameter] public int i { get; set; } = 0;

  // function for calculation 
  private int makeSquare()
  {

    return i * i;

  }

}

Embedding the Component in a Razor Page
(see the linked video for details)

First thing: make sure that your razor page contains the @addTagHelpers directive.

Second thing: use the <component> tag to set these 2 properties:

1. render-mode: keep it "Static", the other options are not relevant for razor apps.
2. type: set this parameter to typeof (fully qualified path to the class of the component). The namespace can, however, be specified with @using directive [see below]

Third thing: pass parameters using the prefix param-. For example to pass a parameter i, set the attribute param-i. To pass a string parameter or a complex parameter, say, p1, pass like this: param-p1="@(new CMyClass(){ , , props})"

// Index.cshtml razor page 

@page

@using Modular.Pages

@model IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof(MyComponent)"
           render-mode="Static"
           param-i="2"
           />

// see the linked video for an example of 
// passing string types or complex references 
// as parameters