Skip to content

Commit f0648a2

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
[5.0]docs(common): document support fot net 8 and drop net 3.x and 5 support (#1745)
* docs(common): document support fot net 8 and drop net 3.x and 5 support * docs(common): refactor getting started docs and add net 8 info * chore(common): fix link and index file name * chore(common): update system requirements * Update _contentTemplates/common/get-started.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/client-blazor.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/client-blazor.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/server-blazor.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/server-blazor.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/web-app.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/web-app.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/web-app.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update getting-started/web-app.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * chore(common): address feedback * chore(common): final touches --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 228b8eb commit f0648a2

File tree

10 files changed

+344
-192
lines changed

10 files changed

+344
-192
lines changed

‎_contentTemplates/common/get-started.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ To setup a local NuGet package source, so you can install the Telerik components
130130

131131

132132
#root-component-telerik-layout
133+
To use popups (for example, dropdowns, menus, windows, grid filters, etc.), you must add the `TelerikRootComponent` component at the root level of the app:
134+
133135
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:
134136

135137
@inherits LayoutComponentBase

‎_contentTemplates/common/js-interop-file.md‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
#end
4949

5050
#enable-static-assets
51-
To enable the use of static assets in your project, add the following line to the `Startup.cs` file in the **Server** project:
51+
To enable the use of static assets in your project, add the following line to the `Program.cs` file in the **Server** project:
5252

5353

5454
**C#**
@@ -71,28 +71,11 @@ app.UseStaticFiles();
7171
7272
app.Run();
7373
````
74-
````Startup.cs
75-
namespace MyBlazorAppName
76-
{
77-
public class Startup
78-
{
79-
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
80-
{
81-
// ...
82-
83-
//To enable static files from a package, make sure this is present.
84-
app.UseStaticFiles();
85-
86-
// ...
87-
}
88-
}
89-
}
90-
````
9174
#end
9275

9376
#register-telerik-service-server
9477
<div class="skip-repl"></div>
95-
````Program.cs
78+
````
9679
// ...
9780
9881
var builder = WebApplication.CreateBuilder(args);
@@ -105,21 +88,6 @@ builder.Services.AddTelerikBlazor();
10588
10689
var app = builder.Build();
10790
````
108-
````Startup.cs
109-
namespace MyBlazorAppName
110-
{
111-
public class Startup
112-
{
113-
public void ConfigureServices(IServiceCollection services)
114-
{
115-
// ...
116-
services.AddTelerikBlazor();
117-
}
118-
119-
// ...
120-
}
121-
}
122-
````
12391
#end
12492

12593
#register-telerik-service-client

‎getting-started/client-blazor.md‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build an app t
55
slug: getting-started/client-side
66
tags: get,started,first,steps,client
77
published: true
8-
position: 1
8+
position: 2
99
---
1010

1111
# First Steps with Client-Side UI for Blazor
@@ -39,17 +39,16 @@ This article explains how to get the <a href = "https://www.telerik.com/blazor-u
3939

4040
## Step 4: Enable the Blazor UI Components
4141

42-
To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
42+
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.
43+
44+
### 4.1. Add the Telerik UI for Blazor Client Assets
4345

4446
1\. Add the `telerik-blazor.js` file to your main index file&mdash;`wwwroot/index.html`.
4547

4648
**HTML**
4749
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
4850

49-
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):
50-
51-
* Use `Startup.cs` for .NET 3.x
52-
* Use `Program.cs` for .NET 6 and .NET 7
51+
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your `.Server` project (by default, this line is already present).
5352

5453
**C#**
5554
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
@@ -58,12 +57,9 @@ To enable the Telerik UI for Blazor components, you must add several client-side
5857

5958
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
6059

61-
4\. In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.
62-
63-
**C#**
64-
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
60+
### 4.2. Include @using Statements
6561

66-
5\. 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 general-information/font-icons%}).
62+
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 general-information/font-icons%}).
6763

6864
**_Imports.razor**
6965

@@ -72,10 +68,20 @@ To enable the Telerik UI for Blazor components, you must add several client-side
7268
@using Telerik.FontIcons
7369
@using Telerik.SvgIcons
7470

71+
### 4.3. Add the TelerikRootComponent
72+
73+
Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.
7574

76-
6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
75+
@[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
7776

78-
7\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
77+
@[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
78+
79+
### 4.4. Register the Telerik Blazor Service
80+
81+
In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.
82+
83+
**C#**
84+
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
7985

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

‎getting-started/hybrid-blazor.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build a .NET M
55
slug: getting-started/hybrid-blazor
66
tags: get,started,first,steps,server,hybrid,maui
77
published: true
8-
position: 3
8+
position: 5
99
---
1010

1111
# First Steps with Blazor Hybrid
@@ -31,7 +31,7 @@ Before adding the Telerik UI for Blazor components, ensure that the correspondin
3131

3232
The process for adding Telerik UI for Blazor to a WinForms, WPF, or MAUI app is similar to including the components in a [native Blazor app]({%slug getting-started/what-you-need%}) and involves the six steps listed below.
3333

34-
### 1. Get the `Telerik UI for Blazor` Package
34+
### 1. Get the Telerik UI for Blazor Package
3535

3636
To use the UI for Blazor components, 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)
3737

@@ -41,7 +41,7 @@ To have the Telerik Blazor components look and behave as expected, you need the
4141

4242
You can 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).
4343

44-
### 3. Include `@using` Statements
44+
### 3. Include @using Statements
4545

4646
You can set the project to recognize all Telerik components without explicit `@using` statements in every `.razor` file. To achieve this, add the code below to your `~/_Imports.razor` file. You can register one or both icon namespaces depending on the [icon type you will be using]({%slug general-information/font-icons%}).
4747

@@ -56,7 +56,7 @@ You can set the project to recognize all Telerik components without explicit `@u
5656
@using Telerik.SvgIcons
5757
````
5858

59-
### 4. Add the `TelerikRootComponent`
59+
### 4. Add the TelerikRootComponent
6060

6161
Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:
6262

‎getting-started/images/blazor-web-app-in-browser.png‎

41.8 KB
Loading

‎getting-started/server-blazor.md‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build an app t
55
slug: getting-started/server-side
66
tags: get,started,first,steps,server
77
published: true
8-
position: 2
8+
position: 3
99
---
1010

1111
# First Steps with Server-Side UI for Blazor
@@ -39,42 +39,35 @@ This article explains how to get the Telerik UI for Blazor components in your <a
3939

4040
## Step 4: Enable the Blazor UI Components
4141

42-
To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
42+
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.
43+
44+
### 4.1. Add the Telerik UI for Blazor Client Assets
4345

4446
1\. Add the `telerik-blazor.js` file to your main index file:
4547

46-
* `~/Pages/_Host.cshtml` for .NET 3.x and .NET 7
48+
* `~/Pages/_Host.cshtml` for .NET 7
4749
* `~/Pages/_Layout.cshtml` for .NET 6
4850

4951
**HTML**
5052

5153
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
5254

53-
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):
54-
55-
* Use `Startup.cs` for .NET 3.x
56-
* Use `Program.cs` for .NET 6 and .NET 7
55+
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your Blazor Server project (by default, this line is already present).
5756

5857
**C#**
5958
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
6059

6160

6261
3\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet]({%slug general-information/themes%}) as a [static asset]({%slug general-information/themes%}#static-assets) or from a [CDN]({%slug general-information/themes%}#cdn).
6362

64-
* Use the `~/Pages/_Host.cshtml` index file for .NET 3.x and .NET 7
63+
* Use the `~/Pages/_Host.cshtml` index file for .NET 7
6564
* Use the `~/Pages/_Layout.cshtml` index file for .NET 6
6665

6766
@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)
6867

69-
4\. In the startup file of your Blazor Server project, register the Telerik Blazor Service:
70-
71-
* Use `Startup.cs` for .NET 3.x
72-
* Use `Program.cs` for .NET 6 and .NET 7
73-
74-
**C#**
75-
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
68+
### 4.2. Include @using Statements
7669

77-
5\. 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 general-information/font-icons%}).
70+
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 general-information/font-icons%}).
7871

7972
**_Imports.razor**
8073

@@ -83,10 +76,20 @@ To enable the Telerik UI for Blazor components, you must add several client-side
8376
@using Telerik.FontIcons
8477
@using Telerik.SvgIcons
8578

79+
### 4.3. Add the TelerikRootComponent
8680

87-
6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
81+
Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.
8882

89-
7\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
83+
@[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
84+
85+
@[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
86+
87+
### 4.4. Register the Telerik Blazor Service
88+
89+
In the `Program.cs` file of your Blazor Server project, register the Telerik Blazor Service:
90+
91+
**C#**
92+
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
9093

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

0 commit comments

Comments
 (0)