Skip to content

Commit 22d1f7e

Browse files
Merge pull request #6488 from syncfusion-content/930500-UG
Updated Getting Started UG documentation
2 parents 266eb7b + b46a306 commit 22d1f7e

21 files changed

+288
-335
lines changed

blazor-toc.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@
5252
<!-- <li> -->
5353
<!-- <a href="/blazor/getting-started/blazor-core-hosted-cli">Blazor ASP.NET Core Hosted App using .NET CLI</a> -->
5454
<!-- </li> -->
55-
<li>
56-
<a href="/blazor/getting-started/razor-class-library">Razor Class Library in Visual Studio</a>
57-
</li>
5855
<li>Blazor Hybrid
5956
<ul>
6057
<li><a href="/blazor/getting-started/maui-blazor-app">.NET MAUI</a></li>
@@ -75,6 +72,9 @@
7572
<li>
7673
<a href="/blazor/getting-started/blazor-webassembly-authentication">Blazor Standalone WebAssembly App with Authentication Library</a>
7774
</li>
75+
<li>
76+
<a href="/blazor/getting-started/razor-class-library">Razor Class Library in Visual Studio</a>
77+
</li>
7878
<li>Using Syncfusion.Blazor NuGet
7979
<ul>
8080
<li><a href="/blazor/getting-started/blazor-web-app-single-nuget">Blazor Web App</a></li>
@@ -219,6 +219,9 @@
219219
<li>
220220
<a href="/blazor/common/custom-resource-generator">Custom Resource Generator(CRG)</a>
221221
</li>
222+
<li>
223+
<a href="/blazor/common/interactive-render-mode">Interactive Render Mode</a>
224+
</li>
222225
<li>Data Binding
223226
<ul>
224227
<li>

blazor/chart/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
4949

5050
## Create a new Blazor App in Visual Studio Code
5151

52-
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
52+
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
5353

5454
Alternatively, you can create a Server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
5555

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
layout: post
3+
title: Interactive Render Mode in Blazor Web App | Syncfusion
4+
description: Check out the documentation for Interactive Render Mode in Syncfusion Blazor Components in Blazor Web App.
5+
platform: Blazor
6+
component: Common
7+
documentation: ug
8+
---
9+
10+
# Render Interactive Modes in Blazor Web App
11+
12+
This section explains the set of commands used to create a Blazor Web App with various Interactive Render Modes. These commands can be executed via the command prompt (Windows), terminal (macOS), or shell (Linux), allowing you to create Blazor applications using different rendering modes.
13+
14+
If you set the Authentication Type as `None` and Interactivity location as `Per page/component`, you need to use the following command.
15+
16+
<table style="width:100%">
17+
<tr>
18+
<th style="width:30%">Interactive Render Mode</th>
19+
<th style="width:70%">Command</th>
20+
</tr>
21+
<tr>
22+
<td>Server</td>
23+
<td>
24+
{% highlight c# %}
25+
dotnet new blazor -o BlazorApp -int Server
26+
{% endhighlight %}
27+
</td>
28+
</tr>
29+
<tr>
30+
<td>WebAssembly</td>
31+
<td>
32+
{% highlight c# %}
33+
dotnet new blazor -o BlazorApp -int WebAssembly
34+
{% endhighlight %}
35+
</td>
36+
</tr>
37+
<tr>
38+
<td>Auto</td>
39+
<td>
40+
{% highlight c# %}
41+
dotnet new blazor -o BlazorApp -int Auto
42+
{% endhighlight %}
43+
</td>
44+
</tr>
45+
<tr>
46+
<td>None</td>
47+
<td>
48+
{% highlight c# %}
49+
dotnet new blazor -o BlazorApp -int None
50+
{% endhighlight %}
51+
</td>
52+
</tr>
53+
</table>
54+
55+
If you set the Authentication Type as `Individual Accounts` and Interactivity location as `Per page/component`, you need to use the following command.
56+
57+
<table style="width:100%">
58+
<tr>
59+
<th style="width:30%">Interactive Render Mode</th>
60+
<th style="width:70%">Command</th>
61+
</tr>
62+
<tr>
63+
<td>Server</td>
64+
<td>
65+
{% highlight c# %}
66+
dotnet new blazor -o BlazorApp -au Individual -int Server
67+
{% endhighlight %}
68+
</td>
69+
</tr>
70+
<tr>
71+
<td>WebAssembly</td>
72+
<td>
73+
{% highlight c# %}
74+
dotnet new blazor -o BlazorApp -au Individual -int WebAssembly
75+
{% endhighlight %}
76+
</td>
77+
</tr>
78+
<tr>
79+
<td>Auto</td>
80+
<td>
81+
{% highlight c# %}
82+
dotnet new blazor -o BlazorApp -au Individual -int Auto
83+
{% endhighlight %}
84+
</td>
85+
</tr>
86+
<tr>
87+
<td>None</td>
88+
<td>
89+
{% highlight c# %}
90+
dotnet new blazor -o BlazorApp -au Individual -int None
91+
{% endhighlight %}
92+
</td>
93+
</tr>
94+
</table>
95+
96+
If you set the Authentication Type as `Individual Accounts` and Interactivity location as `Global`, you need to use the following command.
97+
98+
<table style="width:100%">
99+
<tr>
100+
<th style="width:30%">Interactive Render Mode</th>
101+
<th style="width:70%">Command</th>
102+
</tr>
103+
<tr>
104+
<td>Server</td>
105+
<td>
106+
{% highlight c# %}
107+
dotnet new blazor -o BlazorApp -au Individual -int Server -ai
108+
{% endhighlight %}
109+
</td>
110+
</tr>
111+
<tr>
112+
<td>WebAssembly</td>
113+
<td>
114+
{% highlight c# %}
115+
dotnet new blazor -o BlazorApp -au Individual -int WebAssembly -ai
116+
{% endhighlight %}
117+
</td>
118+
</tr>
119+
<tr>
120+
<td>Auto</td>
121+
<td>
122+
{% highlight c# %}
123+
dotnet new blazor -o BlazorApp -au Individual -int Auto -ai
124+
{% endhighlight %}
125+
</td>
126+
</tr>
127+
<tr>
128+
<td>None</td>
129+
<td>
130+
{% highlight c# %}
131+
dotnet new blazor -o BlazorApp -au Individual -int None -ai
132+
{% endhighlight %}
133+
</td>
134+
</tr>
135+
</table>
136+
137+
If you set the Authentication Type as `None` and Interactivity location as `Global`, you need to use the following command.
138+
139+
<table style="width:100%">
140+
<tr>
141+
<th style="width:30%">Interactive Render Mode</th>
142+
<th style="width:70%">Command</th>
143+
</tr>
144+
<tr>
145+
<td>Server</td>
146+
<td>
147+
{% highlight c# %}
148+
dotnet new blazor -o BlazorApp -int Server-ai
149+
{% endhighlight %}
150+
</td>
151+
</tr>
152+
<tr>
153+
<td>WebAssembly</td>
154+
<td>
155+
{% highlight c# %}
156+
dotnet new blazor -o BlazorApp -int WebAssembly -ai
157+
{% endhighlight %}
158+
</td>
159+
</tr>
160+
<tr>
161+
<td>Auto</td>
162+
<td>
163+
{% highlight c# %}
164+
dotnet new blazor -o BlazorApp8 -int Auto -ai
165+
{% endhighlight %}
166+
</td>
167+
</tr>
168+
<tr>
169+
<td>None</td>
170+
<td>
171+
{% highlight c# %}
172+
dotnet new blazor -o BlazorApp8 -int None -ai
173+
{% endhighlight %}
174+
</td>
175+
</tr>
176+
</table>
177+
178+
N> If you want to see more available templates, you need to run the `dotnet new blazor --help` or `dotnet new blazor -h` command.

blazor/datagrid/getting-started-with-server-app.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o
4848

4949
## Create a new Blazor app in Visual Studio code
5050

51-
You can create a **Blazor Server app** using **Blazor Web App** template in Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
51+
You can create a **Blazor Server app** using **Blazor Web App** template in Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
5252

5353
Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
5454

blazor/diagram/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
125125

126126
## Step 1: How to Create a New Blazor App in Visual Studio Code
127127

128-
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
128+
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
129129

130130
Alternatively, you can create a Server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
131131

blazor/gantt-chart/getting-started-with-server-app.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: GanttChart
77
documentation: ug
88
---
99

10-
# Getting Started with Blazor Gantt Chart Component
10+
# Getting Started with Blazor Gantt Chart in Blazor Server App
1111

1212
This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor Server App using Visual Studio and Visual Studio Code.
1313

@@ -50,7 +50,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
5050

5151
## Create a new Blazor App in Visual Studio Code
5252

53-
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
53+
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
5454

5555
Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
5656

blazor/getting-started/blazor-server-side-visual-studio.md

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,29 @@ component: Common
77
documentation: ug
88
---
99

10-
# Getting Started with Blazor Server Side App in Visual Studio
10+
# Getting Started with Blazor Server App
1111

12-
This article provides a step-by-step instructions for building Blazor Server App with `Blazor Calendar` component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
12+
This article provides a step-by-step instructions for building Blazor Server App with `Blazor Calendar` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
13+
14+
## Using Playground
15+
16+
[Blazor Playground](https://blazor.syncfusion.com/documentation/blazor-playground/overview) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this.
17+
18+
{% playground "https://blazorplayground.syncfusion.com/" %}
19+
20+
## Manually Creating a Project
21+
22+
This section provides a brief explanation on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
1323

1424
{% tabcontents %}
1525

1626
{% tabcontent Visual Studio %}
1727

18-
## Prerequisites
28+
### Prerequisites
1929

2030
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
2131

22-
## Create a new Blazor Server App in Visual Studio
32+
### Create a new Blazor Server App in Visual Studio
2333

2434
You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
2535

@@ -29,7 +39,7 @@ You need to configure the corresponding [Interactive render mode](https://learn.
2939

3040
![Blazor Server App with Interactive Mode](images/blazor-app-interactive-mode.png)
3141

32-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
42+
### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
3343

3444
Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
3545

@@ -48,11 +58,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
4858

4959
{% tabcontent Visual Studio Code %}
5060

51-
## Prerequisites
61+
### Prerequisites
5262

5363
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
5464

55-
## Create a new Blazor Server App in Visual Studio Code
65+
### Create a new Blazor Server App in Visual Studio Code
5666

5767
You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
5868

@@ -69,7 +79,7 @@ cd BlazorApp
6979

7080
This command creates new Blazor app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
7181

72-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
82+
### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
7383

7484
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
7585
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -91,7 +101,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
91101

92102
{% tabcontent .NET CLI %}
93103

94-
## Prerequisites
104+
### Prerequisites
95105

96106
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
97107

@@ -103,9 +113,9 @@ dotnet --version
103113
{% endhighlight %}
104114
{% endtabs %}
105115

106-
## Create a Blazor Server side project using .NET CLI
116+
### Create a new Blazor Server App in .NET CLI
107117

108-
Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
118+
Run the `dotnet new blazor` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
109119

110120
{% tabs %}
111121
{% highlight c# tabtitle=".NET CLI" %}
@@ -118,7 +128,7 @@ cd BlazorApp
118128

119129
This command creates new Blazor app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
120130

121-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
131+
### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
122132

123133
Here's an example of how to add **Blazor Calendar** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
124134

@@ -138,17 +148,20 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
138148

139149
{% endtabcontents %}
140150

141-
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
151+
### Add Import Namespaces
142152

143-
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
153+
Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
144154

145155
```cshtml
146156
147157
@using Syncfusion.Blazor
148158
@using Syncfusion.Blazor.Calendars
149159
150160
```
151-
Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App.
161+
162+
### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
163+
164+
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App.
152165

153166
{% tabs %}
154167
{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
@@ -169,7 +182,7 @@ builder.Services.AddSyncfusionBlazor();
169182
{% endhighlight %}
170183
{% endtabs %}
171184

172-
## Add stylesheet and script resources
185+
### Add stylesheet and script resources
173186

174187
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below:
175188

@@ -187,7 +200,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
187200

188201
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
189202

190-
## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
203+
### Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
191204

192205
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page.
193206

0 commit comments

Comments
 (0)