You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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<supstyle="font-size:70%">®</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<supstyle="font-size:70%">®</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.
53
53
54
54
Alternatively, you can create a Server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
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
+
<tablestyle="width:100%">
17
+
<tr>
18
+
<thstyle="width:30%">Interactive Render Mode</th>
19
+
<thstyle="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
+
<tablestyle="width:100%">
58
+
<tr>
59
+
<thstyle="width:30%">Interactive Render Mode</th>
60
+
<thstyle="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
+
<tablestyle="width:100%">
99
+
<tr>
100
+
<thstyle="width:30%">Interactive Render Mode</th>
101
+
<thstyle="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
+
<tablestyle="width:100%">
140
+
<tr>
141
+
<thstyle="width:30%">Interactive Render Mode</th>
142
+
<thstyle="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.
Copy file name to clipboardExpand all lines: blazor/datagrid/getting-started-with-server-app.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,7 +48,7 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o
48
48
49
49
## Create a new Blazor app in Visual Studio code
50
50
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<supstyle="font-size:70%">®</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<supstyle="font-size:70%">®</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.
52
52
53
53
Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
Copy file name to clipboardExpand all lines: blazor/diagram/getting-started.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -125,7 +125,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
125
125
126
126
## Step 1: How to Create a New Blazor App in Visual Studio Code
127
127
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<supstyle="font-size:70%">®</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<supstyle="font-size:70%">®</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.
129
129
130
130
Alternatively, you can create a Server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
Copy file name to clipboardExpand all lines: blazor/gantt-chart/getting-started-with-server-app.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ control: GanttChart
7
7
documentation: ug
8
8
---
9
9
10
-
# Getting Started with Blazor Gantt Chart Component
10
+
# Getting Started with Blazor Gantt Chart in Blazor Server App
11
11
12
12
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.
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<supstyle="font-size:70%">®</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<supstyle="font-size:70%">®</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.
54
54
55
55
Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
Copy file name to clipboardExpand all lines: blazor/getting-started/blazor-server-side-visual-studio.md
+30-17Lines changed: 30 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,29 @@ component: Common
7
7
documentation: ug
8
8
---
9
9
10
-
# Getting Started with Blazor Server Side App in Visual Studio
10
+
# Getting Started with Blazor Server App
11
11
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.
This section provides a brief explanation on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
13
23
14
24
{% tabcontents %}
15
25
16
26
{% tabcontent Visual Studio %}
17
27
18
-
## Prerequisites
28
+
###Prerequisites
19
29
20
30
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
21
31
22
-
## Create a new Blazor Server App in Visual Studio
32
+
###Create a new Blazor Server App in Visual Studio
23
33
24
34
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<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
25
35
@@ -29,7 +39,7 @@ You need to configure the corresponding [Interactive render mode](https://learn.
29
39
30
40

31
41
32
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
42
+
###Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
33
43
34
44
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.
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
54
64
55
-
## Create a new Blazor Server App in Visual Studio Code
65
+
###Create a new Blazor Server App in Visual Studio Code
56
66
57
67
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<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
58
68
@@ -69,7 +79,7 @@ cd BlazorApp
69
79
70
80
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.
71
81
72
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
82
+
###Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
73
83
74
84
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
75
85
* Ensure you’re in the project root directory where your `.csproj` file is located.
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).
97
107
@@ -103,9 +113,9 @@ dotnet --version
103
113
{% endhighlight %}
104
114
{% endtabs %}
105
115
106
-
## Create a Blazor Server side project using .NET CLI
116
+
###Create a new Blazor Server App in .NET CLI
107
117
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).
109
119
110
120
{% tabs %}
111
121
{% highlight c# tabtitle=".NET CLI" %}
@@ -118,7 +128,7 @@ cd BlazorApp
118
128
119
129
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.
120
130
121
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
131
+
###Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Calendars and Themes NuGet in the App
122
132
123
133
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.
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:
175
188
@@ -187,7 +200,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
187
200
188
201
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.
Add the Syncfusion<supstyle="font-size:70%">®</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.
0 commit comments