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) How to Create a Generic and Reusable Data Grid Component in Blazor

@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) Creating Blazor Reusable Components (Server & WebAssembly)

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

How do you make Blazor UI? ›

Let's create a Blazor component to display details about the employees of an organization. To add a component to the project, right-click on the Pages folder and choose Add -> Razor Component. Refer to the following image. In the Add New Item- Blazor App dialog, provide the name EmployeeCard and click Add.

How do I create components in Blazor dynamically? ›

Components in Blazor are formally referred to as Razor components. You can render the component at runtime using RenderFragment. The RenderFragment class allows you create the required content or component in a dynamic manner at runtime.

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 still relevant? ›

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 better than Angular? ›

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.

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.

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.

Can you use Blazor components in MVC? ›

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.

Can I use a Blazor component in Razor page? ›

Razor components are units of markup and code that represent the basic UI elements of any Blazor app implemented with a . razor extension. In other words, Blazor uses Razor components to create UIs, meaning you can write Razor components and utilize Blazor as the client-side hosting model for them.

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."

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.

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.

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 ...

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 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 becoming more popular? ›

Blazor is one of the latest web development frameworks that enables developers to build web applications with C# and HTML. It has been gaining momentum drastically since its release in 2018 with its high efficiency and productive programming model.

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.

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.

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.

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.

Is Blazor two way binding? ›

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

Does Blazor use Kestrel? ›

Kestrel is a cross platform web server and it is included in Blazor Server by default. Kestrel can be a stand-alone host for Blazor Server websites or become a local server to implement the Reverse Proxy hosting model. Kestrel focuses on performance and memory utilization.

What is the difference between Blazor and 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 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 .

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.

Can you use Blazor and react together? ›

Yes, it's possible. React is a javascript library and the same way you can add jquery to your blazor app, you can also add React to it, but it have some drawbacks.

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 free for commercial use? ›

Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source. Paid support is available as part of the Radzen Professional subscription.

Can Blazor be used for desktop applications? ›

Blazor Hybrid apps with WPF and Windows Forms

Razor components run natively in the Windows desktop and render to an embedded Web View. Using Blazor in WPF and Windows Forms enables you to add new UI to your existing Windows desktop apps that can be reused across platforms with . NET MAUI or on the web.

Is Blazor a UI framework? ›

Blazor is a framework for building interactive client-side web UI with . NET: Create rich interactive UIs using C# instead of JavaScript.

How do I make a Blazor desktop app? ›

Launch Visual Studio. In the Start Window, select Create a new project: In the Create a new project dialog, filter the Project type dropdown to Desktop.
...
Create a Windows Forms Blazor project
  1. Set the Project name to WinFormsBlazor.
  2. Choose a suitable location for the project.
  3. Select the Next button.
Dec 23, 2022

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.

Is Blazor good for production? ›

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.

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".

Does Blazor support offline application? ›

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.

Should you use MVVM in Blazor? ›

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. In addition, now we can write unit tests to check the behavior of our code.

Should I use Blazor or Razor? ›

Blazor is a framework that leverages the Razor components to produce dynamic HTML. 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.

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.

Is Blazor server deprecated? ›

NET Framework, isn't going away in Visual Studio 2022, though it recommends Blazor as a . NET 6 alternative. It's not obsolete tech being deprecated, and it will continue to be supported -- in other words, Web Forms is no Silverlight.

Videos

1. Next-generation Blazor components with .NET 6
(dotnet)
2. Blazor: Custom Reusable Components
(Zia A. Shaikh)
3. Building Custom Components In Blazor
(Yassa Taiseer)
4. Organize your Reusable Razor Components using RCL
(Roozbeh Shad)
5. Reusable Razor Components in Blazor C# .Net Core(3.1) Session-7
(Biswa Ranjan)
6. Creating Blazor Components the right way
(Codewrinkles)
Top Articles
Latest Posts
Article information

Author: Prof. An Powlowski

Last Updated: 01/26/2023

Views: 5701

Rating: 4.3 / 5 (64 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Prof. An Powlowski

Birthday: 1992-09-29

Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

Phone: +26417467956738

Job: District Marketing Strategist

Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.