Skip to content

Commit 4a0358d

Browse files
marin-bratanovmarin-bratanov
committed
docs(common): refactor articles
1 parent ff42e13 commit 4a0358d

File tree

3 files changed

+82
-107
lines changed

3 files changed

+82
-107
lines changed

‎_contentTemplates/common/get-started.md‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,77 @@ You can also use the official VS 2019 installation and enable the .NET Core 3.0
4343
#add-nuget-feed
4444
## Add the Telerik NuGet Feed to Visual Studio
4545

46-
Telerik UI for Blazor is distributed through our private NuGet feed. Follow the [Setup the Telerik Private NuGet Feed]({%slug installation/nuget%}) article to set this up in case you don't have it already.
46+
Telerik UI for Blazor is distributed through our private NuGet feed.
47+
48+
Follow the [Setup the Telerik Private NuGet Feed]({%slug installation/nuget%}) article to set it up in case you don't have it already.
49+
50+
Visit the following link to activate access to the Blazor Preview so you can alter download the package: [https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor).
51+
52+
Once you have added the Telerik NuGet feed, continue with this tutorial.
53+
#end
54+
55+
56+
#project-creation-part-1
57+
If you have one, go to the [Add to Existing Project](#add-to-existing-project) section below.
58+
59+
If you don't have a Blazor project set up, first you need to create one:
60+
61+
1. Open Visual Studio 2019
62+
63+
1. Create a New Project
64+
65+
1. Choose `ASP.NET Core Web Application` and click `Next`. Then, choose a name and location for the project and click `Create`.
66+
67+
![Create new ASP.NET Core Web Application](images/create-new-application.jpg)
68+
#end
69+
70+
71+
72+
#get-access
73+
To get access to the UI for Blazor components, follow these steps:
74+
75+
1. Activate a trial by visiting the following link: [https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor). This activates a UI for Blazor preview in your account and enables the [Telerik private NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio) for you, so you can install our components. Make sure that you have configured [our NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio).
76+
77+
1. Install the `Telerik.UI.for.Blazor` NuGet package to your Blazor project. If you do not see it in the `telerik.com` feed, wait for a about 20-30 minutes after activating the trial:
78+
#end
79+
80+
81+
#add-component-sample
82+
83+
**CSHTML**
84+
85+
<TelerikButton>Say Hello</TelerikButton>
86+
87+
1. Optionally, hook up a click handler that will show a message. The resulting view should look like this:
88+
89+
**CSHTML**
90+
91+
@page "/"
92+
@using Microsoft.AspNetCore.Components
93+
94+
<TelerikButton OnClick="@SayHelloHandler" Class="k-primary">Say Hello</TelerikButton>
95+
96+
<br />
97+
98+
@helloString
99+
100+
@functions {
101+
MarkupString helloString;
102+
103+
void SayHelloHandler()
104+
{
105+
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
106+
helloString = new MarkupString(msg);
107+
}
108+
}
109+
110+
1. **Run the app** in the browser by pressing `F5`. You should see something like this:
111+
112+
![App in the browser](images/app-in-browser.png)
113+
114+
Now you have the Telerik components running in your Blazor app.
115+
116+
Next, you can explore the [live demos](https://demos.telerik.com/blazor) and the rest of the documentation.
117+
47118
#end
48119

‎getting-started/client-blazor.md‎

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,13 @@ This article explains how to get the Telerik UI for Blazor components in your **
2020
@[template](/_contentTemplates/common/get-started.md#add-latest-ms-bits-client-side-link)
2121

2222

23-
## Add the Telerik NuGet Feed to Visual Studio
24-
25-
Telerik UI for Blazor is distributed through our private NuGet feed. Follow the [Setup the Telerik Private NuGet Feed]({%slug installation/nuget%}) article to set this up in case you don't have it already.
23+
@[template](/_contentTemplates/common/get-started.md#add-nuget-feed)
2624

2725

2826
## Add the Telerik Components to Your Project
2927

30-
We recommend the usage of `Blazor (ASP.NET Hosted)` project. If you have one, go to the [Add to Existing Project](#add-to-existing-project) section below.
31-
32-
If you don't have a Blazor project set up, first you need to create one:
33-
34-
1. Open Visual Studio 2019
35-
36-
1. Create a New Project
37-
38-
1. Choose `ASP.NET Core Web Application` and click `Next`. Then, choose a name and location for the project and click `Create`.
39-
40-
![Create new ASP.NET Core Web Application](images/create-new-application.jpg)
28+
For client-side Blazor, we recommend the usage of `Blazor (ASP.NET Hosted)` project.
29+
@[template](/_contentTemplates/common/get-started.md#project-creation-part-1)
4130

4231
1. Choose the `Blazor (ASP.NET Hosted)` project type and click `Create`.
4332

@@ -46,11 +35,7 @@ If you don't have a Blazor project set up, first you need to create one:
4635

4736
### Add to Existing Project
4837

49-
To get access to the UI for Blazor components, follow these steps:
50-
51-
1. Activate a trial by visiting the following link: [https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor). This activates a UI for Blazor preview in your account and enables the [Telerik private NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio) for you, so you can install our components. Make sure that you have configured [our NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio).
52-
53-
1. Install the `Telerik.UI.for.Blazor` NuGet package to your Blazor project. If you do not see it in the `telerik.com` feed, wait for a about 20-30 minutes after activating the trial:
38+
@[template](/_contentTemplates/common/get-started.md#get-access)
5439

5540
1. Right-click on the `Client` project in the solution and select `Manage NuGet Packages`:
5641

@@ -80,38 +65,4 @@ Now your project can use the Telerik UI for Blazor components in all its views.
8065
The final step is to actually use a component on a view and run it in the browser. For example:
8166

8267
1. **Add** a **Button** component to the `~/Pages/Index.cshtml` view:
83-
84-
**CSHTML**
85-
86-
<TelerikButton>Say Hello</TelerikButton>
87-
88-
1. Optionally, hook up a click handler that will show a message. The resulting view should look like this:
89-
90-
**CSHTML**
91-
92-
@page "/"
93-
@using Microsoft.AspNetCore.Components
94-
95-
<TelerikButton OnClick="@SayHelloHandler" Class="k-primary">Say Hello</TelerikButton>
96-
97-
<br />
98-
99-
@helloString
100-
101-
@functions {
102-
MarkupString helloString;
103-
104-
void SayHelloHandler()
105-
{
106-
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
107-
helloString = new MarkupString(msg);
108-
}
109-
}
110-
111-
1. **Run the app** in the browser by pressing `F5`. You should see something like this:
112-
113-
![App in the browser](images/app-in-browser.png)
114-
115-
Now you have the Telerik components running in your Blazor app.
116-
117-
Next, you can explore the [live demos](https://demos.telerik.com/blazor) and the rest of the documentation.
68+
@[template](/_contentTemplates/common/get-started.md#add-component-sample)

‎getting-started/server-blazor.md‎

Lines changed: 5 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,8 @@ This article explains how to get the Telerik UI for Blazor components in your **
2525

2626
## Add the Telerik Components to Your Project
2727

28-
To use Blazor server-side, you need to use the `Razor Components` type of project. If you have one, go to the [Add to Existing Project](#add-to-existing-project) section below.
29-
30-
If you don't have a Blazor project set up, first you need to create one:
31-
32-
1. Open Visual Studio 2019
33-
34-
1. Create a New Project
35-
36-
1. Choose `ASP.NET Core Web Application` and click `Next`. Then, choose a name and location for the project and click `Create`.
37-
38-
![Create new ASP.NET Core Web Application](images/create-new-application.jpg)
28+
To use Blazor server-side, you need to use the `Razor Components` type of project.
29+
@[template](/_contentTemplates/common/get-started.md#project-creation-part-1)
3930

4031
1. Choose the `Razor Components` project type and click `Create`.
4132

@@ -44,19 +35,15 @@ If you don't have a Blazor project set up, first you need to create one:
4435

4536
### Add to Existing Project
4637

47-
To get access to the UI for Blazor components, follow these steps:
48-
49-
1. Activate a trial by visiting the following link: [https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor). This activates a UI for Blazor preview in your account and enables the [Telerik private NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio) for you, so you can install our components. Make sure that you have configured [our NuGet feed](#add-the-telerik-nuget-feed-to-visual-studio).
50-
51-
1. Install the `Telerik.UI.for.Blazor` NuGet package to your Blazor project. If you do not see it in the `telerik.com` feed, wait for a about 20-30 minutes after activating the trial:
38+
@[template](/_contentTemplates/common/get-started.md#get-access)
5239

5340
1. Right-click on the project in the solution and select `Manage NuGet Packages`:
5441

5542
![](images/manage-nuget-packages-for-server-app.png)
5643

5744
1. Choose the `telerik.com` feed, find the `Telerik.UI.for.Blazor` package and click `Install`:
5845

59-
![Add Telerik Blazor Package to Client Project](images/add-telerik-nuget-to-client-app.png)
46+
![Add Telerik Blazor Package to the project](images/add-telerik-nuget-to-server-app.png)
6047

6148
1. Open the `~/Components/_ViewImports.cshtml` file and add the following line to register the Telerik components for all component files:
6249

@@ -78,38 +65,4 @@ Now your project can use the Telerik UI for Blazor components in all its compone
7865
The final step is to actually use a component on a view and run it in the browser. For example:
7966

8067
1. **Add** a **Button** component to the `~/Components/Pages/Index.cshtml` view:
81-
82-
**CSHTML**
83-
84-
<TelerikButton>Say Hello</TelerikButton>
85-
86-
1. Optionally, hook up a click handler that will show a message. The resulting view should look like this:
87-
88-
**CSHTML**
89-
90-
@page "/"
91-
@using Microsoft.AspNetCore.Components
92-
93-
<TelerikButton OnClick="@SayHelloHandler" Class="k-primary">Say Hello</TelerikButton>
94-
95-
<br />
96-
97-
@helloString
98-
99-
@functions {
100-
MarkupString helloString;
101-
102-
void SayHelloHandler()
103-
{
104-
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
105-
helloString = new MarkupString(msg);
106-
}
107-
}
108-
109-
1. **Run the app** in the browser by pressing `F5`. You should see something like this:
110-
111-
![App in the browser](images/app-in-browser.png)
112-
113-
Now you have the Telerik components running in your Blazor app.
114-
115-
Next, you can explore the [live demos](https://demos.telerik.com/blazor) and the rest of the documentation.
68+
@[template](/_contentTemplates/common/get-started.md#add-component-sample)

0 commit comments

Comments
 (0)