Build reusable UI components with Blazor (2023)

  • Article
  • 18 minutes to read

Tip

This content is an excerpt from the eBook, Blazor for ASP NET Web Forms Developers for Azure, available on .NET Docs or as a free downloadable PDF that can be read offline.

Download PDF

Build reusable UI components with Blazor (1)

One of the beautiful things about ASP.NET Web Forms is how it enables encapsulation of reusable pieces of user interface (UI) code into reusable UI controls. Custom user controls can be defined in markup using .ascx files. You can also build elaborate server controls in code with full designer support.

Blazor also supports UI encapsulation through components. A component:

  • Is a self-contained chunk of UI.
  • Maintains its own state and rendering logic.
  • Can define UI event handlers, bind to input data, and manage its own lifecycle.
  • Is typically defined in a .razor file using Razor syntax.

An introduction to Razor

Razor is a light-weight markup templating language based on HTML and C#. With Razor, you can seamlessly transition between markup and C# code to define your component rendering logic. When the .razor file is compiled, the rendering logic is captured in a structured way in a .NET class. The name of the compiled class is taken from the .razor file name. The namespace is taken from the default namespace for the project and the folder path, or you can explicitly specify the namespace using the @namespace directive (more on Razor directives below).

A component's rendering logic is authored using normal HTML markup with dynamic logic added using C#. The @ character is used to transition to C#. Razor is typically smart about figuring out when you've switched back to HTML. For example, the following component renders a <p> tag with the current time:

<p>@DateTime.Now</p>

To explicitly specify the beginning and ending of a C# expression, use parentheses:

<p>@(DateTime.Now)</p>

Razor also makes it easy to use C# control flow in your rendering logic. For example, you can conditionally render some HTML like this:

@if (value % 2 == 0){ <p>The value was even.</p>}

Or you can generate a list of items using a normal C# foreach loop like this:

<ul>@foreach (var item in items){ <li>@item.Text</li>}</ul>

Razor directives, like directives in ASP.NET Web Forms, control many aspects of how a Razor component is compiled. Examples include the component's:

  • Namespace
  • Base class
  • Implemented interfaces
  • Generic parameters
  • Imported namespaces
  • Routes

Razor directives start with the @ character and are typically used at the start of a new line at the start of the file. For example, the @namespace directive defines the component's namespace:

(Video) Learning Blazor Live 🔴 - Build Reusable Components with Blazor

@namespace MyComponentNamespace

The following table summarizes the various Razor directives used in Blazor and their ASP.NET Web Forms equivalents, if they exist.

DirectiveDescriptionExampleWeb Forms equivalent
@attributeAdds a class-level attribute to the component@attribute [Authorize]None
@codeAdds class members to the component@code { ... }<script runat="server">...</script>
@implementsImplements the specified interface@implements IDisposableUse code-behind
@inheritsInherits from the specified base class@inherits MyComponentBase<%@ Control Inherits="MyUserControlBase" %>
@injectInjects a service into the component@inject IJSRuntime JSNone
@layoutSpecifies a layout component for the component@layout MainLayout<%@ Page MasterPageFile="~/Site.Master" %>
@namespaceSets the namespace for the component@namespace MyNamespaceNone
@pageSpecifies the route for the component@page "/product/{id}"<%@ Page %>
@typeparamSpecifies a generic type parameter for the component@typeparam TItemUse code-behind
@usingSpecifies a namespace to bring into scope@using MyComponentNamespaceAdd namespace in web.config

Razor components also make extensive use of directive attributes on elements to control various aspects of how components get compiled (event handling, data binding, component & element references, and so on). Directive attributes all follow a common generic syntax where the values in parenthesis are optional:

@directive(-suffix(:name))(="value")

The following table summarizes the various attributes for Razor directives used in Blazor.

AttributeDescriptionExample
@attributesRenders a dictionary of attributes<input @attributes="ExtraAttributes" />
@bindCreates a two-way data binding<input @bind="username" @bind:event="oninput" />
@on{event}Adds an event handler for the specified event<button @onclick="IncrementCount">Click me!</button>
@keySpecifies a key to be used by the diffing algorithm for preserving elements in a collection<DetailsEditor @key="person" Details="person.Details" />
@refCaptures a reference to the component or HTML element<MyDialog @ref="myDialog" />

The various directive attributes used by Blazor (@onclick, @bind, @ref, and so on) are covered in the sections below and later chapters.

Many of the syntaxes used in .aspx and .ascx files have parallel syntaxes in Razor. Below is a simple comparison of the syntaxes for ASP.NET Web Forms and Razor.

FeatureWeb FormsSyntaxRazorSyntax
Directives<%@ [directive] %><%@ Page %>@[directive]@page
Code blocks<% %><% int x = 123; %>@{ }@{ int x = 123; }
Expressions
(HTML-encoded)
<%: %><%:DateTime.Now %>Implicit: @
Explicit: @()
@DateTime.Now
@(DateTime.Now)
Comments<%-- --%><%-- Commented --%>@* *@@* Commented *@
Data binding<%# %><%# Bind("Name") %>@bind<input @bind="username" />

To add members to the Razor component class, use the @code directive. This technique is similar to using a <script runat="server">...</script> block in an ASP.NET Web Forms user control or page.

@code { int count = 0; void IncrementCount() { count++; }}

Because Razor is based on C#, it must be compiled from within a C# project (.csproj). You can't compile .razor files from a Visual Basic project (.vbproj). You can still reference Visual Basic projects from your Blazor project. The opposite is true too.

For a full Razor syntax reference, see Razor syntax reference for ASP.NET Core.

Use components

Aside from normal HTML, components can also use other components as part of their rendering logic. The syntax for using a component in Razor is similar to using a user control in an ASP.NET Web Forms app. Components are specified using an element tag that matches the type name of the component. For example, you can add a Counter component like this:

<Counter />

Unlike ASP.NET Web Forms, components in Blazor:

  • Don't use an element prefix (for example, asp:).
  • Don't require registration on the page or in the web.config.

Think of Razor components like you would .NET types, because that's exactly what they are. If the assembly containing the component is referenced, then the component is available for use. To bring the component's namespace into scope, apply the @using directive:

@using MyComponentLib<Counter />

As seen in the default Blazor projects, it's common to put @using directives into a _Imports.razor file so that they're imported into all .razor files in the same directory and in child directories.

If the namespace for a component isn't in scope, you can specify a component using its full type name, as you can in C#:

<MyComponentLib.Counter />

Modify page title from components

When building SPA-style apps, it's common for parts of a page to reload without reloading the entire page. Even so, it can be useful to have the title of the page change based on which component is currently loaded. This can be accomplished by including the <PageTitle> tag in the component's Razor page:

@page "/"<PageTitle>Home</PageTitle>

The contents of this element can be dynamic, for instance showing the current count of messages:

<PageTitle>@MessageCount messages</PageTitle>

Note that if several components on a particular page include <PageTitle> tags, only the last one will be displayed (since each one will overwrite the previous one).

Component parameters

In ASP.NET Web Forms, you can flow parameters and data to controls using public properties. These properties can be set in markup using attributes or set directly in code. Razor components work in a similar fashion, although the component properties must also be marked with the [Parameter] attribute to be considered component parameters.

The following Counter component defines a component parameter called IncrementAmount that can be used to specify the amount that the Counter should be incremented each time the button is clicked.

(Video) Developing Reusable Components for Blazor WASM, by Emanuele Bartolesi

<h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code { int currentCount = 0; [Parameter] public int IncrementAmount { get; set; } = 1; void IncrementCount() { currentCount+=IncrementAmount; }}

To specify a component parameter in Blazor, use an attribute as you would in ASP.NET Web Forms:

<Counter IncrementAmount="10" />

Query string parameters

Razor components can also leverage values from the query string of the page they're rendered on as a parameter source. To enable this, add the [SupplyParameterFromQuery] attribute to the parameter. For example, the following parameter definition would get its value from the request in the form ?IncBy=2:

[Parameter][SupplyParameterFromQuery(Name = "IncBy")]public int IncrementAmount { get; set; } = 1;

If you don't supply a custom Name in the [SupplyParameterFromQuery] attribute, by default it will match the property name (IncrementAmount in this case).

Components and error boundaries

By default, Blazor apps will detect unhandled exceptions and show an error message at the bottom of the page with no additional detail. To constrain the parts of the app that are impacted by an unhandled error, for instance to limit the impact to a single component, the <ErrorBoundary> tag can be wrapped around component declarations.

For example, to protect against possible exceptions thrown from the Counter component, declare it within an <ErrorBoundary> and optionally specify a message to display if there is an exception:

<ErrorBoundary> <ChildContent> <Counter /> </ChildContent> <ErrorContent> Oops! The counter isn't working right now; please try again later. </ErrorContent></ErrorBoundary>

If you don't need to specify custom error content, you can just wrap the component directly:

<ErrorBoundary> <Counter /></ErrorBoundary>

A default message stating "An error as occurred." will be displayed if an unhandled exception occurs in the wrapped component.

Event handlers

Both ASP.NET Web Forms and Blazor provide an event-based programming model for handling UI events. Examples of such events include button clicks and text input. In ASP.NET Web Forms, you use HTML server controls to handle UI events exposed by the DOM, or you can handle events exposed by web server controls. The events are surfaced on the server through form post-back requests. Consider the following Web Forms button click example:

Counter.ascx

<asp:Button ID="ClickMeButton" runat="server" Text="Click me!" OnClick="ClickMeButton_Click" />

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl{ protected void ClickMeButton_Click(object sender, EventArgs e) { Console.WriteLine("The button was clicked!"); }}

In Blazor, you can register handlers for DOM UI events directly using directive attributes of the form @on{event}. The {event} placeholder represents the name of the event. For example, you can listen for button clicks like this:

<button @onclick="OnClick">Click me!</button>@code { void OnClick() { Console.WriteLine("The button was clicked!"); }}

Event handlers can accept an optional, event-specific argument to provide more information about the event. For example, mouse events can take a MouseEventArgs argument, but it isn't required.

<button @onclick="OnClick">Click me!</button>@code { void OnClick(MouseEventArgs e) { Console.WriteLine($"Mouse clicked at {e.ScreenX}, {e.ScreenY}."); }}

Instead of referring to a method group for an event handler, you can use a lambda expression. A lambda expression allows you to close over other in-scope values.

@foreach (var buttonLabel in buttonLabels){ <button @onclick="() => Console.WriteLine($"The {buttonLabel} button was clicked!")">@buttonLabel</button>}

Event handlers can execute synchronously or asynchronously. For example, the following OnClick event handler executes asynchronously:

<button @onclick="OnClick">Click me!</button>@code { async Task OnClick() { var result = await Http.GetAsync("api/values"); }}

After an event is handled, the component is rendered to account for any component state changes. With asynchronous event handlers, the component is rendered immediately after the handler execution completes. The component is rendered again after the asynchronous Task completes. This asynchronous execution mode provides an opportunity to render some appropriate UI while the asynchronous Task is still in progress.

<button @onclick="ShowMessage">Get message</button>@if (showMessage){ @if (message == null) { <p><em>Loading...</em></p> } else { <p>The message is: @message</p> }}@code{ bool showMessage = false; string message; public async Task ShowMessage() { showMessage = true; message = await MessageService.GetMessageAsync(); }}

Components can also define their own events by defining a component parameter of type EventCallback<TValue>. Event callbacks support all the variations of DOM UI event handlers: optional arguments, synchronous or asynchronous, method groups, or lambda expressions.

<button class="btn btn-primary" @onclick="OnClick">Click me!</button>@code { [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }}

Data binding

Blazor provides a simple mechanism to bind data from a UI component to the component's state. This approach differs from the features in ASP.NET Web Forms for binding data from data sources to UI controls. We'll cover handling data from different data sources in the Dealing with data section.

To create a two-way data binding from a UI component to the component's state, use the @bind directive attribute. In the following example, the value of the check box is bound to the isChecked field.

(Video) Razor class library and reusable blazor components

<input type="checkbox" @bind="isChecked" />@code { bool isChecked;}

When the component is rendered, the value of the checkbox is set to the value of the isChecked field. When the user toggles the checkbox, the onchange event is fired and the isChecked field is set to the new value. The @bind syntax in this case is equivalent to the following markup:

<input value="@isChecked" @onchange="(UIChangeEventArgs e) => isChecked = e.Value" />

To change the event used for the bind, use the @bind:event attribute.

<input @bind="text" @bind:event="oninput" /><p>@text</p>@code { string text;}

Components can also support data binding to their parameters. To data bind, define an event callback parameter with the same name as the bindable parameter. The "Changed" suffix is added to the name.

PasswordBox.razor

Password: <input value="@Password" @oninput="OnPasswordChanged" type="@(showPassword ? "text" : "password")" /><label><input type="checkbox" @bind="showPassword" />Show password</label>@code { private bool showPassword; [Parameter] public string Password { get; set; } [Parameter] public EventCallback<string> PasswordChanged { get; set; } private Task OnPasswordChanged(ChangeEventArgs e) { Password = e.Value.ToString(); return PasswordChanged.InvokeAsync(Password); }}

To chain a data binding to an underlying UI element, set the value and handle the event directly on the UI element instead of using the @bind attribute.

To bind to a component parameter, use a @bind-{Parameter} attribute to specify the parameter to which you want to bind.

<PasswordBox @bind-Password="password" />@code { string password;}

State changes

If the component's state has changed outside of a normal UI event or event callback, then the component must manually signal that it needs to be rendered again. To signal that a component's state has changed, call the StateHasChanged method on the component.

In the example below, a component displays a message from an AppState service that can be updated by other parts of the app. The component registers its StateHasChanged method with the AppState.OnChange event so that the component is rendered whenever the message gets updated.

public class AppState{ public string Message { get; } // Lets components receive change notifications public event Action OnChange; public void UpdateMessage(string message) { Message = message; NotifyStateChanged(); } private void NotifyStateChanged() => OnChange?.Invoke();}
@inject AppState AppState<p>App message: @AppState.Message</p>@code { protected override void OnInitialized() { AppState.OnChange += StateHasChanged }}

Component lifecycle

The ASP.NET Web Forms framework has well-defined lifecycle methods for modules, pages, and controls. For example, the following control implements event handlers for the Init, Load, and UnLoad lifecycle events:

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl{ protected void Page_Init(object sender, EventArgs e) { ... } protected void Page_Load(object sender, EventArgs e) { ... } protected void Page_UnLoad(object sender, EventArgs e) { ... }}

Razor components also have a well-defined lifecycle. A component's lifecycle can be used to initialize component state and implement advanced component behaviors.

All of Blazor's component lifecycle methods have both synchronous and asynchronous versions. Component rendering is synchronous. You can't run asynchronous logic as part of the component rendering. All asynchronous logic must execute as part of an async lifecycle method.

OnInitialized

The OnInitialized and OnInitializedAsync methods are used to initialize the component. A component is typically initialized after it's first rendered. After a component is initialized, it may be rendered multiple times before it's eventually disposed. The OnInitialized method is similar to the Page_Load event in ASP.NET Web Forms pages and controls.

protected override void OnInitialized() { ... }protected override async Task OnInitializedAsync() { await ... }

OnParametersSet

The OnParametersSet and OnParametersSetAsync methods are called when a component has received parameters from its parent and the value are assigned to properties. These methods are executed after component initialization and each time the component is rendered.

protected override void OnParametersSet() { ... }protected override async Task OnParametersSetAsync() { await ... }

OnAfterRender

The OnAfterRender and OnAfterRenderAsync methods are called after a component has finished rendering. Element and component references are populated at this point (more on these concepts below). Interactivity with the browser is enabled at this point. Interactions with the DOM and JavaScript execution can safely take place.

protected override void OnAfterRender(bool firstRender){ if (firstRender) { ... }}protected override async Task OnAfterRenderAsync(bool firstRender){ if (firstRender) { await ... }}

OnAfterRender and OnAfterRenderAsync aren't called when prerendering on the server.

The firstRender parameter is true the first time the component is rendered; otherwise, its value is false.

IDisposable

Razor components can implement IDisposable to dispose of resources when the component is removed from the UI. A Razor component can implement IDispose by using the @implements directive:

(Video) Creating Blazor Reusable Components (Server & WebAssembly)

@using System@implements IDisposable...@code { public void Dispose() { ... }}

Capture component references

In ASP.NET Web Forms, it's common to manipulate a control instance directly in code by referring to its ID. In Blazor, it's also possible to capture and manipulate a reference to a component, although it's much less common.

To capture a component reference in Blazor, use the @ref directive attribute. The value of the attribute should match the name of a settable field with the same type as the referenced component.

<MyLoginDialog @ref="loginDialog" ... />@code { MyLoginDialog loginDialog = default!; void OnSomething() { loginDialog.Show(); }}

When the parent component is rendered, the field is populated with the child component instance. You can then call methods on, or otherwise manipulate, the component instance.

Manipulating component state directly using component references isn't recommended. Doing so prevents the component from being rendered automatically at the correct times.

Capture element references

Razor components can capture references to an element. Unlike HTML server controls in ASP.NET Web Forms, you can't manipulate the DOM directly using an element reference in Blazor. Blazor handles most DOM interactions for you using its DOM diffing algorithm. Captured element references in Blazor are opaque. However, they're used to pass a specific element reference in a JavaScript interop call. For more information about JavaScript interop, see ASP.NET Core Blazor JavaScript interop.

Templated components

In ASP.NET Web Forms, you can create templated controls. Templated controls enable the developer to specify a portion of the HTML used to render a container control. The mechanics of building templated server controls are complex, but they enable powerful scenarios for rendering data in a user customizable way. Examples of templated controls include Repeater and DataList.

Razor components can also be templated by defining component parameters of type RenderFragment or RenderFragment<T>. A RenderFragment represents a chunk of Razor markup that can then be rendered by the component. A RenderFragment<T> is a chunk of Razor markup that takes a parameter that can be specified when the render fragment is rendered.

Child content

Razor components can capture their child content as a RenderFragment and render that content as part of the component rendering. To capture child content, define a component parameter of type RenderFragment and name it ChildContent.

ChildContentComponent.razor

<h1>Component with child content</h1><div>@ChildContent</div>@code { [Parameter] public RenderFragment ChildContent { get; set; }}

A parent component can then supply child content using normal Razor syntax.

<ChildContentComponent> <ChildContent> <p>The time is @DateTime.Now</p> </ChildContent></ChildContentComponent>

Template parameters

A templated Razor component can also define multiple component parameters of type RenderFragment or RenderFragment<T>. The parameter for a RenderFragment<T> can be specified when it's invoked. To specify a generic type parameter for a component, use the @typeparam Razor directive.

SimpleListView.razor

@typeparam TItem@Heading<ul>@foreach (var item in Items){ <li>@ItemTemplate(item)</li>}</ul>@code { [Parameter] public RenderFragment Heading { get; set; } [Parameter] public RenderFragment<TItem> ItemTemplate { get; set; } [Parameter] public IEnumerable<TItem> Items { get; set; }}

When using a templated component, the template parameters can be specified using child elements that match the names of the parameters. Component arguments of type RenderFragment<T> passed as elements have an implicit parameter named context. You can change the name of this implement parameter using the Context attribute on the child element. Any generic type parameters can be specified using an attribute that matches the name of the type parameter. The type parameter will be inferred if possible:

<SimpleListView Items="messages" TItem="string"> <Heading> <h1>My list</h1> </Heading> <ItemTemplate Context="message"> <p>The message is: @message</p> </ItemTemplate></SimpleListView>

The output of this component looks like this:

<h1>My list</h1><ul> <li><p>The message is: message1</p></li> <li><p>The message is: message2</p></li><ul>

Code-behind

A Razor component is typically authored in a single .razor file. However, it's also possible to separate the code and markup using a code-behind file. To use a component file, add a C# file that matches the file name of the component file but with a .cs extension added (Counter.razor.cs). Use the C# file to define a base class for the component. You can name the base class anything you'd like, but it's common to name the class the same as the component class, but with a Base extension added (CounterBase). The component-based class must also derive from ComponentBase. Then, in the Razor component file, add the @inherits directive to specify the base class for the component (@inherits CounterBase).

Counter.razor

@inherits CounterBase<h1>Counter</h1><p>Current count: @currentCount</p><button @onclick="IncrementCount">Click me</button>

Counter.razor.cs

public class CounterBase : ComponentBase{ protected int currentCount = 0; protected void IncrementCount() { currentCount++; }}

The visibility of the component's members in the base class must be protected or public to be visible to the component class.

(Video) How to Create a Generic and Reusable Data Grid Component in Blazor

Additional resources

The preceding isn't an exhaustive treatment of all aspects of Razor components. For more information on how to Create and use ASP.NET Core Razor components, see the Blazor documentation.

PreviousNext

FAQs

What is the benefit of using Blazor app over using Razor pages? ›

The biggest difference between Razor and Blazor is that Razor is a markup language with C#, while Blazor is the framework that lets you run C# code and use the Razor view engine in the browser.

What's behind the hype about Blazor? ›

Essentially, Blazor has a separation between how it calculates UI changes (app/component model) and how those changes are applied (renderer). This sets Blazor apart from other UI frameworks such as Angular or ReactJS/React Native that can only create web technology based UIs.

Can you mix Blazor and Razor? ›

Razor components can be integrated into Razor Pages and MVC apps in a hosted Blazor WebAssembly solution.

Is Blazor mature enough? ›

Yes, Blazor is ready to be used in production, it is a life changer, Blazor is a framework that optimizes development speed, helps considerably reducing code duplication and inconsistencies between front-end and api/backend models, and in turn it helps reducing bugs and development costs, in top of that, since Blazor ...

Is Blazor faster than react? ›

Q: Is Blazor faster than React? Yes. React apps usually load faster than Blazor, especially when compared to Blazor WASM, which has to download the entire . NET runtime in addition to other app dependencies.

Do companies use Blazor? ›

Who uses Blazor? 22 companies reportedly use Blazor in their tech stacks, including Scopeland Technology GmbH, Objectivity Software Development, and Weland Solutions AB.

Should I learn Angular or Blazor? ›

Contrarily, Blazor is constantly changing and, despite its potential, lacks the maturity to rival Angular. Angular supports progressive web apps (PWAs). However, server-side Blazor cannot be utilized as a PWA. Instead, leveraging Angular tooling is more useful.

Are Blazor apps slow? ›

We've been hearing reports from users that load performance of Blazor WebAssembly apps on low-end mobile devices can be very slow. For example, this user on Twitter reported "bootstrapping is very slow on low-end mobile devices (~10s), caching doesn't help this".

Is Blazor client production ready? ›

Blazor is a fast, reliable, and highly productive open-source web development framework by Microsoft. It offers two hosting models, Blazor WebAssembly and Blazor Server, to support both client-side and server-side applications.

Can Blazor replace JavaScript? ›

So Blazor can replace an app made with react/Vue, and instead of writing Javascript /typescript you will be writing C#. Or both. Visual studio will ask you if you want to add typescript types when creating a new project.

Should I learn Blazor 2022? ›

The framework enables developers to build interactive and reusable web UI in existing web technologies like C# or HTML. When it comes to grammar and syntax, the framework allows developers to use the ones of Razor and C#. Even though Blazor has accumulated only 9k+ starts on GitHub, it's still worth considering.

Is Blazor multithreaded? ›

Multithreading support hasn't been integrated yet into Blazor WebAssembly apps (planned for . NET 8), but you can still try it out in preview form using the experimental WebAssembly Browser App template."

Can I use MVC in Blazor? ›

Blazor components can be used in existing ASP.NET MVC applications. Follow these steps to learn how Blazor components are used in the view page of an MVC application. Prerequisites: Visual Studio 2019.

Why you shouldn't use the same Razor? ›

You shouldn't share a razor with someone else due to sanitary concerns. You can get nicked or cut while shaving, and if you use someone else's razor you are putting yourself at risk for infection — and vice versa. What's more, you may not know how long someone else's razor has been used.

Why choose Blazor over Angular? ›

The most significant selling point of Blazor is that it uses the newest web standards and doesn't require additional plugins or add-ons to run in two separate deployment models, client-side WebAssembly and server-side ASP.NET Core.

Is Blazor full stack? ›

Blazor is not very like web forms but has some things in common. One is that developers can write C# everywhere, both on the server and for the browser client. Microsoft calls this “full stack C#”.

Is Blazor code low? ›

Data grids are the gold standard for displaying large amounts of data in business applications. The Telerik UI for Blazor grid is built specifically for this task by incorporating a wealth of features, most of which can be enabled in a simple and intuitive way through low-code options.

Should I learn JavaScript or Blazor? ›

Deciding whether to use Blazor WebAssembly instead of one of the many JavaScript frameworks readily available largely depends on your team's experience and comfort level with learning a new language. If you or your team is more comfortable coding in C# vs JavaScript, Blazor is a solid option for you.

Is Blazor SEO friendly? ›

Answers. Blazor and your application will really be as SEO-friendly as you decide for it to be. Although it's a SPA, there are plenty of tools out there like this free one from the folks at DevExpress, that is specifically to update all the SEO-specific metadata for your site at runtime.

When should I use Blazor? ›

"Blazor provides a number of powerful features beyond enabling C# developers to use their language of choice for web development." Blazor supports running your code on the server or on the client via WebAssembly, and you can choose which users or devices get either experience.

What language is Blazor written in? ›

Build beautiful, web apps with Blazor. Use the power of .NET and C# to build full stack web apps without writing a line of JavaScript.

Is Blazor ready for prime time? ›

With a browser version based on the familiar Mono, your code is compiled on the fly, driving HTML and JavaScript page components. While Microsoft still classifies Blazor as experimental, a series of recent announcements make it clear that it's nearly ready for prime time.

Who owns Blazor? ›

Microsoft

Is Blazor the future 2022? ›

NET MAUI will be the first big Blazor-related release in 2022. . NET MAUI is poised to bring Blazor to native application development, making it possible to build applications for Windows, Mac, iOS and Android using your Blazor knowledge and skills.

Is Blazor viable? ›

NET web applications, and makes Blazor a viable competitor to other established front-end SPA frameworks such as Angular and Vue for . NET developers. It also enables a more accessible transition to SPA development for some developers than other frameworks because it builds on the Razor syntax known to .

How fast is Blazor? ›

Blazor is very fast in terms of build and debugging. Because it takes advantage of Visual Studio and the whole experience accumulated among its tools and plugins, the development and debugging can be really fast.

Which company uses Blazor? ›

Software architecture company, Clear Measure used Blazor to help ShoWorks provide fair management software to host virtual live auctions.

Can Blazor run offline? ›

Blazor WebAssembly is a standards-based client-side web app platform, so it can use any browser API, including PWA APIs required for the following capabilities: Working offline and loading instantly, independent of network speed.

Does Blazor have hot reload? ›

Blazor WebAssembly Hot Reload supports the following code changes: Most changes to method bodies, such as adding, removing, and editing variables, expressions, and statements. Changes to the bodies of lambda expressions and local functions.

Does Blazor still use mono? ›

Blazor runs on the browser using . NET intermediate language (IL) interpreter implemented in WebAssembly, when AOT is not enabled. Mono runtime is compiled to WebAssembly but not .

Can Blazor access the DOM? ›

Currently, Blazor doesn't provide any direct way to access the browser's DOM or APIs. But there is an option to invoke/call JavaScript functions via JS Interop, thereby letting Blazor access the DOM and its APIs.

Is Blazor similar to Razor? ›

Razor is a templating engine that combines C# with HTML to build dynamic web content. Blazor is a component-based, single-page app framework for building client-side web apps using . NET that works well with all modern browsers via WebAssembly for client-side Blazor.

Does AWS support Blazor? ›

AWS Amplify is a set of purpose-built tools and features that lets developers quickly and easily build CI/CD Pipeline for full-stack applications on AWS. Blazor can run your client-side C# code directly in the browser, using WebAssembly.

What websites are built with Blazor? ›

Websites using Blazor
#WebsiteTraffic
1mudblazor.com3%
2abola3d.abola.pt2%
3lostmerchants.com2%
4asset.party1%
6 more rows

Is Blazor front end or backend? ›

Blazor framework is one of the web development platforms for the . Net family that provides the flexibility to develop both backend and front using the same language, C#.

How many websites use Blazor? ›

Blazor Awards

Get a list of 32,240 websites using Blazor which includes location information, hosting data, contact details, 25,507 currently live websites and an additional 47,345 domains that redirect to sites in this list.

Is Blazor asynchronous? ›

We can perform asynchronous calls in a Blazor application using async and await keywords for calling any asynchronous Task or performing any operation. Refer to the following code snippet.

How much does a Blazor cost? ›

✅ What is the price for Syncfusion Blazor components? A single developer license for the Syncfusion Essential Studio for Blazor suite costs $995.00 USD, including one year of support and updates.

Is Blazor two way binding? ›

The Blazor framework handles null to empty string conversions for two-way binding to a <select> 's value.

Is Blazor stateful? ›

Blazor Server is a stateful app framework. Most of the time, the app maintains a connection to the server. The user's state is held in the server's memory in a circuit.

Can Blazor components be nested? ›

In the Blazor application, a component can also be nested inside another component using the HTML syntax. For example, if you want to nest counter component inside the index component then you need to use <Counter /> within the Index component.

Is Blazor a MVVM? ›

Blazor doesn't have any native support for MVVM, but we've also shown that it's pretty easy to use with it. By adopting this pattern, we have solved our state management problems and also improved the organization of our code.

Does Blazor replace MVC? ›

Blazor is an alternative to MVC and Razor Pages but with a twist: It's a single-page app framework (SPA) that just happens to use C# instead of JavaScript. Blazor applications can run on the server, or in the browser thanks to Web Assembly (https://www.telerik.com/blogs/goodbye-javascript-hello-webassembly).

What design pattern does Blazor use? ›

Something most will know: MVVM – Model-View-ViewModel

NET application with a user interface before Blazor, you most likely have heard about the MVVM pattern. It was introduced to decouple GUI design from the backend part of the application.

How do you shave your pubic hair? ›

The key to shaving pubes is to use short strokes with gentle pressure. You can shave in any direction that feels comfortable, but shaving “with the grain” will help to avoid excess shaving irritation. Clean the blade in water every 2-3 strokes to keep your hair from blocking the blades.

Can I shave my pubes with my face razor? ›

We wouldn't recommend using the standard rotary or foil electric shaver you use to shave your face for pubic hair. It's an intimate and sensitive area, with thinner skin and more natural contours that you need to navigate.

Can you use a razor on your pubes? ›

Shaving is one way to remove pubic hair. It is fairly inexpensive, and you can do it yourself. Go slowly, pulling skin taut before running the razor over the hair. Always shave in the same direction that the hair grows, not against it.

Is Blazor worth learning 2022? ›

The framework enables developers to build interactive and reusable web UI in existing web technologies like C# or HTML. When it comes to grammar and syntax, the framework allows developers to use the ones of Razor and C#. Even though Blazor has accumulated only 9k+ starts on GitHub, it's still worth considering.

Which is better Angular or Blazor? ›

Support: The size of the community using Angular is very high when compared to Blazor. So, the chances of finding a solution to the problem we face during the app development are high for Angular. Use of TypeScript: TypeScript has attributes that are way better than JavaScript's.

Is Blazor a good idea? ›

Blazor is a fast, reliable, and highly productive open-source web development framework by Microsoft. It offers two hosting models, Blazor WebAssembly and Blazor Server, to support both client-side and server-side applications.

How many companies are using Blazor? ›

Who uses Blazor? 22 companies reportedly use Blazor in their tech stacks, including Scopeland Technology GmbH, Objectivity Software Development, and Weland Solutions AB.

Can Blazor compete with Angular? ›

Contrarily, Blazor is constantly changing and, despite its potential, lacks the maturity to rival Angular. Angular supports progressive web apps (PWAs). However, server-side Blazor cannot be utilized as a PWA. Instead, leveraging Angular tooling is more useful.

Is Blazor server production ready? ›

Blazor currently has two hosting models that are production-ready.

Does Blazor support multithreading? ›

NET runtime capability. Multithreading support hasn't been integrated yet into Blazor WebAssembly apps (planned for . NET 8), but you can still try it out in preview form using the experimental WebAssembly Browser App template. Create and run a new thread.

Videos

1. Blazor: Custom Reusable Components
(Zia A. Shaikh)
2. Next-generation Blazor components with .NET 6
(dotnet)
3. Building Custom Components In Blazor
(Yassa Taiseer)
4. Creating Blazor Components the right way
(Codewrinkles)
5. How to create maintainable and testable Blazor components - Egil Hansen - NDC Oslo 2022
(NDC Conferences)
6. Organize your Reusable Razor Components using RCL
(Roozbeh Shad)
Top Articles
Latest Posts
Article information

Author: Twana Towne Ret

Last Updated: 02/15/2023

Views: 6045

Rating: 4.3 / 5 (44 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Twana Towne Ret

Birthday: 1994-03-19

Address: Apt. 990 97439 Corwin Motorway, Port Eliseoburgh, NM 99144-2618

Phone: +5958753152963

Job: National Specialist

Hobby: Kayaking, Photography, Skydiving, Embroidery, Leather crafting, Orienteering, Cooking

Introduction: My name is Twana Towne Ret, I am a famous, talented, joyous, perfect, powerful, inquisitive, lovely person who loves writing and wants to share my knowledge and understanding with you.