Skip to content

Latest commit

 

History

History
129 lines (78 loc) · 7.3 KB

web-app.md

File metadata and controls

129 lines (78 loc) · 7.3 KB
title page_title meta_title description slug tags published position
Blazor Web App
First Steps with Blazor Web App and Telerik UI
First Steps with Blazor Web App | Telerik UI for Blazor.
Learn how to use the Telerik UI for Blazor components in a Blazor Web App project template for .NET 8 and .NET 9.
getting-started/web-app
get,started,first,steps,web,app,template
true
5

First Steps with Blazor Web App and Telerik UI

This article explains how to use the Telerik UI for Blazor components in a Blazor Web App project template that exists for .NET 8 and 9. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.

@template

Telerik UI for Blazor requires interactive render mode. Using Global Interactivity location is highly recommended.

{% if site.has_cta_panels == true %} {% include cta-panel-introduction.html %} {% endif %}

Prerequisites

@template

Step 1: Install a License Key

@template

@template

@template

Step 2: Create a New Project

  1. Open Visual Studio and select Create a new project.

  2. Select the Blazor Web App project type, enter a name for your project, and then click Next.

  3. Select the desired Interactive render mode and Global Interactivity location. Global interactivity ensures easier setup and usage of the Telerik components.

  4. Click Create.

Interactive Render Mode

Telerik UI for Blazor requires interactive render mode. Using Global Interactivity location is highly recommended. The Telerik Blazor components will not respond to user actions and the Blazor framework will not refresh their UI in Static server-side rendering mode (static SSR). Telerik Blazor components with JavaScript rendering (Barcodes, Charts, Gauges, Maps, and QR Codes) will not render in static SSR at all.

The Account section in the Blazor Web App template with identity is static by design. Most Telerik Blazor components cannot work in this section.

@template

Step 4: Install the Telerik UI for Blazor Components

  1. To include the Telerik component library, right-click each project that will use Telerik Blazor components, and select Manage NuGet Packages.

    • Apps with interactive Server render mode need the Telerik Nuget package in the server project.
    • Apps with global interactive Auto or WebAssembly render mode need the Telerik NuGet package in the client project.

  2. Install the Telerik Blazor NuGet package:

    1. Select the telerik.com Package source that you added earlier. As this is a private NuGet feed, you must authenticate with your Telerik account username and password.
    2. Select the Browse tab, find the NuGet package, and click Install. Commercial license holders must install Telerik.UI.for.Blazor. Trial users must install Telerik.UI.for.Blazor.Trial.

Step 5: Enable the Blazor UI Components

To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required @using statements, add the TelerikRootComponent component, and register the Telerik Blazor service.

5.1. Add the Telerik UI for Blazor Client Assets

1. Add the telerik-blazor.js file to your App.razor file as a static asset.

HTML

@template

2. To select the appearance and color scheme for the Telerik Blazor components, add the theme stylesheet as a static asset in your App.razor file.

HTML

@template

5.2. Include @using Statements

Add the @using directives below in the ~/_Imports.razor file in all projects in which you installed the Telerik NuGet package in Step 4. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the icon type you use.

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons

5.3. Add the TelerikRootComponent

Use a single TelerikRootComponent component as a top-level component in the app.

The TelerikRootComponent requires interactive render mode. Layout components are interactive only in applications with Global Interactivity location. This section applies only to apps with Global interactivity. If your app is using Per page/component interactivity, then check Using TelerikRootComponent in apps with per component interactivity instead.

@template

5.4. Register the Telerik Blazor Service

In a Blazor Web App project with interactive render mode Server, you register services in the Program.cs file of your project.

For interactive render modes WebAssembly and Auto, register the service in the Program.cs file of both the server and client project.

C# @template

Now your Blazor Server project can use the Telerik UI for Blazor components.

Step 6: Add a Component to a View

The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser.

  1. In .../Pages/Home.razor in the server or client project, add a TelerikButton component.

@template

See Also

  • Workflow Details for Telerik UI for Blazor
  • Using Blazor Sections inside Telerik Components
  • Getting Started Videos for Blazor
  • First Steps with Blazor Server
  • First Steps with Blazor WebAssembly