diff --git a/_contentTemplates/common/js-interop-file.md b/_contentTemplates/common/js-interop-file.md index 45b18461a..3a23fd9e2 100644 --- a/_contentTemplates/common/js-interop-file.md +++ b/_contentTemplates/common/js-interop-file.md @@ -7,18 +7,6 @@ #end -#add-js-interop-file-to-getting-started-server - Add the `telerik-blazor.js` file to your main index file: - - * `~/Pages/_Host.cshtml` for .NET 3.x and .NET 7 - * `~/Pages/_Layout.cshtml` for .NET 6 - - **HTML** - -@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) - -#end - #js-interop-file-snippet ````HTML diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md index 0bf030dc9..016c0c826 100644 --- a/components/fileselect/overview.md +++ b/components/fileselect/overview.md @@ -57,8 +57,6 @@ This section applies only to Blazor **Server** apps. Blazor **WebAssembly** apps In Blazor **Server** apps, the FileSelect uses the **SignalR WebSocket** to send files from the browser to the server .NET runtime. The default SignalR maximum message size is **32 KB**. To work with larger files, [increase the max WebSocket message size for the Blazor application](slug:common-kb-increase-signalr-max-message-size). ->tip The maximum file size supported by the framework up till .NET 5 was 2 GB and .NET 6 [removed this limit](https://github.com/dotnet/aspnetcore/pull/33900). While [Telerik UI for Blazor supports .NET version 3.1](slug:system-requirements), the FileSelect component will allow maximum file size of 2 GB. - ## Drag-and-Drop File Support The FileSelect provides built-in file drag-and-drop support, which allows users to drag one or multiple files and drop them anywhere in the component. The [`OnSelect` event](slug:fileselect-events#onselect) is raised upon dropping the file. You can handle this event to perform further actions with the selected file. diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index b7aa41e5f..9e5ff1aa1 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -12,12 +12,9 @@ position: 10 This article explains how to get the Telerik UI for Blazor components in your Blazor WebAssembly app 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. -> This article applies only to the following Visual Studio project templates: +> This article applies only to the **Blazor WebAssembly Standalone App** Visual Studio project template. > -> * **Blazor WebAssembly App**, which exists up to .NET 7. -> * **Blazor WebAssembly Standalone App** for .NET 8 and newer versions. -> -> If you prefer the **Blazor Web App** template for .NET 8 and newer versions, then follow the [tutorial about Blazor Web Apps](slug:getting-started/web-app). +> If you prefer the **Blazor Web App** template with WebAssembly render mode, then follow the [tutorial about Blazor Web Apps](slug:getting-started/web-app). @[template](/_contentTemplates/common/get-started.md#prerequisites-tip) @@ -92,7 +89,6 @@ Use a single `TelerikRootComponent` component as a top-level component in the Bl In the `~/Program.cs` file of the client web application, register the Telerik Blazor service. -**.NET 6 and .NET 7** @[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client) Now your project can use the Telerik UI for Blazor components. diff --git a/getting-started/server-blazor.md b/getting-started/server-blazor.md deleted file mode 100644 index 8dba0ae21..000000000 --- a/getting-started/server-blazor.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Blazor Server App -page_title: First Steps with Blazor Server Apps and Telerik UI for Blazor -meta_title: First Steps with Blazor Server-Side UI - Telerik UI for Blazor -description: Blazor Server is a .NET framework that runs C# on the server, enabling interactive UIs via SignalR. -slug: getting-started/server-side -tags: get,started,first,steps,server -published: true -position: 15 ---- - -# First Steps with Server-Side UI for Blazor - -Blazor Server runs C# on the server and updates the UI in the browser through a SignalR connection, enabling interactive web apps without client-side .NET execution. This article explains how to get the Telerik UI for Blazor components in your .NET 6 or 7 Blazor Server app 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. - -> This article applies only to the **Blazor Server App** template in Visual Studio, which exists up to .NET 7. If you are using newer .NET versions, then follow the [tutorial about Blazor Web Apps](slug:getting-started/web-app). - -@[template](/_contentTemplates/common/get-started.md#prerequisites-tip) - -{% if site.has_cta_panels == true %} -{% include cta-panel-introduction.html %} -{% endif %} - -## Prerequisites - -@[template](/_contentTemplates/common/get-started.md#prerequisites-download) - -## Step 1: Install a License Key - -@[template](/_contentTemplates/common/get-started.md#license-key-version) - -@[template](/_contentTemplates/common/get-started.md#license-key-manual-steps) - -@[template](/_contentTemplates/common/get-started.md#license-key-know-more-link) - -## Step 2: Create a New Project - -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**. - -1. Select the desired framework and click **Create**. - -@[template](/_contentTemplates/common/get-started.md#add-nuget-feed) - -## Step 4: Install the Telerik UI for Blazor Components - -1. Right-click the Blazor Server project in the solution and select **Manage NuGet Packages**. - -![Manage NuGet Packages in Blazor Server](images/manage-nuget-packages-for-server-app.png) - -2. Install the Telerik Blazor NuGet package: - - 1. Select the `telerik.com` **Package source** that you [added earlier](#step-3-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` NuGet package, and click **Install**. - -![Add Telerik Blazor Package to the project](images/add-telerik-nuget-to-server-app.png) - -## Step 5: Enable the Blazor UI Components - -To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required `@using` statements, add the `TelerikRootComponent` component, and register the Telerik Blazor service. - -### 5.1. Add the Telerik UI for Blazor Client Assets - -1\. Add the `telerik-blazor.js` file to the `` of your main index file: - - * `~/Pages/_Host.cshtml` for .NET 7 - * `~/Pages/_Layout.cshtml` for .NET 6 - -**HTML** - -@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) - -2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet as a static asset](slug:themes-overview#using-a-theme). - - * Use the `~/Pages/_Host.cshtml` index file for .NET 7 - * Use the `~/Pages/_Layout.cshtml` index file for .NET 6 - -@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet) - -### 5.2. Include @using Statements - -In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using](slug:common-features-icons). - -````RAZOR.skip-repl -@using Telerik.Blazor -@using Telerik.Blazor.Components -@using Telerik.SvgIcons -@using Telerik.FontIcons -```` - -### 5.3. Add the TelerikRootComponent - -Use a single [`TelerikRootComponent`](slug:rootcomponent-overview) component as a top-level component in the app. - -@[template](/_contentTemplates/common/get-started.md#root-component-main-layout) - -### 5.4. Register the Telerik Blazor Service - -In the `Program.cs` file of your Blazor Server project, register the Telerik Blazor Service: - -**C#** -@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server) - -Now your Blazor Server project can use the Telerik UI for Blazor components. - -## Step 6: Add a Component to a View - -The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser. - -1. In 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. - - - -## See Also - -* [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need) -* [Getting Started Videos for Blazor](https://www.youtube.com/watch?v=aaRAZYaJ4xc&list=PLvmaC-XMqeBYPTwcm478vs8Rujq2tiVJo) -* [First Steps with Blazor Web App](slug:getting-started/web-app) -* [First Steps with Blazor WebAssembly](slug:getting-started/client-side) - - - \ No newline at end of file diff --git a/getting-started/vs-code-integration/new-project-wizard.md b/getting-started/vs-code-integration/new-project-wizard.md index 18d08b004..e3268db2a 100644 --- a/getting-started/vs-code-integration/new-project-wizard.md +++ b/getting-started/vs-code-integration/new-project-wizard.md @@ -27,54 +27,47 @@ To create a Telerik-enabled Blazor project: ## Using the Wizard -#### Section 1: Choose How to Start the Project +The **Create New Project** wizard generates a project that is based on the Microsoft template. The app includes some Telerik UI components and the [required NuGet package reference, static assets, localization service, and the `TelerikRootComponent`](slug:getting-started/what-you-need). -The **Telerik UI for Blazor Template Wizard** provides two options to start you project: +> Earlier versions of the wizard provided the **Admin**, **Dashboard**, **CRUD**, **Form**, and **Chart** templates which are now deprecated. You can find their source code in the [`blazor-ui` repo](https://github.com/telerik/blazor-ui/tree/master/common/legacy-project-templates). -* **Start from Blank App**—allows you to create a blank project that is pre-configured for the Progress® Telerik® UI for Blazor components. You can select and add sample pages to get started (a Grid with CRUD operations form a service, a Form, Charts). +The wizard contains the following sections: -* **Start from Template** - the wizard provides a set of predefined project templates: - * **CRUD, Form, Chart**—A small app that showcases the Telerik UI Data Grid, Chart, and Form validation. The Data Grid also uses a basic CRUD service (a common pattern for data updates in production-ready applications). - * **Dashboard**—A basic dashboard that showcases the Telerik UI TileLayout component and how individual blocks (tiles) can fetch data. - * **Admin**—A small app that showcases a dashboard for administrators. The app uses some of the main Telerik UI components like the [Data Grid](slug:grid-overview), [Chart](slug:components/chart/overview), [TileLayout](slug:tilelayout-overview), [Form](slug:form-overview), and more. - -The available templates vary depending on the target framework and hosting model. All of the above templates are available for the Client and Server projects for .NET 6 and .NET 7. The Hybrid projects and the .NET 8 Web App support only the **Start from Blank App** option. - -#### Section 2: Select Project Name and Path +#### Section 1: Select Project Name and Path Type your project name and select the output folder for it. -#### Section 3: Install or Update License Key +#### Section 2: Install or Update License Key If necessary, the Telerik Visual Studio Code extension will notify you about a missing or outdated [license key](slug:installation-license-key), and will install or update it. -#### Section 4: Select UI for Blazor Version +#### Section 3: Select UI for Blazor Version Select the preferred UI for Blazor version. Make sure that your system has access to the specified version of the UI components. You can achieve this with the [Telerik NuGet feed](slug:installation/nuget). -#### Section 5: Select Hosting Model +#### Section 4: Select Hosting Model Here you can select the desired hosting model—[**WebApp**](slug:getting-started/web-app), [**Client** (also: WebAssembly)](slug:getting-started/client-side), [**Server**](slug:getting-started/server-side), or [**Hybrid** (a hybrid Blazor MAUI)](slug:getting-started/hybrid-blazor). The available target framework options are updated upon selecting the hosting model. -#### Section 6: Choose How to Distribute the Client Assets +#### Section 5: Choose How to Distribute the Client Assets Choose whether to load the required Telerik UI stylesheet and JS Interop file as [static NuGet assets](slug:getting-started/what-you-need#css-theme-and-javascript-files) or load them from the [Telerik CDN](slug:common-features-cdn). -#### Section 7: Enable or Disable Localization +#### Section 6: Configure Localization Choose whether to use [localization](slug:globalization-localization) in the project or not. -#### Section 8: Select the Preferred Icon Type +#### Section 7: Select the Preferred Icon Type Decide if you want to switch to using [Font Icons](slug:common-features-icons) instead of the default SVG icons. -#### Section 9: Select Target Framework +#### Section 8: Select Target Framework The available .NET framework versions vary depending on the selected hosting model. -#### Section 10: Select Theme +#### Section 9: Select Theme Select your desired [theme](slug:themes-overview) for your project. Click **See All Swatches** to explore the available [theme color variations](slug:themes-overview#basics). diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 7f37ac604..ca821d60c 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -7,6 +7,7 @@ slug: getting-started/web-app tags: get,started,first,steps,web,app,template published: true position: 5 +previous_url: /getting-started/server-blazor --- # First Steps with Blazor Web App and Telerik UI diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 1ce1ce426..71e935738 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -15,9 +15,8 @@ This article describes the required steps to use the Telerik UI for Blazor compo >tip The information in this article builds on top of the step-by-step tutorials for specific Blazor application types or render modes: > -> * [Blazor Web App](slug:getting-started/web-app) template in .NET 8 or 9 +> * [Blazor Web App](slug:getting-started/web-app) template > * [Blazor WebAssembly Standalone apps](slug:getting-started/client-side) -> * [Blazor Server apps](slug:getting-started/server-side) in .NET 6 or 7 > * [Blazor Hybrid (MAUI) apps](slug:getting-started/hybrid-blazor) > > The differences between the above tutorials and this page are: diff --git a/introduction.md b/introduction.md index 18f8f05c5..6f7d5ad61 100644 --- a/introduction.md +++ b/introduction.md @@ -26,9 +26,8 @@ Visit the Telerik UI If you are new to Telerik UI for Blazor, visit the Getting Started tutorials that demonstrate how to add the Telerik components to your application: -* [Get Started with a .NET 8 or 9 Blazor Web App](slug:getting-started/web-app) +* [Get Started with a Blazor Web App](slug:getting-started/web-app) * [Get Started with a Blazor WebAssembly Standalone App](slug:getting-started/client-side) -* [Get Started with a .NET 6 or 7 Blazor Server app](slug:getting-started/server-side) * [Get Started with Blazor Hybrid](slug:getting-started/hybrid-blazor) >tip This online Blazor documentation covers the latest version of Telerik UI for Blazor, which is `{{site.uiForBlazorLatestVersion}}`. If needed, [download the offline PDF Blazor documentation](#learning-resources) for the required older product version. diff --git a/knowledge-base/common-increase-signalr-max-message-size.md b/knowledge-base/common-increase-signalr-max-message-size.md index a6b421b2d..c311b5698 100644 --- a/knowledge-base/common-increase-signalr-max-message-size.md +++ b/knowledge-base/common-increase-signalr-max-message-size.md @@ -47,7 +47,7 @@ Blazor Server apps use a **SignalR WebSocket** to communicate between the client Increase the `MaximumReceiveMessageSize` via `HubOptions`. The syntax and code placement can vary, depending on the .NET version or when the application was created. Here are a few possible alternatives. ->caption Program.cs (.NET 6+) +>caption Use `Configure` in Program.cs
@@ -64,7 +64,7 @@ builder.Services.Configure(options => }); ```` ->caption Use AddHubOptions in .NET 6+ +>caption Use `AddHubOptions` in Program.cs
@@ -74,34 +74,6 @@ builder.Services.AddServerSideBlazor().AddHubOptions(options => { }); ```` ->caption Startup.cs (.NET 3.1) - -
- -````CS -using Microsoft.AspNetCore.SignalR; - -public void ConfigureServices(IServiceCollection services) -{ - services.AddServerSideBlazor(); - - services.Configure(options => - { - options.MaximumReceiveMessageSize = 1024 * 1024; // 1MB or use null - }); -} -```` - ->caption Use AddHubOptions in .NET 3.1 - -
- -````CS -services.AddServerSideBlazor().AddHubOptions(options => { - options.MaximumReceiveMessageSize = null; // no limit or use a number -}); -```` - Also see these Microsoft articles: * [ASP.NET Core SignalR configuration](https://learn.microsoft.com/en-us/aspnet/core/signalr/configuration) diff --git a/system-requirements.md b/system-requirements.md index b65f3753e..85f6ece56 100644 --- a/system-requirements.md +++ b/system-requirements.md @@ -16,16 +16,14 @@ Telerik UI for Blazor steps on Microsoft Blazor. You can host and run Telerik Bl ## .NET Versions Support -The latest version of Telerik UI for Blazor (currently {{site.uiForBlazorLatestVersion}}) targets `net6.0`. Thus, apps and libraries that reference our package must use one of the following target frameworks: +The latest version of Telerik UI for Blazor (currently {{site.uiForBlazorLatestVersion}}) targets `net8.0`. Thus, apps and libraries that reference our package must use one of the following target frameworks: -* `net6.0` -* `net7.0` * `net8.0` * `net9.0` Razor Class Libraries may target `netstandard2.0` by default, so you need to update that. -> If your application targets an [older framework version, the latest Telerik UI for Blazor you can use is `4.6.0`](#compatible-net-versions). +> If your application targets an [older framework version, you can only use older Telerik UI for Blazor versions](#compatible-net-versions). ### Supported .NET Versions @@ -48,8 +46,8 @@ A **compatible .NET version** is one that is no longer (or not yet) officially s | .NET version | First UI for Blazor Version | Last UI for Blazor Version | | --- | --- | --- | -| .NET 7 | 3.7.0 | {{site.uiForBlazorLatestVersion}} (current official) | -| .NET 6 | 2.29.0 | {{site.uiForBlazorLatestVersion}} (current official) | +| .NET 7 | 3.7.0 | 8.1.1 | +| .NET 6 | 2.29.0 | 8.1.1 | | .NET 5 | 2.19.0 | 4.6.0 | | .NET Core 3.1 | 2.5.0 | 4.6.0 | diff --git a/upgrade/framework-versions.md b/upgrade/framework-versions.md deleted file mode 100644 index 4d6ed3f57..000000000 --- a/upgrade/framework-versions.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Framework Versions Support -page_title: .NET Framework Versions Support -description: List of the supported .NET Core framework versions and the UI for Blazor versions that work on them. -slug: framework-versions-support -tags: framework,version,support,list -published: True -position: 5 ---- - -# Framework Versions Support - -This article lists the .NET Core versions supported by the UI for Blazor suite, and which versions of the Telerik UI for Blazor work under which framework versions. - ->note Telerik supports only the latest available version of UI for Blazor (**{{site.uiForBlazorLatestVersion}}**). - -Telerik UI for Blazor targets `netstandard2.1`. Thus, apps/libraries that reference our package must target `netstandard2.1`, `netcoreapp3.1` or `net5.0`. Razor Class Libraries may target `netstandard2.0` by default so you would need to update that. - -## .NET 7 - -Telerik UI for Blazor supports .NET 7 since its `3.7.0` release. - -| .NET 7 | Telerik UI for Blazor version | -|------------|--------------------------------------------------------| -| .NET 7 RTM | 3.7.0 - {{site.uiForBlazorLatestVersion}} | - -## .NET 6 - -Telerik UI for Blazor supports .NET 6 since its `2.29.0` release. - -| .NET 6 | Telerik UI for Blazor version | -|------------|--------------------------------------------------------| -| .NET 6 RTM | 2.29.0 - {{site.uiForBlazorLatestVersion}} | - -## .NET 5 - -Telerik UI for Blazor supports .NET 5 since its `2.19.0` release. - -| .NET 5 | Telerik UI for Blazor version | -|------------|--------------------------------------------------------| -| .NET 5 RTM | 2.19.0 - {{site.uiForBlazorLatestVersion}} | - - - - -## .NET Core 3.1 - -### Server-side Blazor - ->caption Telerik UI for Blazor versions per framework version for the server-side flavor - - -| .NET version | Telerik UI for Blazor version | -|---------------------------|-------------------------------| -| .NET Core 3.1.x | 2.5.0 - {{site.uiForBlazorLatestVersion}} | -| .NET Core 3.1 preview 3 | 2.4.0 | -| .NET Core 3.1 preview 2 | 2.3.0 | -| .NET Core 3.1 preview 1 | 2.2.0, 2.2.1 | -| .NET Core 3.0 RTM | 2.1.0, 2.1.1 | - - -### Client-side Blazor - -The client-side (WebAssembly) flavor of Blazor is a set of separate NuGet packages whose version may not match the .NET Core version they run on. - ->important WebAssembly 3.2.x is not part of .NET Core 3.1 and its official support by Microsoft ends with .NET 6 Preview 1 which is available as of 17 February 2021. You can read more about this here and in the .NET Core and .NET 5 Support Policy. You should upgrade WebAssembly applications running on 3.2.x to .NET 5. - ->caption Telerik UI for Blazor versions per WebAssembly packages version - -| WebAssembly version | Telerik UI for Blazor version | -|--------------------------------------|------------------------------- | -| 3.2.x RTM | 2.14.0 - 2.22.0 | - - - ->caption Telerik UI for Blazor versions per WebAsembly Preview version - -| WASM Preview version | Telerik UI for Blazor version | -|--------------------------------------|-------------------------------| -| 3.2 RC1 (3.2.0-rc1.20223.4) | 2.12.0 - 2.13.0 | -| 3.2 preview 4 (3.2.0-preview4.20210.8) | 2.11.0 | -| 3.2 preview 3 (3.2.0-preview3.20168.3) | 2.10.0 | -| 3.2 preview 2 (3.2.0-preview2.20160.5) | 2.9.0 | -| 3.2 preview 1 (3.2.0-preview1.20073.1) | 2.7.0 - 2.8.0 | -| preview 4 (3.1.0-preview4.19579.2) | 2.5.0 - 2.6.1 | -| preview 3 (3.1.0-preview3.19555.2) | 2.4.0 | -| preview 2 (3.1.0-preview2.19528.8) | 2.3.0 | -| preview 1 (3.1.0-preview1.19506.1) | 2.2.0, 2.2.1 | - - -## Preview .NET Versions - -Telerik UI for Blazor is committed to the currently supported official versions of .NET. We evaluate the compatibility with preview .NET versions on a regular basis and provide support for new .NET versions after their official release becomes available. - - -## See Also - - * [Telerik UI for Blazor: Old Versions Support Policy](slug:old_versions_support_policy) - * Microsoft .NET Core and .NET 5 Support Policy