Skip to content

Commit 2b689b6

Browse files
ntachevantacheva
authored
Net 6 docs update (#570)
* docs(net6):getting started server - draft * docs(net 6): getting started articles updates with net 6 info * docs(net 6)test skip repl * docs(net 6) test 2 skip repl * docs(net 6)test 3 skip repl * docs(net 6) test 4 skip repl * docs(net 6)update getting started resources * docs(net 6)update supported versions
1 parent 84b916d commit 2b689b6

File tree

9 files changed

+270
-166
lines changed

9 files changed

+270
-166
lines changed

‎_contentTemplates/common/get-started.md

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ If you choose to create a project with the Telerik VS Extensions, you can jump d
4747

4848
To create a project manually, without using the Telerik VS Extensions, follow these steps:
4949

50-
1. Open Visual Studio 2019.
50+
1. Open Visual Studio (2019 for .NET 3.x and .NET 5; 2022 for .NET 6).
5151

5252
1. Create a New Project.
5353

@@ -166,22 +166,28 @@ To setup a local NuGet package source, so you can install the Telerik components
166166
#end
167167

168168

169-
#root-component-steps
170-
1. 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:
169+
#root-component-telerik-layout
170+
Add the Telerik Layout
171+
172+
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:
171173

172-
@inherits LayoutComponentBase
173-
174-
<TelerikRootComponent>
175-
@Body
176-
</TelerikRootComponent>
174+
@inherits LayoutComponentBase
175+
176+
<TelerikRootComponent>
177+
@Body
178+
</TelerikRootComponent>
177179

180+
#end
181+
182+
#root-component-main-layout
183+
Configure the Main Layout
178184

179-
1. 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.
185+
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.
180186

181-
@layout TelerikLayout
182-
@inherits LayoutComponentBase
187+
@layout TelerikLayout
188+
@inherits LayoutComponentBase
183189

184-
@* @Body and other code will be present here depending on your project *@
190+
@* @Body and other code will be present here depending on your project *@
185191
#end
186192

187193

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

Lines changed: 121 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,36 +16,42 @@
1616
#end
1717

1818
#add-js-interop-file-to-getting-started-server
19-
Add the `telerik-blazor.js` file to your main index file - `~/Pages/_Host.cshtml`:
19+
Add the `telerik-blazor.js` file to your main index file:
20+
21+
* `~/Pages/_Host.cshtml` for .NET 3.x - .NET 5
22+
* `~/Pages/_Layout.cshtml` for .NET 6
2023

2124
**HTML**
22-
25+
2326
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
2427

2528
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets)
2629
#end
2730

2831
#js-interop-file-snippet
29-
<head>
30-
. . .
31-
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
32-
33-
<!-- For Trial licenses use
34-
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>
35-
-->
36-
</head>
32+
````
33+
<head>
34+
. . .
35+
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
36+
37+
<!-- For Trial licenses use
38+
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>
39+
-->
40+
</head>
41+
````
3742
#end
3843

39-
4044
#theme-static-asset-snippet
41-
<head>
42-
. . .
43-
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
44-
45-
<!-- For Trial licenses use
46-
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
47-
-->
48-
</head>
45+
````
46+
<head>
47+
. . .
48+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
49+
50+
<!-- For Trial licenses use
51+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
52+
-->
53+
</head>
54+
````
4955
#end
5056

5157
#enable-static-assets
@@ -59,27 +65,118 @@
5965
#end
6066

6167
#enable-static-assets-snippet
62-
// Startup.cs
63-
namespace MyBlazorAppName
68+
<div class="skip-repl"></div>
69+
````Startup.cs
70+
namespace MyBlazorAppName
6471
{
6572
public class Startup
6673
{
6774
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
6875
{
6976
//more code may be present here
70-
77+
7178
//make sure this is present to enable static files from a package
7279
app.UseStaticFiles();
73-
80+
7481
//more code may be present here
7582
}
7683
}
7784
}
85+
````
86+
````Program.cs
87+
88+
//more code may be present here
89+
90+
//make sure this is present to enable static files from a package
91+
app.UseStaticFiles();
92+
93+
//more code may be present here
94+
````
7895
#end
7996

8097

8198

8299
#app-paths
83-
Add the following to your main index file (`~/Pages/_Host.cshtml` for a server-side Blazor app and `wwwroot/index.html` for a client-side Blazor app):
100+
Add the following to your main index file:
101+
102+
* Client-Side Blazor app - `wwwroot/index.html`
103+
* Server-Side Blazor app
104+
* `~/Pages/_Host.cshtml` for .NET 3.x and .NET 5
105+
* `~/Pages/_Layout.cshtml` for .NET 6
84106
#end
85107

108+
#register-telerik-service-server
109+
<div class="skip-repl"></div>
110+
````Startup.cs
111+
namespace MyBlazorAppName
112+
{
113+
public class Startup
114+
{
115+
public void ConfigureServices(IServiceCollection services)
116+
{
117+
//more code may be present here
118+
services.AddTelerikBlazor();
119+
}
120+
121+
//more code may be present here
122+
}
123+
}
124+
````
125+
````Program.cs
126+
//more code may be present here
127+
128+
builder.Services.AddTelerikBlazor();
129+
130+
//more code may be present here
131+
````
132+
#end
133+
134+
#register-telerik-service-client
135+
<div class="skip-repl"></div>
136+
````.NET_3.x_and_.NET_5
137+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
138+
using Microsoft.Extensions.DependencyInjection;
139+
using System.Threading.Tasks;
140+
using System.Net.Http;
141+
using System;
142+
143+
namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace
144+
{
145+
public class Program
146+
{
147+
public static async Task Main(string[] args)
148+
{
149+
// sample host builder for a WASM app, yours may differ
150+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
151+
builder.RootComponents.Add<App>("app");
152+
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
153+
// there may be more code here
154+
155+
// register the Telerik services
156+
builder.Services.AddTelerikBlazor();
157+
158+
// there may be more code here
159+
// sample host builder for a WASM app, yours may differ
160+
await builder.Build().RunAsync();
161+
}
162+
}
163+
}
164+
````
165+
````.NET_6
166+
using ClientBlazorProject;
167+
using Microsoft.AspNetCore.Components.Web;
168+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
169+
170+
// sample host builder for a WASM app, yours may differ
171+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
172+
builder.RootComponents.Add<App>("#app");
173+
builder.RootComponents.Add<HeadOutlet>("head::after");
174+
175+
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
176+
177+
// register the Telerik services
178+
builder.Services.AddTelerikBlazor();
179+
180+
await builder.Build().RunAsync();
181+
````
182+
#end

‎getting-started/client-blazor.md

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -43,66 +43,63 @@ To create a client-side Blazor app, use an **ASP.NET Core hosted** Blazor projec
4343

4444
@[template](/_contentTemplates/common/get-started.md#get-access)
4545

46-
1. Right-click the `Client` project in the solution and select **Manage NuGet Packages**:
46+
1\. Manage NuGet Packages
47+
48+
Right-click the `Client` project in the solution and select **Manage NuGet Packages**:
4749

4850
![Manage NuGet Packages](images/manage-nuget-packages-for-client-app.png)
4951

50-
1. 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.
52+
2\. Install the Telerik Package
53+
54+
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.
5155

5256
![Add Telerik Blazor Package to Client Project](images/add-telerik-nuget-to-client-app.png)
5357

58+
3\. Add the JavaScript File
59+
60+
Add the `telerik-blazor.js` file to your main index file - `wwwroot/index.html`:
61+
62+
**HTML**
63+
64+
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)
65+
66+
To enable the use of static assets in your project, add the following line to the startup file of your **Server** project:
67+
68+
* `Startup.cs` for .NET 3.x and .NET 5
69+
* `Program.cs` for .NET 6
5470

55-
1. @[template](/_contentTemplates/common/js-interop-file.md#add-js-interop-file-to-getting-started-client)
71+
**C#**
72+
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
5673

74+
4\. Add the Stylesheet
5775

58-
1. Open the `~/wwwroot/index.html` file in the client web application and register the [Theme stylesheet]({%slug general-information/themes%}):
76+
Open the `~/wwwroot/index.html` file in the client web application and register the [Theme stylesheet]({%slug general-information/themes%}):
5977

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

62-
63-
1. Open the `~/Program.cs` file in the client web application and register the Telerik Blazor service:
6480

65-
**C#**
66-
67-
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
68-
using Microsoft.Extensions.DependencyInjection;
69-
using System.Threading.Tasks;
70-
using System.Net.Http;
71-
using System;
72-
73-
namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace
74-
{
75-
public class Program
76-
{
77-
public static async Task Main(string[] args)
78-
{
79-
// sample host builder for a WASM app, yours may differ
80-
var builder = WebAssemblyHostBuilder.CreateDefault(args);
81-
builder.RootComponents.Add<App>("app");
82-
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
83-
// there may be more code here
84-
85-
// register the Telerik services
86-
builder.Services.AddTelerikBlazor();
87-
88-
// there may be more code here
89-
// sample host builder for a WASM app, yours may differ
90-
await builder.Build().RunAsync();
91-
}
92-
}
93-
}
81+
82+
5\. Register the Telerik Blazor Service
83+
84+
Open the `~/Program.cs` file in the client web application and register the Telerik Blazor service:
85+
86+
**C#**
87+
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
88+
9489
95-
1. Add the following to your `~/_Imports.razor` file so the project recognizes the Telerik components in all files:
90+
6\. Add Usings
9691

97-
**_Imports.razor**
98-
99-
@using Telerik.Blazor
100-
@using Telerik.Blazor.Components
92+
Add the following to your `~/_Imports.razor` file so the project recognizes the Telerik components in all files:
10193

102-
@[template](/_contentTemplates/common/get-started.md#root-component-steps)
94+
**_Imports.razor**
95+
96+
@using Telerik.Blazor
97+
@using Telerik.Blazor.Components
10398

10499

100+
7\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
105101

102+
8\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
106103

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

0 commit comments

Comments
 (0)