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

Razor components are stand-alone, embeddable units that replace themselves with pure HTML, CSS and JS markup. They can accept parameters from the host page. We discuss below how they differ from partial pages, and we also discuss the structure of a component page, and also how to use the <component> tag to easily embed a component into a razor page.

Categories | About |     |  

Parveen,
This discussion is ONLY for Razor Pages apps - NOT for Blazor based 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 


This Blog Post/Article "(C# ASP.NET Core) Razor Components in the Context of Razor Pages Apps" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.