Skip to content

Latest commit

 

History

History
129 lines (73 loc) · 4.71 KB

server-blazor.md

File metadata and controls

129 lines (73 loc) · 4.71 KB
title page_title description slug tags published position
Server-Side Blazor - Tutorial
First Steps with Server-Side Blazor
First Steps with UI for Blazor Server-Side.
getting-started/server-side
get,started,first,steps,server
true
2

First Steps with Server-Side UI for Blazor

This article explains how to get the Telerik UI for Blazor components in your Server-side Blazor project and start using them quickly. The process consists of the following steps:

  1. Set Up a Blazor Project
  2. Add the Telerik Blazor Components to an Existing Project
    1. Add the Telerik NuGet Feed to Visual Studio
    2. Enable the Components in the Project
  3. Add a Telerik Component to a View

@template

@template

To create a server-side Blazor app, use a Blazor Server App project:

@template

  1. Choose the Blazor Server App project type and click Create.

    Select Blazor Project Type

@template

Step 2 - Add the Telerik Blazor Components to an Existing Project

@template

@template

1. Manage NuGet Packages

Right-click the project in the solution and select Manage NuGet Packages:

Manage NuGet Packages

2. Install the Telerik Package

Choose the telerik.com feed, find the Telerik.UI.for.Blazor package and click Install (make sure to use the latest version). If you don't have a commercial license, you will only see Telerik.UI.for.Blazor.Trial. Use that instead.

Add Telerik Blazor Package to the project

3. Add the JavaScript File

Add the telerik-blazor.js file to your main index file:

  • ~/Pages/_Host.cshtml for .NET 3.x and .NET 5
  • ~/Pages/_Layout.cshtml for .NET 6

HTML

@template

To enable the use of static assets in your project, add the following line to the startup file of your Server project:

  • Startup.cs for .NET 3.x and .NET 5
  • Program.cs for .NET 6

C# @template

4. Add the Stylesheet

Register the [Theme stylesheet]({%slug general-information/themes%}) in your main index file:

  • ~/Pages/_Host.cshtml for .NET 3.x and .NET 5
  • ~/Pages/_Layout.cshtml for .NET 6

@template

5. Register the Telerik Blazor Service

Open the startup file of your Server project and register the Telerik Blazor service:

  • Startup.cs for .NET 3.x and .NET 5
  • Program.cs for .NET 6

C# @template

6. Add Usings

Add the following to your ~/_Imports.razor file so the project recognizes our components in all files:

_Imports.razor

@using Telerik.Blazor
@using Telerik.Blazor.Components

7. @template

8. @template

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

Step 3 - Add a Telerik Component to a View

The final step is to use a component in a view and run it in the browser. For example:

  1. Add a Button component to the ~/Components/Pages/Index.razor view: @template

See Also

  • [Get Started with Client-side Blazor]({%slug getting-started/client-side%})
  • [Telerik Private NuGet Feed]({%slug installation/nuget%})
  • Getting Started Videos for Blazor