Telerik
/
blazor-docs
зеркало из https://github.com/telerik/blazor-docs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Edit Getting Started Section (#1133) 

* edit getting started tutorials

* docs:edit what-you-need.md

* edit docs templates

* edit vs-integration articles

* edit REPL articles

* update getting started tutorials

* Update getting-started/repl/overview.md

* Update getting-started/repl/overview.md

* Apply suggestions from code review

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update getting-started/what-you-need.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* update client assets section

* Update overview.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
This commit is contained in:
Yordan 2022-10-10 17:27:57 +03:00 коммит произвёл GitHub
Родитель 17adf6c403
Коммит c7b0270524
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
22 изменённых файлов: 322 добавлений и 407 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
_contentTemplates/common/general-info.md
Просмотреть файл

@ -11,11 +11,10 @@ the `Format` is culture-specific and the same format may produce different resul
#end
#cdn
You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.
You can reference the built-in Telerik assets like the JS Interop file and the theme stylesheets from a cloud CDN instead of a local resource on your server.
The Telerik Blazor CDN distributes the most common swatches of each base theme. Check out the [Telerik Blazor CDN URLs]({%slug themes-swatch-distribution%}#telerik-blazor-cdn).
All available swatches are distributed via dedicated Themes CDN. The following section contains a complete list of their CDN URLs - [Built-in themes and swatches list]({%slug themes-swatches%}#built-in-themes-and-swatches-list).
* The [Telerik UI for Blazor CDN]({%slug themes-swatch-distribution%}#telerik-blazor-cdn) distributes the most common [swatches]({%slug themes-swatches%}) for each base theme.
* The additional Themes CDN distributes [all available swatches for the built-in themes]({%slug themes-swatches%}#built-in-themes-and-swatches-list).
````CSHTML
<!DOCTYPE html>

140
_contentTemplates/common/get-started.md
Просмотреть файл

@ -1,85 +1,44 @@
#blazor-tutorial-intro
## Step 1 - Set Up a Blazor Project
#prerequisites-download
>tip This step-by-step tutorial starts with the basics. If you are already familiar with the Telerik NuGet Feed and Blazor in general, you may prefer the [Telerik UI for Blazor workflow]({%slug getting-started/what-you-need%}) article.
## Prerequisites
* To successfully complete the steps in this tutorial, make sure that you have installed a <a href="https://visualstudio.microsoft.com/vs/" target="_blank">current Visual Studio</a> version.
* To learn more about the compatibility of the Telerik UI for Blazor components with different browser and .NET versions, see the [system requirements]({%slug system-requirements%}).
>Make sure that you have installed the following:
* .NET - [.NET Core 3.1.x](https://dotnet.microsoft.com/download/dotnet-core/3.1), [.NET 5](https://dotnet.microsoft.com/download/dotnet/5.0) or [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0).
* Visual Studio - [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) (for .NET 3.x and .NET 5) or [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) (for .NET 6).
>
>The latest version of Telerik UI for Blazor is `{{site.uiForBlazorLatestVersion}}`, and it supports `{{site.supportedFrameworkVersion}}`.
>tip The latest version of Telerik UI for Blazor is `{{site.uiForBlazorLatestVersion}}`, and it supports `{{site.supportedFrameworkVersion}}`.
## Step 0: Download Telerik UI for Blazor
* If you have already purchased a Telerik UI for Blazor license, continue with the [next step and create a new project](#step-1-create-a-new-project).
* If you are new to UI for Blazor and haven't purchased a license yet, you must <a href="https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor" target="_blank">download and install the trial version</a> of the UI for Blazor components&mdash;this will activate your free trial and allow you to use the components. During the installation, select the **Set up Telerik NuGet package source** checkbox and the installer will configure the Telerik [online NuGet feed]({%slug installation/nuget%}) automatically. You will use this feed later in the tutorial.
>Trial users must complete the installation of the components. Otherwise their trial license will not be active and they cannot successfully complete the tutorial.
#end
#add-nuget-feed
### Add the Telerik NuGet Feed to Visual Studio
## Step 2: Add the Telerik NuGet Feed to Visual Studio
The recommended distribution method for the Telerik UI for Blazor packages is the private Telerik NuGet feed.
In this tutorial, you will use the [Telerik NuGet feed]({%slug installation/nuget%}) to download the UI for Blazor components. This NuGet feed is private and requires you to authenticate with your Telerik user name and password:
@[template](/_contentTemplates/common/get-started.md#nuget-update-note)
1. In Visual Studio and go to **Tools** > **NuGet Package Manager** > **Package Manager Settings**.
@[template](/_contentTemplates/common/get-started.md#start-trial)
1. Select **Package Sources** and then click the **+** button to add a new package source.
If you prefer to configure the NuGet package source manually, follow the steps in the [Setup the Telerik Private NuGet Feed]({%slug installation/nuget%}) article.
1. Enter a **Name** for the new package source, for example, `telerik.com`.
Once you have added the Telerik NuGet feed, continue by [enabling the components in the project](#enable-the-components-in-the-project).
#end
1. Add the `https://nuget.telerik.com/v3/index.json` URL as a **Source**. Click **OK**.
![Add the Telerik NuGet Feed in Visual Studio](images/telerik-nuget-feed.png)
#project-creation-part-1
>tipFor alternative download approaches, check the [Workflow article]({%slug getting-started/what-you-need%}).
* If you already have one, go to the [Add the Telerik Blazor Components to an Existing Project](#step-2---add-the-telerik-blazor-components-to-an-existing-project) section below.
* To create a new project, choose one of the following methods:
* [Create a Project with the Telerik VS Extensions](#create-a-project-with-the-telerik-vs-extensions).
* [Create a Project with Visual Studio](#create-a-project-with-visual-studio).
* [Create a Project with the CLI](#create-a-project-with-the-cli).
### Create a Project with the Telerik VS Extensions
You can use the [Telerik Visual Studio Extensions]({%slug getting-started-vs-integration-overview%}) that will [create and automatically configure the project]({%slug getting-started-vs-integration-new-project%}) so that you can start using the components immediately.
>tip If you prefer VS Code, you can use the [VS Code Extension]({%slug getting-started-vs-code-integration-overview%}) to create a Telerik-enabled project.
If you choose to create a project with the Telerik VS Extensions, you can jump directly to [Step 3 - Add a Telerik Component to a View](#step-3---add-a-telerik-component-to-a-view). The following sections in this article explain the manual steps to configure the project so that you can better understand the underlying process.
### Create a Project with Visual Studio
To create a project manually, without using the Telerik VS Extensions, follow these steps:
1. Open Visual Studio (2019 for .NET 3.x and .NET 5; 2022 for .NET 6).
1. Create a New Project.
1. Choose **Blazor App** and click **Next**. Then, choose a name and location for the project and click **Create**.
![Create new ASP.NET Core Web Application](images/create-new-application.png)
#end
#project-creation-cli
### Create a Project with the CLI
If you are not running Visual Studio, you can create the Blazor project from the command prompt. See the <a href="https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new#arguments" target="_blank">`dotnet new` command and the arguments for Blazor apps</a>.
#end
#start-trial
If you don't have an active license, [start a free trial](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor) - this will let you download the installation file, install the components, and use the Telerik NuGet feed. During the installation, select the **Set up Telerik NuGet package source** checkbox and the installer will configure the Telerik [online NuGet feed]({%slug installation/nuget%}) automatically:
![Automatic Telerik NuGet feed installation](/getting-started/images/automated-nuget-feed-setup.png)
#end
#get-access
### Enable the Components in the Project
To prepare the project for the Telerik UI for Blazor components, install the `Telerik.UI.for.Blazor` NuGet package, and then configure the project. For detailed instructions, see the video tutorial below or follow the instructions after the video.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fwR8Yxe7DPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
#end
@ -89,7 +48,7 @@ To prepare the project for the Telerik UI for Blazor components, install the `Te
<TelerikButton>Say Hello</TelerikButton>
1. Optionally, hook up a click handler that will show a message. The resulting view should look like this:
1. Optionally, hook up a click handler that will show a message. The resulting view will look like this:
**RAZOR**
@ -115,7 +74,7 @@ To prepare the project for the Telerik UI for Blazor components, install the `Te
![App in the browser](images/app-in-browser.png)
Now you have the Telerik components running in your Blazor app.
Well done! Now you have you first Telerik UI for Blazor component running in your Blazor app.
@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started)
@ -124,13 +83,13 @@ Now you have the Telerik components running in your Blazor app.
#next-steps-after-getting-started
## Next Steps
Next, you can explore the [live demos](https://demos.telerik.com/blazor-ui/) and the rest of the documentation. You can also find the entire demos project in the `demos` folder of your local installation. The project is runnable and you can inspect, modify, and copy its code. @[template](/_contentTemplates/common/get-started.md#demos-project-net-version)
* [Explore the Live Telerik UI for Blazor Demos](https://demos.telerik.com/blazor-ui/)
Many applications have a data grid component, and you can get started with the full-featured Telerik Grid by visiting the [Grid Overview]({%slug grid-overview%}) article.
* [Get Started with the Data Grid]({%slug grid-overview%})
We recommend to get familiar with the [fundametals of data binding our components]({%slug common-features-data-binding-overview%}). This information is applicable for all databound components.
* [See the Data Binding Fundamentals for Telerik UI for Blazor Components]({%slug common-features-data-binding-overview%}).
Finally, you can explore the [List of Components]({%slug blazor-overview%}#list-of-components) and pick the ones you are interested in.
* [Explore the List of Available Components]({%slug blazor-overview%}#list-of-components).
#end
#demos-project-net-version
@ -171,8 +130,6 @@ To setup a local NuGet package source, so you can install the Telerik components
#root-component-telerik-layout
Add the Telerik Layout
Next to your main layout file (by default, the `~/Shared/MainLayout.razor` file in the Blazor project), add a Razor component called `TelerikLayout.razor` with the following content:
@inherits LayoutComponentBase
@ -183,15 +140,18 @@ Next to your main layout file (by default, the `~/Shared/MainLayout.razor` file
#end
#root-component-main-layout
Configure the Main Layout
Open the main layout file (by default, the `~/Shared/MainLayout.razor` file in the Blazor project), and add `@layout TelerikLayout` as the *first line* in the file. This will ensure that the `TelerikRootComponent` wraps all the content in `MainLayout`. Alternatively, the `TelerikRootComponent` can reside directly in `MainLayout`, but we place it in another file for better separation of concerns.
#root-component-main-layout
In the main layout file (by default, the `~/Shared/MainLayout.razor` file in the Blazor project), add `@layout TelerikLayout` as the *first line* in the file. This will ensure that the `TelerikRootComponent` wraps all the content in the `MainLayout`.
@layout TelerikLayout
@inherits LayoutComponentBase
@* @Body and other code will be present here depending on your project *@
>Alternatively, the `TelerikRootComponent` can reside directly in the `MainLayout`, but placing it in another file helps for a better separation of concerns.
#end
@ -224,27 +184,3 @@ Open the main layout file (by default, the `~/Shared/MainLayout.razor` file in t
}
</style>
#end
#download-intro-para-for-get-started
If you are familiar with the Telerik NuGet Feed and Blazor in general, you may want to follow the shorter, more technical getting started article: [What You Need]({%slug getting-started/what-you-need%}). The current article is designed as a step-by-step tutorial for new users and starts from the basics.
## Step 0 - Download the Components
To follow the steps in this tutorial, you need access to the Telerik UI for Blazor components. The recommended download methods differ depending on your Telerik UI for Blazor license - [trial](#download-the-free-trial-version) or [commercial](#download-the-commercial-version).
### Download the Free Trial Version
If you want to try Telerik UI for Blazor, you can <a href="https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor" target="_blank">download a free, fully functional trial</a>. The trial offers the same functionality as the commercially licensed version.
### Download the Commercial Version
The easiest way to get the commercially licensed Telerik UI for Blazor components to your development machine is to use the <a href="https://www.telerik.com/download-trial-file/v2/control-panel" target="_blank">Progress Control Panel</a> or to download the [automated installer]({%slug installation/msi%}) from <a href="https://www.telerik.com/account/product-download?product=BLAZOR" target="_blank">your telerik.com account</a>.
Alternatively, you can also access the `.nupkg` files from [our private NuGet feed]({%slug installation/nuget%}) or by creating a [local feed from your installation]({%slug installation/msi%}#set-up-a-local-nuget-feed-in-visual-studio).
#end
#nuget-update-note
>tip Telerik now offers NuGet v3 API for our feed which is faster, lighter, and reduces the number of requests from NuGet clients. It is available at <a href = "https://nuget.telerik.com/v3/index.json" target = "_blank">https://nuget.telerik.com/v3/index.json.</a> We recommend switching to the v3 API since the old <a href = "https://nuget.telerik.com/nuget" target = "_blank">https://nuget.telerik.com/nuget</a> server will be deprecated.
#end

51
_contentTemplates/common/js-interop-file.md
Просмотреть файл

@ -1,10 +1,3 @@
#add-blazor-js-file-to-component
@[template](/_contentTemplates/common/js-interop-file.md#app-paths)
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
#end
#add-js-interop-file-to-getting-started-client
Add the `telerik-blazor.js` file to your main index file - `wwwroot/index.html`:
@ -34,7 +27,7 @@
. . .
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
<!-- For Trial licenses use
<!-- For Trial licenses, use
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>
-->
</head>
@ -47,7 +40,7 @@
. . .
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<!-- For Trial licenses use
<!-- For Trial licenses, use
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
-->
</head>
@ -73,38 +66,28 @@ namespace MyBlazorAppName
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//more code may be present here
//More code may be present here.
//make sure this is present to enable static files from a package
//To enable static files from a package, make sure this is present.
app.UseStaticFiles();
//more code may be present here
//More code may be present here.
}
}
}
````
````Program.cs
//more code may be present here
//More code may be present here.
//make sure this is present to enable static files from a package
//To enable static files from a package, make sure this is present.
app.UseStaticFiles();
//more code may be present here
//More code may be present here.
````
#end
#app-paths
Add the following to your main index file:
* Client-Side Blazor app - `wwwroot/index.html`
* Server-Side Blazor app
* `~/Pages/_Host.cshtml` for .NET 3.x and .NET 5
* `~/Pages/_Layout.cshtml` for .NET 6
#end
#register-telerik-service-server
<div class="skip-repl"></div>
````Startup.cs
@ -114,20 +97,20 @@ namespace MyBlazorAppName
{
public void ConfigureServices(IServiceCollection services)
{
//more code may be present here
//More code may be present here.
services.AddTelerikBlazor();
}
//more code may be present here
//More code may be present here.
}
}
````
````Program.cs
//more code may be present here
//More code may be present here.
builder.Services.AddTelerikBlazor();
//more code may be present here
//More code may be present here.
````
#end
@ -140,7 +123,7 @@ using System.Threading.Tasks;
using System.Net.Http;
using System;
namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace
namespace ClientBlazorProject.Client // Make sure this matches your actual WASM project namespace.
{
public class Program
{
@ -150,12 +133,12 @@ namespace ClientBlazorProject.Client // make sure this matches your actual WASM
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// there may be more code here
// There may be more code here.
// register the Telerik services
// Register the Telerik services.
builder.Services.AddTelerikBlazor();
// there may be more code here
// There may be more code here.
// sample host builder for a WASM app, yours may differ
await builder.Build().RunAsync();
}
@ -174,7 +157,7 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// register the Telerik services
// Register the Telerik services.
builder.Services.AddTelerikBlazor();
await builder.Build().RunAsync();

2
deployment/troubleshooting.md
Просмотреть файл

@ -68,7 +68,7 @@ At the time of writing, sometimes the following issues have been reported that p
}
}
* On Linux (and often Docker), paths are case-sensitive, so make sure you have the correct casing when registering the styles and scripts (see the [Client Assets]({%slug getting-started/what-you-need%}#client-assets) section of the documentation).
* On Linux (and often Docker), paths are case-sensitive, so make sure you have the correct casing when registering the styles and scripts (see the [Client Assets]({%slug getting-started/what-you-need%}#adding-the-client-assets) section of the documentation).
* Some reports indicate that deploying to a Docker container never copies over the static assets and you may have to either copy the file manually, or use it from [our CDN]({%slug general-information/themes%}#cdn). This may be related to the static asset configurations from the previous points, however.

92
getting-started/client-blazor.md
Просмотреть файл

@ -1,7 +1,7 @@
---
title: Client-Side Blazor - Tutorial
title: Client-Side Blazor (Tutorial)
page_title: First Steps with Client-Side Blazor
description: First Steps with UI for Blazor Client-side.
description: Make your first steps with Telerik UI for Blazor and build an app that hosts the Blazor UI components client-side (by using Blazor WebAssembly, WASM).
slug: getting-started/client-side
tags: get,started,first,steps,client
published: true
@ -10,86 +10,60 @@ position: 1
# First Steps with Client-Side UI for Blazor
This article explains how to get the <a href = "https://www.telerik.com/blazor-ui" target="_blank">Telerik UI for Blazor components</a> in your **Client-side (WebAssembly)** Blazor project and start using them quickly. The process consists of the following steps:
This article explains how to get the <a href = "https://www.telerik.com/blazor-ui" target="_blank">Telerik UI for Blazor components</a> in your **Client-side (WebAssembly)** Blazor project and start using them quickly. 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.
1. [Set Up a Blazor Project](#step-1---set-up-a-blazor-project)
* [Create a Project with the Telerik VS Extensions](#create-a-project-with-the-telerik-vs-extensions)
* [Create a Project with Visual Studio](#create-a-project-with-visual-studio)
* [Create a Project with the CLI](#create-a-project-with-the-cli)
1. [Add the Telerik Blazor Components to an Existing Project](#step-2---add-the-telerik-blazor-components-to-an-existing-project)
1. [Add the Telerik NuGet Feed to Visual Studio](#add-the-telerik-nuget-feed-to-visual-studio)
1. [Enable the Components in the Project](#enable-the-components-in-the-project)
1. [Add a Telerik Component to a View](#step-3---add-a-telerik-component-to-a-view)
@[template](/_contentTemplates/common/get-started.md#prerequisites-download)
## Step 1: Create a New Project
@[template](/_contentTemplates/common/get-started.md#download-intro-para-for-get-started)
1. Open Visual Studio and select **Create a new project**.
1. Select the **Blazor WebAssembly App** project type, enter a name for your project, and then click **Next**.
@[template](/_contentTemplates/common/get-started.md#blazor-tutorial-intro)
To create a client-side Blazor app, use an **ASP.NET Core hosted** Blazor project:
@[template](/_contentTemplates/common/get-started.md#project-creation-part-1)
1. Choose the **Blazor WebAssembly App** project type, select the **ASP.NET Core hosted** checkbox, and click **Create**.
![Select Blazor Project Type](images/choose-project-template.png)
@[template](/_contentTemplates/common/get-started.md#project-creation-cli)
## Step 2 - Add the Telerik Blazor Components to an Existing Project
1. Select the **ASP.NET Core hosted** checkbox and the desired framework, and then click **Create**.
@[template](/_contentTemplates/common/get-started.md#add-nuget-feed)
@[template](/_contentTemplates/common/get-started.md#get-access)
## Step 3: Install the Telerik UI for Blazor Components
1\. Manage NuGet Packages
1. Right-click the `.Client` project in the solution and select **Manage NuGet Packages**.
Right-click the `Client` project in the solution and select **Manage NuGet Packages**:
![Manage NuGet Packages](images/manage-nuget-packages-for-client-app.png)
![Manage NuGet Packages](images/manage-nuget-packages-for-client-app.png)
2. Install the `Telerik.UI.for.Blazor` package:
2\. Install the Telerik Package
1. Select the `telerik.com` **Package source** that you [added earlier](#step-2-add-the-telerik-nuget-feed-to-visual-studio). As this is a private NuGet feed, you must authenticate with your [Telerik account](https://www.telerik.com/account/) user name and password.
1. Select the **Browse** tab, find the `Telerik.UI.for.Blazor` package, and click **Install**. If you use a trial license, you will see only the `Telerik.UI.for.Blazor.Trial`&mdash;use that instead.
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 see only `Telerik.UI.for.Blazor.Trial`. Use that instead.
![Add Telerik Blazor Package to Client Project](images/add-telerik-nuget-to-client-app.png)
![Add Telerik Blazor Package to Client Project](images/add-telerik-nuget-to-client-app.png)
## Step 4: Enable the Blazor UI Components
3\. Add the JavaScript File
To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
Add the `telerik-blazor.js` file to your main index file - `wwwroot/index.html`:
1\. Add the `telerik-blazor.js` file to your main index file&mdash;`wwwroot/index.html`.
**HTML**
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
To enable the use of static assets in your project, add the following line to the startup file of your **Server** project:
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the startup file of your `.Server` project (by default, this line is already present):
* `Startup.cs` for .NET 3.x and .NET 5
* `Program.cs` for .NET 6
* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6
**C#**
**C#**
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
4\. Add the Stylesheet
Open the `~/wwwroot/index.html` file in the client web application and register the [Theme stylesheet]({%slug general-information/themes%}):
3\. In the `~/wwwroot/index.html` file of the client web application, add the [theme stylesheet]({%slug general-information/themes%}). This allows you to select the visual theme for the UI components.
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
5\. Register the Telerik Blazor Service
Open the `~/Program.cs` file in the client web application and register the Telerik Blazor service:
4\. In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.
**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
6\. Add Usings
Add the following to your `~/_Imports.razor` file so the project recognizes the Telerik components in all files:
5\. In the `~/_Imports.razor` file, add the `@using` directives below&mdash;this configures the project to recognize the Telerik components in all files.
**_Imports.razor**
@ -97,19 +71,25 @@ Add the following to your `~/_Imports.razor` file so the project recognizes the
@using Telerik.Blazor.Components
7\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
8\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
7\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
Now your project can use the Telerik UI for Blazor components.
## Step 3 - Add a Telerik Component to a View
## Step 5: Add a Component to a View
The final step is to use a component in a view and run it in the browser. For example:
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. Add a **Button** component to the `~/Pages/Index.razor` view:
1. In the `~/Pages/Index.razor` view, add a `TelerikButton` component.
@[template](/_contentTemplates/common/get-started.md#add-component-sample)
## Video Tutorial
If you prefer video instructions, you can also check the video tutorial below.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fwR8Yxe7DPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## See Also
* [Get Started with Server-side Blazor]({%slug getting-started/server-side%})

Двоичные данные
getting-started/images/telerik-nuget-feed.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 11 KiB

43
getting-started/repl/intergration.md
Просмотреть файл

@ -1,7 +1,7 @@
---
title: Integration
page_title: Telerik REPL for Blazor Integration
description: Telerik REPL for Blazor integration in other Telerik Resources, Visual Studio and Visual Studio Code
description: Telerik REPL for Blazor is integrated with other Telerik resources like demos and documentation as well as Visual Studio and Visual Studio Code.
slug: blazor-repl-integration
tags: telerik,blazor,repl,integration
published: True
@ -10,7 +10,7 @@ position: 10
# Telerik REPL for Blazor Integration
Telerik REPL for Blazor is integrated in our resources (documentation and demos), as well as Visual Studio and Visual Studio Code.
Telerik REPL for Blazor is integrated in the UI for Blazor resources (documentation and demos), as well as Visual Studio and Visual Studio Code.
In this article:
@ -22,9 +22,9 @@ In this article:
Most code examples in the Telerik UI for Blazor documentation are directly runnable in Telerik REPL for Blazor. This provides interactive experience, as the snippets are easy to test and edit. The toolbar above each runnable code snippet contains the following options:
* `Edit` - click to open the source in the integrated the Telerik REPL for Blazor Editor.
* **Edit**&mdash;Opens the source in the integrated Telerik REPL for Blazor Editor.
* `Preview` - click to run the snippet in the integrated the Telerik REPL for Blazor Result View.
* **Preview**&mdash;Runs the snippet in the integrated Telerik REPL for Blazor Result View.
![Documentation Integration](../images/repl-docs-integration.png)
@ -32,7 +32,7 @@ Most code examples in the Telerik UI for Blazor documentation are directly runna
## Demos Integration
[The Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui) support integration with the Telerik REPL for Blazor. The demo window toolbar provides option for editing the demo in Telerik REPL for Blazor. Once you select that option, you will be redirected to the Telerik REPL for Blazor and its editor will contain the source code of the current demo, so you can directly edit and test it.
[The Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui) support integration with Telerik REPL for Blazor. The demo window toolbar provides option for editing the demo in Telerik REPL for Blazor. Once you select that option, you will be redirected to the Telerik REPL for Blazor and its editor will contain the source code of the current demo, so you can directly edit and test it.
![Demos Integration](../images/repl-demos-integration.png)
@ -41,32 +41,35 @@ Most code examples in the Telerik UI for Blazor documentation are directly runna
Telerik Extensions for [Visual Studio]({%slug getting-started-vs-integration-overview%}) and [Visual Studio Code]({%slug getting-started-vs-code-integration-overview%}) provide option to easily share your code to the Telerik REPL for Blazor with a few clicks. You can share the whole file or just a selection.
The command can be used if more than 10 symbols are selected. Otherwise Visual Studio will disable the command, and Visual Studio Code will show an error message ("Expected at least 10 characters"). In case of multiple selection every new piece will be concatenated on a new line.
The command can be used if more than 10 symbols are selected. Otherwise Visual Studio will disable the command, and Visual Studio Code will show an error message ("Expected at least 10 characters"). In case of multiple selection, every new piece will be concatenated on a new line.
If no selection is made, the whole file will be shared to Telerik REPL for Blazor. Only single files can be shared per command and not the whole application. Once the share to REPL process is triggered, status notifications will appear in the bottom-right corner for a few seconds. After that, the default browser will open with the uploaded snippet.
The `Share to Telerik REPL for Blazor` command can be accessed as follows:
### Sharing to REPL in Visual Studio
### Visual Studio
1. Get the extension from the Visual Studio Marketplace:
Get the extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TelerikInc.TelerikBlazorVSExtensions).
* <a href="https://marketplace.visualstudio.com/items?itemName=TelerikInc.ProgressTelerikBlazorVSExtensions" target="_blank">Extension for Visual Studio 2022 for Windows</a>
* <a href="https://marketplace.visualstudio.com/items?itemName=TelerikInc.TelerikBlazorVSExtensions" target="_blank">Extension for Visual Studio 2019 for Windows</a>
Access the command through the Context Menu - select a section that you want to share, right click on it to open the context menu and click "Share to Telerik REPL for Blazor" option.
1. Access the command through the Context Menu:
1. Select a section that you want to share.
1. Right-click the selection to open the context menu.
1. Click the **Share to Telerik REPL for Blazor** option.
![VS - Share to Telerik REPL for Blazor](../images/vs-extension-share-to-repl.png)
![VS - Share to Telerik REPL for Blazor](../images/vs-extension-share-to-repl.png)
### Sharing to REPL Visual Studio Code
1. [Get the Visual Studio Code extension]({%slug getting-started-vs-code-integration-overview%}) from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TelerikInc.blazortemplatewizard).
### Visual Studio Code
1. Access the command using either the context menu or the command palette:
Get the extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TelerikInc.blazortemplatewizard). Access the command using one of the following:
* To use the context menu option, select a section that you want to share, right-click the selection, and then click **Share to Telerik REPL for Blazor**.
* Context Menu option - select a section that you want to share, right click on it to open the context menu and click "Share to Telerik REPL for Blazor" option.`
![VS Code - Share to Telerik REPL for Blazor](../images/vs-code-extension-share-to-repl.png)
![VS Code - Share to Telerik REPL for Blazor](../images/vs-code-extension-share-to-repl.png)
* To use the command palette, select a section that you want to share, search for **Share to Telerik REPL for Blazor** in the command palette and select it.
* Command in the command palette - select a section that you want to share, search for "Share to Telerik REPL for Blazor" in the command palette and choose it.
![VS Code - Share to Telerik REPL for Blazor](../images/vs-code-extension-share-to-repl-command-palette.png)
![VS Code - Share to Telerik REPL for Blazor](../images/vs-code-extension-share-to-repl-command-palette.png)

33
getting-started/repl/overview.md
Просмотреть файл

@ -1,7 +1,7 @@
---
title: Overview
page_title: Telerik REPL for Blazor Overview
description: Telerik REPL for Blazor - Write, Compile, Execute and Share your rich UI Blazor components.
description: Telerik REPL for Blazor allows you to write, compile, execute, and share your rich UI Blazor components directly in the browser.
slug: blazor-repl
tags: telerik,blazor,repl
published: True
@ -11,9 +11,8 @@ previous_url: /getting-started/repl
# Telerik REPL for Blazor Overview
<a href = "https://telerik.com/blazor-ui/repl/getting-started" target = "_blank"> Progress Telerik REPL for Blazor </a> is innovative web-based application that allows you to write, compile, execute and share your rich Blazor UI components. You can write your code directly in the integrated editor and execute it in the browser security sandbox without any communication with a server. The code is compiled on top of Web Assembly which delivers near to native performance. With Telerik REPL for Blazor you can also easily edit, save and share your code.
<a href = "https://www.telerik.com/blazor-ui/repl" target = "_blank"> Progress Telerik REPL for Blazor </a> is an innovative web-based application that allows you to write, compile, execute, and share your rich Blazor UI components. You can write your code directly in the integrated editor and execute it in the browser security sandbox without any communication with a server. The code is compiled on top of Web Assembly which delivers near to native performance. With Telerik REPL for Blazor, you can also easily edit, save, and share your code.
>important Telerik REPL for Blazor integrates 3.0.0 version of Telerik.UI.for.Blazor. Any snippet created before 3.0.0 that uses the Telerik Components might need an update due to the [breaking changes in the release]({%slug changes-in-3-0-0%}).
The <a href = "https://blazorrepl.telerik.com/" target = "_blank">Telerik REPL for Blazor application</a> interface consists of five main sections:
@ -27,37 +26,37 @@ The <a href = "https://blazorrepl.telerik.com/" target = "_blank">Telerik REPL f
## Toolbar
The Toolbar of Telerik REPL for Blazor contains the operations that can be performed:
The Toolbar of Telerik REPL for Blazor provides access to the operations that you can perform:
* `Run` - executes the code from the editor and renders it in the [Result View](#result-view)
* **Run**&mdash;executes the code from the editor and renders it in the [Result View](#result-view).
* `Get Started` - links the [getting started article](https://telerik.com/blazor-ui/repl/getting-started) for the product
* **Get Started**&mdash;links the [Getting Started article](https://telerik.com/blazor-ui/repl/getting-started) for Telerik UI for Blazor.
* `Share` - allows you to share the snippet. The menu is divided in two sections:
* `Share` - In the popup, you will find a generated public link with the snippet that you can share as desired. The menu also provides several options for direct sharing in social media.
* `Embed` - generates a link which you can use to embed the snippet in blog posts and other websites. Based on your use case, you can choose whether to embed only the Editor, the Result View, the Error Console or all three. You will see a preview of the embed in the popup upon selecting the desired option.
* **Share**&mdash;allows you to share the snippet. The menu is divided into two sections:
* **Share**&mdash;in the popup, you will find a generated public link with the snippet that you can share as desired. The menu also provides several options for direct sharing in social media.
* **Embed**&mdash;generates a link which you can use to embed the snippet in blog posts and other websites. Based on your use case, you can choose whether to embed only the Editor, the Result View, the Error Console or all three. Upon selecting the desired option, you will see a preview of the embed in the popup.
* `Feedback` - leads to the [public feedback portal for Telerik REPL for Blazor](https://feedback.telerik.com/repl) where you can share your enhancement requests and eventual bug reports. We use it to constantly monitor the community interest and demand and thus improve our products.
* **Feedback**&mdash;leads to the [public feedback portal for Telerik REPL for Blazor](https://feedback.telerik.com/repl) where you can share your enhancement requests and eventual bug reports. We use it to constantly monitor the community interest and demand and thus improve our products.
## Sidebar
The Sidebar provides the following functionalities:
* NuGet Package Manager - it allows you to install third party NuGet packages that are stored in the public `nuget.org` repository. If the published NuGet requires accepting license agreement, you will see a confirmation prompt. The latest `Telerik UI for Blazor` package is already installed by default.
* **NuGet Package Manager**&mdash;it allows you to install third party NuGet packages that are stored in the public `nuget.org` repository. If the published NuGet requires accepting a license agreement, you will see a confirmation prompt. The latest `Telerik UI for Blazor` package is already installed by default.
* Static Asset Manager - it allows you to add CDN URLs for your CSS or JavaScript files. Place the file URL in the input and click the download button. This will automatically add references for the corresponding files. Once the desired asset is added, you can easily enable/disable it via a switch. In case some of the installed NuGet packages include CSS/JavaScript files, they will automatically be listed in this section, so you can manage them.
* **Static Asset Manager**&mdash;it allows you to add CDN URLs for your CSS or JavaScript files. Place the file URL in the input and click the download button. This will automatically add references for the corresponding files. Once the desired asset is added, you can easily enable/disable it via a switch. In case some of the installed NuGet packages include CSS/JavaScript files, they will automatically be listed in this section, so you can manage them.
* Telerik UI Asset Manager - shows the Telerik.UI.for.Blazor package version and allows you to change or update it. Starting from September 14, 2022 (R3 2022), each REPL example will maintain its Telerik UI package version until changed explicitly. There is also a list of the available [built-in themes]({%slug general-information/themes%}) and their corresponding [color swatches]({%slug themes-swatches%}). When you select a different theme or swatch, you can immediately see the applied styles in the Result View.
* **Telerik UI Asset Manager**&mdash;shows the Telerik.UI.for.Blazor package version and allows you to change or update it. Starting from September 14, 2022 (R3 2022), each REPL example maintains its Telerik UI package version until changed explicitly. The Asset Manager also shows a list with the available [built-in themes]({%slug general-information/themes%}) and their corresponding [color swatches]({%slug themes-swatches%}). When you select a new theme or swatch, you can immediately see the applied styles in the Result View.
* Snippets and Scaffolders - it allows you to add predefined component snippets or scaffold some componnents defining your desired configuration. [Read more about Snippets and Scaffolders...]({%slug blazor-repl-snippets-scaffolders%})
* **Snippets and Scaffolders**&mdash;it allows you to add predefined component snippets or scaffold some components defining your desired configuration. [Read more about Snippets and Scaffolders...]({%slug blazor-repl-snippets-scaffolders%})
* Startup Config - the config icon at the bottom of the Sidebar opens the `Startup.cs` file of the project. You can configure services or other settings there.
* **Startup Config**&mdash;the config icon at the bottom of the Sidebar opens the `Startup.cs` file of the project. You can configure services or other settings there.
## Editor
The Editor allows you to type, paste and edit your code. It always contains `_Main.razor` file and you can also add other files to the project via the `+` button.
The Editor allows you to type, paste, and edit your code. It always contains a `_Main.razor` file and you can also add other files to the project via the **+** button.
The newly added files could be `.razor` (pages, components) or `.cs` (models, code-behind files, services, etc.). All files of type `.razor` should be named with a capital letter.
The newly added files can be `.razor` (pages, components) or `.cs` (models, code-behind files, services, etc.). All files of type `.razor` must start with a capital letter.
## Result View

22
getting-started/repl/snippets-and-scaffolders.md
Просмотреть файл

@ -10,7 +10,9 @@ position: 5
# Telerik REPL for Blazor Snippets and Scaffolders
Telerik REPL for Blazor supports the following features for increased developer productivity:
Telerik REPL for Blazor provides code snippets and scaffolders to increase your productivity. They enable you to quickly add and configure a selection of UI components in the REPL UI.
In this article:
* [Snippets](#snippets)
* [Scaffolders](#scaffolders)
@ -23,22 +25,22 @@ The basic snippets are listed in the `Snippets and Scaffolders` section of the R
A complete list of the snippets for a specific component will be displayed in a popup once you start typing the component name in the editor.
REPL for Blazor allows you to add the snippets in several ways:
REPL for Blazor allows you to add the snippets through the [**+** button](#add-button), by [dragging the selected component](#dragging-the-component), or [typing in the editor](#typing-in-the-editor).
### Add button
### Add Button
There is a `+` button next to each snippet in the `Snippets and Scaffolders` menu. Clicking it will automatically add the snippet at the current cursor position in the REPL editor. Then you can additionally configure the component and add the code block for the `C#` part.
To add a component in the REPL editor, use the `+` button next to each snippet in the **Snippets and Scaffolders** menu. Clicking it adds the snippet at the current cursor position in the REPL editor. Then you can configure the component and add the code block for the `C#` part.
### Drag the component
### Dragging the Component
You can drag the component name from the `Snippets and Scaffolders` menu to directly add its basic snippet into the REPL editor. The snippet will be inserted at the current cursor position. Then you can additionally configure the component and add the code block for the `C#` part.
To directly insert a basic snippet with the desired component into the REPL editor, drag the component name from the **Snippets and Scaffolders** menu. The snippet will be inserted at the current cursor position. Then you can configure the component and add the code block for the `C#` part.
### Type in the editor
### Typing in the Editor
While typing a component name in the editor, you will see a list of suggestions including all available snippets for the specific component. To add the snippet:
* Navigate through the list to select the desired snippet and press `Enter` or `Tab`.
* Single click on the desired snippet in the list.
1. Navigate through the list to select the desired snippet and press `Enter` or `Tab`.
1. Select the desired snippet from the list.
## Scaffolders
@ -54,4 +56,4 @@ To use the scaffolders:
1. Click the `Scaffold` button to add the scaffolder to the editor.
Telerik REPL for Blazor allows using one scaffolder at a time. By defaut, the scaffolder will always be added to the `__Main.razor` file as this is the entry `@page` of the application. When you scaffold a component, it will override the current code in the `__Main.razor` file.
Telerik REPL for Blazor allows using one scaffolder at a time. By default, the scaffolder will always be added to the `__Main.razor` file as this is the entry `@page` of the application. When you scaffold a component, it will override the current code in the `__Main.razor` file.

103
getting-started/server-blazor.md
Просмотреть файл

@ -1,7 +1,7 @@
---
title: Server-Side Blazor - Tutorial
title: Server-Side Blazor (Tutorial)
page_title: First Steps with Server-Side Blazor
description: First Steps with UI for Blazor Server-Side.
description: Make your first steps with Telerik UI for Blazor and build an app that runs the UI components server-side in Blazor server.
slug: getting-started/server-side
tags: get,started,first,steps,server
published: true
@ -10,96 +10,71 @@ position: 2
# First Steps with Server-Side UI for Blazor
This article explains how to get the Telerik UI for Blazor components in your <a href = "https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server" target="_blank">**Server-side** Blazor</a> project and start using them quickly. The process consists of the following steps:
This article explains how to get the Telerik UI for Blazor components in your <a href = "https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server" target="_blank">**Server-side** Blazor</a> project and start using them quickly. 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.
1. [Set Up a Blazor Project](#step-1---set-up-a-blazor-project)
* [Create a Project with the Telerik VS Extensions](#create-a-project-with-the-telerik-vs-extensions)
* [Create a Project with the CLI](#create-a-project-with-the-cli)
* [Create a Project with Visual Studio](#create-a-project-with-visual-studio)
1. [Add the Telerik Blazor Components to an Existing Project](#step-2---add-the-telerik-blazor-components-to-an-existing-project)
1. [Add the Telerik NuGet Feed to Visual Studio](#add-the-telerik-nuget-feed-to-visual-studio)
1. [Enable the Components in the Project](#enable-the-components-in-the-project)
1. [Add a Telerik Component to a View](#step-3---add-a-telerik-component-to-a-view)
@[template](/_contentTemplates/common/get-started.md#prerequisites-download)
## Step 1: Create a New Project
@[template](/_contentTemplates/common/get-started.md#download-intro-para-for-get-started)
1. Open Visual Studio and select **Create a new project**.
1. Select the **Blazor Server App** project type, enter a name for your project, and then click **Next**.
@[template](/_contentTemplates/common/get-started.md#blazor-tutorial-intro)
To create a server-side Blazor app, use a **Blazor Server App** project:
@[template](/_contentTemplates/common/get-started.md#project-creation-part-1)
1. Choose the **Blazor Server App** project type and click **Create**.
![Select Blazor Project Type](images/choose-project-template-server-blazor.png)
@[template](/_contentTemplates/common/get-started.md#project-creation-cli)
## Step 2 - Add the Telerik Blazor Components to an Existing Project
1. Select the desired framework and click **Create**.
@[template](/_contentTemplates/common/get-started.md#add-nuget-feed)
@[template](/_contentTemplates/common/get-started.md#get-access)
## Step 3: Install the Telerik UI for Blazor Components
1\. Manage NuGet Packages
1. Right-click the Blazor Server project in the solution and select **Manage NuGet Packages**.
Right-click the Blazor Server project in the solution and select `Manage NuGet Packages`:
![Manage NuGet Packages](images/manage-nuget-packages-for-server-app.png)
![Manage NuGet Packages](images/manage-nuget-packages-for-server-app.png)
2. Install the `Telerik.UI.for.Blazor` package:
2\. Install the Telerik Package
1. Select the `telerik.com` **Package source** that you [added earlier](#step-2-add-the-telerik-nuget-feed-to-visual-studio). As this is a private NuGet feed, you must authenticate with your [Telerik account](https://www.telerik.com/account/) user name and password.
1. Select the **Browse** tab, find the `Telerik.UI.for.Blazor` package, and click **Install**. If you use a trial license, you will see only the `Telerik.UI.for.Blazor.Trial`&mdash;use that instead.
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](images/add-telerik-nuget-to-server-app.png)
![Add Telerik Blazor Package to the project](images/add-telerik-nuget-to-server-app.png)
## Step 4: Enable the Blazor UI Components
3\. Add the JavaScript File
To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
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
1\. Add the `telerik-blazor.js` file to your main index file:
* `~/Pages/_Host.cshtml` for .NET 3.x
* `~/Pages/_Layout.cshtml` for .NET 6
**HTML**
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the startup file of your Blazor Server project (by default, this line is already present):
To enable the use of static assets in your project, add the following line to the startup file of your **Blazor Server** project:
* `Startup.cs` for .NET 3.x and .NET 5
* `Program.cs` for .NET 6
* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6
**C#**
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
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
3\. To select the visual theme for the UI components, add the [theme stylesheet]({%slug general-information/themes%}) in you main index file:
* Use the `~/Pages/_Host.cshtml` index file for .NET 3.x
* Use the `~/Pages/_Layout.cshtml` index file for .NET 6
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
5\. Register the Telerik Blazor Service
4\. In the startup file of your Blazor Server project, register the Telerik Blazor Service:
Open the startup file of your **Blazor Server** project and register the Telerik Blazor service:
* `Startup.cs` for .NET 3.x and .NET 5
* `Program.cs` for .NET 6
* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6
**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
6\. Add Usings
Add the following to your **`~/_Imports.razor`** file so the project recognizes our components in all files:
5\. In the `~/_Imports.razor` file, add the `@using` directives below&mdash;this configures the project to recognize the Telerik components in all files.
**_Imports.razor**
@ -114,16 +89,22 @@ Add the following to your **`~/_Imports.razor`** file so the project recognizes
Now your Blazor Server project can use the Telerik UI for Blazor components.
## Step 3 - Add a Telerik Component to a View
## Step 5: Add a Component to a View
The final step is to use a component in a view and run it in the browser. For example:
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 the `~/Components/Pages/Index.razor` view, add a `TelerikButton` component.
1. **Add** a **Button** component to the `~/Components/Pages/Index.razor` view:
@[template](/_contentTemplates/common/get-started.md#add-component-sample)
## Video Tutorial
If you prefer video instructions, you can also check the video tutorial below.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fwR8Yxe7DPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## 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](https://www.youtube.com/watch?v=aaRAZYaJ4xc&list=PLvmaC-XMqeBYPTwcm478vs8Rujq2tiVJo)

2
getting-started/vs-code-integration/scaffolders.md
Просмотреть файл

@ -15,7 +15,7 @@ The Telerik Visual Studio Code extension provides scaffolders for increased deve
To use the **Telerik UI for Blazor Scaffolders**, install the Telerik UI for Blazor Visual Studio Code Extension. @[template](/_contentTemplates/common/general-info.md#vs-code-x-download)
## Add a new component page
## Add a New Component Page
1. Right-click on the name of the solution
1. From the popup menu select the `Telerik UI for Blazor Project Item`

19
getting-started/vs-integration/convert-project-wizard.md
Просмотреть файл

@ -12,6 +12,19 @@ This article demonstrates how to enable the Progress&reg; Telerik&reg; UI for Bl
To add the Telerik Components to your existing Blazor application, use the **Convert Project** wizard. The wizard detects all installed versions of Telerik UI for Blazor and lists them in the **Version** combobox&mdash;this enables you to start your project with the desired version. You can also [get the latest version]({%slug getting-started-vs-integration-latest-version%}) to make sure you are up to date.
The wizard automates several steps for you that you otherwise must perform manually:
* Adding the client assets to your project:
* Adding the [Telerik stylesheet]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Adding the [JS Interop file]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Configuring the project to use the Telerik UI for Blazor components:
* Adding the [required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
* Adding the [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
* Registering the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).
## Get the Wizard
To use the **Convert Project** wizard, install the Telerik UI for Blazor Visual Studio Extensions. @[template](/_contentTemplates/common/general-info.md#vsx-download)
@ -65,10 +78,6 @@ The wizard provides you with the following options:
The wizard automates several steps for you that you can also perform manually. To get a better understanding of what the wizard does for you, see either of the following articles (they provide the same information in different formats):
* [Getting Started with Client-side apps]({%slug getting-started/client-side%})
* [Getting Started with Server-side apps]({%slug getting-started/server-side%})
* [Overview of what you need]({%slug getting-started/what-you-need%})
## Troubleshooting
There are three common problems when converting a project:
@ -122,5 +131,5 @@ The fix is to move the `TelerikLayout.razor` file to the original `Shared` folde
* [Downloading the Latest Telerik UI for Blazor Versions]({% slug getting-started-vs-integration-latest-version %})
* [Getting Started with Client-side apps]({%slug getting-started/client-side%})
* [Getting Started with Server-side apps]({%slug getting-started/server-side%})
* [Overview of what you need]({%slug getting-started/what-you-need%})
* [Workflow for Using the UI Components for Blazor]({%slug getting-started/what-you-need%})

4
getting-started/vs-integration/introduction.md
Просмотреть файл

@ -8,7 +8,7 @@ position: 1
# Visual Studio Integration Overview
The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) Extensions enhance the experience in developing Blazor web applications with Telerik UI for Blazor.
To integrate with Visual Studio, Telerik UI for Blazor provides Visual Studio (VS) Extensions. These extensions enhance the experience in developing Blazor web applications with Telerik UI for Blazor.
{% if site.has_cta_panels == true %}
{% include cta-panel-introduction.html %}
@ -16,7 +16,7 @@ The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) Extensions enhan
The Telerik Blazor Extensions provide the following advantages:
* They facilitate the [creation of projects]({% slug getting-started-vs-integration-new-project %}).
* They facilitate the [creation of projects]({% slug getting-started-vs-integration-new-project %}) and enable you to create a pre-configured project from a template so you can start using the Telerik UI for Blazor components immediately without additional project setup.
* They allow you to [add the Telerik Components to an existing project]({%slug getting-started-vs-integration-convert-project%}) with a few clicks.

10
getting-started/vs-integration/latest-version-retrieval.md
Просмотреть файл

@ -8,7 +8,7 @@ position: 4
# Download New Versions
The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) Extensions enable you to keep your projects updated.
The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) Extensions allow you to download the latest version of the UI components without leaving Visual Studio.
<!--
@ -21,12 +21,10 @@ Clicking the **Update Now** button starts the Latest Version Acquirer tool which
-->
Clicking the **Get Latest** button in the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard starts the Latest Version Acquirer tool. You must enter your Telerik credentials to continue. If you do not have a [www.telerik.com](https://www.telerik.com) account, select the **Create an account for free** link.
Clicking the **Get Latest** button in the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard starts the Latest Version Acquirer tool. The tool checks for new versions of the UI components and allows you to download them to your computer. You must enter your Telerik credentials to continue. If you do not have a [www.telerik.com](https://www.telerik.com) account, select the **Create an account for free** link.
1. Log in with your Telerik credentials
>tip To avoid entering your Telerik credentials multiple times, select **Save my password**. The credentials are saved securely in a per-user context. Other users on the machine do not have access to your stored credentials.
![First, log in](images/login-vs-ext-download.png)
>tip See the [Telerik UI for Blazor release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) for more information on the latest available versions.
@ -37,12 +35,10 @@ Clicking the **Get Latest** button in the [Create New Project]({% slug getting-s
1. Return to the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard and select the newly downloaded version from the dropdown menu.
>tip If you use the **Download** or **Get Latest** buttons on the **Create New Project** screen to launch the update, the wizard will return to the same screen automatically.
![The new version is now available in the New Project wizard](images/new-version-in-new-project-wizard.png)
>tip The **Latest Version Acquirer** tool downloads a `.zip` file that contains the latest Telerik UI for Blazor packages. It is saved in the `%APPDATA%\Telerik\Updates` folder by default. If the list with the offered packages gets too long and you do not need the older versions, close VS and use the Windows Explorer to delete these distributions.
The **Latest Version Acquirer** tool downloads a `.zip` file that contains the latest Telerik UI for Blazor packages. It is saved in the `%APPDATA%\Telerik\Updates` folder by default. If the list with the offered packages gets too long and you do not need the older versions, close VS and use the Windows Explorer to delete these distributions.
## See Also

63
getting-started/vs-integration/new-project-wizard.md
Просмотреть файл

@ -1,23 +1,36 @@
---
title: Create New Project
title: Creating New Projects
page_title: Create New Project - Visual Studio Integration
description: Learn how to create a new Telerik UI for Blazor project with our Visual Studio Templates.
slug: getting-started-vs-integration-new-project
position: 2
---
# Create New Projects
# Creating New Projects
This article demonstrates how to use the Telerik Visual Studio Extensions to create a new project that is pre-configured for the Progress&reg; Telerik&reg; UI for Blazor components.
To create a new Telerik UI for Blazor application, use the **Create New Project** wizard. The wizard detects all installed versions of Telerik UI for Blazor and lists them in the **Version** combobox&mdash;this enables you to start your project with the desired version. You can also [get the latest version]({%slug getting-started-vs-integration-latest-version%}) to make sure the components are up to date.
## Get the Wizard
The wizard automates several steps for you that you otherwise must perform manually:
* Adding the client assets to your project:
* Adding the [Telerik stylesheet]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Adding the [JS Interop file]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Configuring the project to use the Telerik UI for Blazor components:
* Adding the [required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
* Adding the [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
* Registering the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).
## Getting the Wizard
To use the **Create New Telerik Project** wizard, install the Telerik UI for Blazor Visual Studio Extension. @[template](/_contentTemplates/common/general-info.md#vsx-download)
## Start the Wizard
## Starting the Wizard
To start the wizard, use either of the following approaches:
@ -35,7 +48,9 @@ To start the wizard, use either of the following approaches:
![Start the New Project Wizard](images/vs-ext-create-new-project-entry.png)
The **Create New Project** wizard presents two screens:
## Using the Wizard
The **Create New Project** wizard presents several screens:
1. On the first screen, you can select a location and name for your app.
@ -44,39 +59,35 @@ The **Create New Project** wizard presents two screens:
* A WebAssembly or server-side Blazor app.
* The .NET version you want to use.
* The Telerik UI for Blazor version.
* One of the predefined Telerik project templates.
* One of the [predefined Telerik project](#predefined-project-templates) templates.
The following project templates are available:
* **Blank** - This is a blank solution based on the Microsoft template, but with added Telerik components (NuGet package reference, assets, service, the TelerikRootComponent).
* **CRUD, Form, Chart** - A small app that showcases the Telerik Grid, Chart, and forms validation. The grid also uses a basic CRUD service&mdash;a common pattern for data updates in real applications.
* **Dashboard** - A basic dashboard layout that uses the TileLayout component for customizable dashboards and showcases several ways individual blocks (tiles) can fetch data.
* **Admin** - A small app that shows a dashboard for admin. The app uses some of the main Telerik components like [Grid]({%slug grid-overview%}), [Chart]({%slug components/chart/overview%}), [TileLayout]({%slug tilelayout-overview%}), [Form]({%slug form-overview%}), etc.
![The Create New Project Wizard Templates Options](images/vsx-extension-base.png)
![The Create New Project Wizard Templates Options](images/vsx-extension-base.png)
3. On the third screen, you can choose from different [themes]({%slug general-information/themes%}).
![The Create New Project Wizard Themes Options](images/vsx-extension-theme.png)
![The Create New Project Wizard Themes Options](images/vsx-extension-theme.png)
4. On the last screen, you can choose whether to have localization applied by default in the project.
![The Create New Project Wizard Localization Option](images/vsx-extension-localization.png)
![The Create New Project Wizard Localization Option](images/vsx-extension-localization.png)
The wizard automates several steps for you that you can also perform manually. To get a better understanding of what the wizard does for you, see either of the following articles (they provide the same information in different formats):
### Predefined Project Templates
* [Getting Started with Client-side apps]({%slug getting-started/client-side%})
* [Getting Started with Server-side apps]({%slug getting-started/server-side%})
* [Overview of what you need]({%slug getting-started/what-you-need%})
The following project templates are available:
* **Blank**&mdash;This is a blank solution based on the Microsoft template, but with added Telerik components (NuGet package reference, assets, service, the TelerikRootComponent).
* **CRUD, Form, Chart**&mdash;A small app that showcases the Telerik Grid, Chart, and forms validation. The grid also uses a basic CRUD service&mdash;a common pattern for data updates in real applications.
* **Dashboard**&mdash;A basic dashboard layout that uses the TileLayout component for customizable dashboards and showcases several ways individual blocks (tiles) can fetch data.
* **Admin**&mdash;A small app that shows a dashboard for admin. The app uses some of the main Telerik components like [Grid]({%slug grid-overview%}), [Chart]({%slug components/chart/overview%}), [TileLayout]({%slug tilelayout-overview%}), [Form]({%slug form-overview%}), etc.
## See Also
* [Visual Studio Extensions Overview]({% slug getting-started-vs-integration-overview %})
* [Downloading the Latest Telerik UI for Blazor Versions]({% slug getting-started-vs-integration-latest-version %})
* [Getting Started with Client-side apps]({%slug getting-started/client-side%})
* [Getting Started with Server-side apps]({%slug getting-started/server-side%})
* [Overview of what you need]({%slug getting-started/what-you-need%})
* [Getting Started with Client-Side Apps]({%slug getting-started/client-side%})
* [Getting Started with Server-Side Apps]({%slug getting-started/server-side%})
* [Workflow for Using the UI Components for Blazor]({%slug getting-started/what-you-need%})

2
getting-started/vs-integration/troubleshooting.md
Просмотреть файл

@ -10,7 +10,7 @@ position: 5
This article provides solutions for common issues you may encounter while working with the Telerik UI for Blazor Visual Studio (VS) Extensions.
## The Telerik sub-menu is Missing from the Extensions Menu
## The Telerik Sub-Menu is Missing from the Extensions Menu
**Cause**: The Visual Studio extensions are disabled or not correctly installed.

116
getting-started/what-you-need.md
Просмотреть файл

@ -1,7 +1,7 @@
---
title: What You Need
page_title: What You Need to Use the Telerik Blazor Components
description: The packages and assets you need to use the Telerik UI for Blazor components, how to get them, and how to configure your project to include the Telerik Blazor components.
title: Typical Workflow
page_title: Typical Workflow for Using the Telerik UI for Blazor Components
description: Learn about the packages and assets that you need to use the Telerik UI for Blazor components, how to get them, and how to configure your project to include the Telerik Blazor components.
slug: getting-started/what-you-need
previous_url: /installation/what-you-need
tags: get,started,installation,what,need,list
@ -9,77 +9,79 @@ published: True
position: 3
---
# What You Need to Use the Telerik Blazor Components
# Typical Workflow for Using the UI for Blazor Components
This article describes the packages that provide the Telerik UI for Blazor components, how to get them, and how to manually configure your project to use them.
This article describes the steps in the typical workflow for using the Telerik UI for Blazor components&mdash;getting the Telerik UI for Blazor components and configuring your project to use them.
>tip This article is a shorter, more focused version of the [Client-Side Blazor](client-blazor) and [Server-Side Blazor](server-blazor) step-by-step tutorials and targets people who are familiar with the Telerik NuGet Feed and Blazor in general.
>tip Telerik UI for Blazor provides wizards that can automatically configure a project for you:
> * You can use the [Convert Project Wizard for VS]({%slug getting-started-vs-integration-convert-project%}) to configure an existing project for the Telerik components.
> * You can use the [New Project Wizard for VS]({%slug getting-started-vs-integration-new-project%}) or [VS Code Wizard]({%slug getting-started-vs-code-integration-overview%}) to create a pre-configured project.
>tip The information in this article is also available as step-by-step tutorials for Blazor [Server]({%slug getting-started/server-side%}) and [WebAssembly]({%slug getting-started/client-side%}) apps.
To use the Telerik UI for Blazor, you need to:
1. Get the [Telerik Blazor packages](#telerik-specific-packages) in your project.
1. Add the [client assets](#client-assets).
1. Add the [client assets](#adding-the-client-assets).
1. [Set up the project](#project-configuration) to recognize the Telerik components.
1. [Set up the project](#configuring-the-project) to recognize the Telerik components.
## Telerik Specific Packages
## Telerik-Specific Packages
The Telerik UI for Blazor components suite requires the following Telerik-specific [NuGet]({%slug installation/nuget%}) packages:
Telerik UI for Blazor is distributed through [NuGet packages]({%slug installation/nuget%}). The following table represents the NuGet packages that comprise the Telerik UI for Blazor components suite.
* `Telerik.UI.for.Blazor` - This is the only package that you must reference explicitly because it contains the code for the UI components. Adding the package to your project will automatically add the other necessary dependencies.
|NuGet Package Name|Description|
|---|---|
| `Telerik.UI.for.Blazor` | The main package that contains the code for the UI components and the only package that you must reference explicitly. Adding the package to your project will automatically add the other necessary dependencies. |
| `Telerik.DataSource` | Contains code for working with data and is needed for data binding the UI for Blazor components. |
| `Telerik.Recurrence` | Contains code for working with recurring appointments, for example, in the [Scheduler]({%slug scheduler-overview%}) UI component. |
| `Telerik.Documents.SpreadsheetStreaming` | Contains code for working with spreadsheet documents and is used for exporting. |
| `Telerik.Zip` | Contains code for working with zip archives and excel files. Excel files are actually archives and this packages is required for exporting them. |
* `Telerik.DataSource` - Code for working with data, needed for data binding the components.
>note If you use a trial license, these package names have a `.Trial` suffix, for example `Telerik.UI.for.Blazor.Trial`, `Telerik.DataSource.Trial`, and `Telerik.Recurrence.Trial`.
* `Telerik.Recurrence` - Code for working with recurring appointments (e.g., in the scheduler).
## Getting the Telerik Packages
* `Telerik.Documents.SpreadsheetStreaming` - Code for working with spreadsheet documents (used for exporting).
You can obtain the required UI for Blazor packages in four ways:
* `Telerik.Zip` - Code for working with zip archives, excel files are actually archives (used for exporting).
* The [private Telerik NuGet feed]({%slug installation/nuget%}):
>note For trial purposes, the package names have the `.Trial` suffix, for example `Telerik.UI.for.Blazor.Trial`, `Telerik.DataSource.Trial`, and `Telerik.Recurrence.Trial`.
* Requires an Internet connection and authentication.
* It also informs you about updates and new versions.
* The [Automated MSI installer]({%slug installation/msi%}):
### Get the Telerik Packages
* You can download it once from your [Telerik account](https://www.telerik.com/account/) and then use it without an Internet connection.
* It allows you to install the [VS extensions]({%slug getting-started-vs-integration-overview%}) and use various [templates for creating new projects]({%slug getting-started-vs-integration-new-project%}) and a [wizard for enabling existing projects to use Telerik components]({%slug getting-started-vs-integration-convert-project%}).
* It does not provide information about new versions.
* Depending on your setup, it may require elevated privileges to run the installation wizard.
* It provides an offline version of the [demos](https://demos.telerik.com/blazor-ui/).
There are four ways to get the Telerik packages:
* The [ZIP archive]({%slug installation/zip%}) package:
* The [Telerik private NuGet feed]({%slug installation/nuget%}) - Requires an Internet connection and authentication. It also informs you about updates and new versions.
* You can download it once from your [Telerik account](https://www.telerik.com/account/) and then use it without an Internet connection.
* It does not provide information about new versions and does not require installation.
* It provides an offline version of the [demos](https://demos.telerik.com/blazor-ui/).
* The [Automated MSI installer]({%slug installation/msi%}) - You can download it from your [Telerik account](https://www.telerik.com/account/) and then use it without an Internet connection. It does not provide information about new versions. Depending on your setup, it may require elevated privileges to run the install wizard. It provides an offline version of the [demos](https://demos.telerik.com/blazor-ui/) and allows you to install the [VS extensions]({%slug getting-started-vs-integration-overview%}).
* The standalone `.nupkg` files:
* The [ZIP archive]({%slug installation/zip%}) package - You can download it from your [Telerik account](https://www.telerik.com/account/) and then use it without an Internet connection. It does not provide information about new versions and does not require installation. It also provides an offline version of the [demos](https://demos.telerik.com/blazor-ui/).
* They are the bare minimum that is required.
* To use them, follow the instructions for using the [ZIP archive]({%slug installation/zip%}), but download the `.nupkg` files instead.
* The standalone `.nupkg` files - They are the bare minimum that is required. To use them, follow the instructions for using the [ZIP archive]({%slug installation/zip%}), but download the `.nupkg` files instead.
## Adding the Client Assets
@[template](/_contentTemplates/common/get-started.md#nuget-update-note)
The Telerik UI for Blazor components require a [Telerik stylesheet](#telerik-stylesheet) and a [JS Interop file](#telerik-js-interop-file) in the app's main index file. Depending on the Blazor hosting model and framework version, this index file will differ:
* For Client-Side Blazor apps, use the `wwwroot/index.html` file.
* For Server-Side Blazor apps, use one of the following files:
* `~/Pages/_Host.cshtml` for .NET 3.x
* `~/Pages/_Layout.cshtml` for .NET 6
## Client Assets
To add these client assets, use either the [static assets](#using-static-assets) or the [CDN](#using-cdn) method.
To have the Telerik Blazor components look and behave as expected in the browser, you need some assets.
@[template](/_contentTemplates/common/js-interop-file.md#app-paths)
### Using Static Assets
You can add the [Telerik JS Interop file](#telerik-js-interop-file) and the [Telerik Stylesheet](#telerik-stylesheet) as [static assets](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio#consume-content-from-a-referenced-rcl). Static assets (the `_content` folder) are automatically included in the solution from the NuGet package during build, so all you need is to enable static assets as shown in the snippet below. The `_content` folder is expanded by the framework into the local NuGet cache, and the project copies it from there.
#### The Telerik stylesheet - For more information, refer to the [Themes]({%slug general-information/themes%}) article. Here is a short example:
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
#### The Telerik JS Interop file - Provides features that cannot be implemented with native Blazor.
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
### Static Assets
You can add the Telerik JS Interop file as a [static asset](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-3.1&tabs=visual-studio#consume-content-from-a-referenced-rcl). Static assets (the `_content` folder) are automatically included in the solution from the NuGet package during build, so all you need is to reference the asset as shown in the snippet below. The `_content` folder is expanded by the framework into the local NuGet cache, and the project copies it from there.
To enable the use of static assets in your project, add the following line to the startup file of your **Server** project:
To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the startup file of your **Server** project (by default, this line is already present):
* `Startup.cs` for .NET 3.x and .NET 5
* `Program.cs` for .NET 6
@ -87,16 +89,30 @@ To enable the use of static assets in your project, add the following line to th
**C#**
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
### CDN
#### Telerik Stylesheet
The stylesheet allows you to use one of the built-in [Themes]({%slug general-information/themes%}), for example, the Default theme:
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
#### Telerik JS Interop File
The JS Interop file provides features that cannot be implemented with native Blazor.
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
### Using CDN
@[template](/_contentTemplates/common/general-info.md#cdn)
>tip Telerik recommends using the [static assets](#static-assets) approach instead of a CDN. This approach relies on the static assets feature from the framework and takes the correct file from the package, so you don't have to remember to update the CDN path when upgrading to a newer version.
>Telerik recommends using [static assets](#static-assets) instead of a CDN. This approach relies on the static assets feature from the framework and takes the correct file from the package so you don't have to remember to update the CDN path when [upgrading to a newer version]({%slug upgrade-tutorial%}).
## Project Configuration
## Configuring the Project
To use the Telerik components, you must add a few items to your projects. Some of these items are common, while others depend on the project type (server-side or client-side), and the steps differ slightly in syntax. To configure the project:
@ -119,9 +135,9 @@ You can set the project to recognize all Telerik components without explicit `@u
To enable the use of detached popups (for example, dropdown lists, menus, grid filters, etc.), you must add a `TelerikLayout.razor` component at the root level of the DOM:
* @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
1\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
* @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
2\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
### Client-side Project Specifics

6
hybrid-blazor-apps.md
Просмотреть файл

@ -42,13 +42,13 @@ The process for adding Telerik UI for Blazor in the WinForms/WPF/MAUI app is sim
### 1. Get the `Telerik UI for Blazor` package
To use the UI for Blazor components you need to install the `Telerik.UI.for.Blazor` package and include its reference in the `.csproj` file of the app. [Read more on where to get the `Telerik.UI.for.Blazor` package...]({%slug getting-started/what-you-need%}#get-the-telerik-packages)
To use the UI for Blazor components you need to install the `Telerik.UI.for.Blazor` package and include its reference in the `.csproj` file of the app. [Read more on where to get the `Telerik.UI.for.Blazor` package...]({%slug getting-started/what-you-need%}#getting-the-telerik-packages)
### 2. Add the Telerik client assets
To have the Telerik Blazor components look and behave as expected, you need the Telerik [CSS and JavaScript assets]({%slug getting-started/what-you-need%}#client-assets). Include the assets inside the `<head>` of the `wwwroot/index.html` file.
To have the Telerik Blazor components look and behave as expected, you need the Telerik [CSS and JavaScript assets]({%slug getting-started/what-you-need%}#adding-the-client-assets). Include the assets inside the `<head>` of the `wwwroot/index.html` file.
You may add the Telerik resources as [static assets]({%slug getting-started/what-you-need%}#static-assets) or reference them from a [cloud CDN]({%slug getting-started/what-you-need%}#cdn).
You may add the Telerik resources as [static assets]({%slug getting-started/what-you-need%}#using-static-assets) or reference them from a [cloud CDN]({%slug getting-started/what-you-need%}#using-cdn).
### 3. Include `@using` statements

2
knowledge-base/cdn-fallback.md
Просмотреть файл

@ -90,7 +90,7 @@ A server-side Blazor app is bootstrapped in a Razor page (`_Host.cshtml`) and so
````
## Notes
You may want to consider using [static assets]({%slug getting-started/what-you-need%}#client-assets) as the primary way to obtain the necessary resources. They provide the following benefits in a Blazor app:
You may want to consider using [static assets]({%slug getting-started/what-you-need%}#adding-the-client-assets) as the primary way to obtain the necessary resources. They provide the following benefits in a Blazor app:
* For server-side Blazor - the necessity for a low-latency connection makes this flavor suitable for Intranet apps, and in such cases the user is likely to be closer to the server than to the cloud. Thus, downloading the files from the app server is likely to be faster than donwloading from the CDN.

2
knowledge-base/common-cannot-read-properties-of-null-reading-addeventlistener.md
Просмотреть файл

@ -54,7 +54,7 @@ The error indicates that the app is still using the old version of our `telerik-
To resolve the error:
* (if using [CDN]({%slug getting-started/what-you-need%}#cdn)) Update the `telerik-blazor.js` file URL to the correct version.
* (if using [CDN]({%slug getting-started/what-you-need%}#using-cdn)) Update the `telerik-blazor.js` file URL to the correct version.
* (if using static assets) Clear the browser cache.
* (if using a local JS file) Replace the `telerik-blazor.js` file with the new version.

6
troubleshooting/general-issues.md
Просмотреть файл

@ -27,7 +27,7 @@ This page provides solutions for common issues you may encounter while working w
## Popups Do Not Work
There are three common reasons for this
* Missing [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#project-configuration) from the app.
* Missing [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#configuring-the-project) from the app.
* [Missing JS Interop file]({%slug troubleshooting-js-errors%}#microsoftjsinteropjsexception-could-not-find-)
* Special positioning on the `<app>` element.
@ -54,7 +54,7 @@ app {
The position of popups (Window, various dropdowns such as DropDownList, ComboBox, DatePicker) can be wrong or offset.
The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#project-configuration) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#configuring-the-project) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
There are several common cases when such a mismatch occurs:
@ -99,7 +99,7 @@ If you get an error similar to this one:
There can be two common causes for the problem:
* The Telerik services are not registered on the app, a line similar to `services.AddTelerikBlazor();` is missing. You can read more about where you need to add that in the [What You Need - Project Configuration]({%slug getting-started/what-you-need%}#project-configuration) article section.
* The Telerik services are not registered on the app, a line similar to `services.AddTelerikBlazor();` is missing. You can read more about where you need to add that in the [What You Need - Project Configuration]({%slug getting-started/what-you-need%}#configuring-the-project) article section.
* The application uses localization, or there is a code snippet that does (e.g., a grid with custom buttons that are localized, copied over from another place), but the current app does not provide the necessary project-specific service. You can read more about implementing one in the [Localization]({%slug globalization-localization%}) article.

4
troubleshooting/js-errors.md
Просмотреть файл

@ -34,11 +34,11 @@ Another common reason is the browser caching the file if it comes from the stati
You can check if this is the case by inspecting the Network tab of your browser console to see if it is returning successfully. There are a few common causes for the JS Interop file to be missing:
* The application is missing references to the needed [assets]({%slug getting-started/what-you-need%}#client-assets).
* The application is missing references to the needed [assets]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Network setup blocks access to the cloud, and thus, to our CDN. If this is the case, you have two options:
* Discuss the case with your network administrators to have our CDN allowed.
* Use [static assets]({%slug getting-started/what-you-need%}#static-assets) from the app folder to avoid going to the cloud.
* Use [static assets]({%slug getting-started/what-you-need%}#using-static-assets) from the app folder to avoid going to the cloud.
* The application was upgraded from a trial to a commercial license, but the path to the file was not. See the [Upgrade from Trial to Commercial]({%slug upgrade-tutorial%}#upgrade-from-trial-to-commercial) section for details.