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
Copy file name to clipboardExpand all lines: blazor/3D-chart/getting-started-with-web-app.md
+74-46Lines changed: 74 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ documentation: ug
9
9
10
10
# Getting Started with Blazor 3D Chart Component in Web App
11
11
12
-
This section briefly explains about how to include `Blazor 3D Chart` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
12
+
This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
13
13
14
14
To get started quickly with Blazor 3D Chart component, check on the following video:
15
15
@@ -26,15 +26,17 @@ To get started quickly with Blazor 3D Chart component, check on the following vi
26
26
27
27
## Create a new Blazor Web App in Visual Studio
28
28
29
-
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
29
+
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
30
30
31
-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
31
+
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
32
+
33
+

32
34
33
35
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart NuGet in the Blazor Web App
34
36
35
-
To add **Blazor 3D Chart** 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.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D).
37
+
To add the **Blazor 3D Chart** component in the app, open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D).
36
38
37
-
If you utilize`WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
39
+
If using the`WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<supstyle="font-size:70%">®</sup> Blazor component NuGet packages in the client project.
38
40
39
41
Alternatively, you can utilize the following package manager command to achieve the same.
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
51
+
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
## Create a new Blazor Web App in Visual Studio Code
60
62
61
-
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
63
+
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
62
64
63
-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
65
+
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
64
66
65
67
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
66
68
@@ -74,11 +76,9 @@ cd BlazorWebApp.Client
74
76
{% endhighlight %}
75
77
{% endtabs %}
76
78
77
-
N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
78
-
79
79
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
80
80
81
-
If you utilize`WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
81
+
If using the`WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<supstyle="font-size:70%">®</sup> Blazor component NuGet packages in the client project.
82
82
83
83
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
84
84
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -95,20 +95,68 @@ dotnet restore
95
95
96
96
{% endtabs %}
97
97
98
-
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
98
+
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
99
99
100
100
{% endtabcontent %}
101
101
102
-
{% endtabcontents %}
102
+
{% tabcontent .NET CLI %}
103
103
104
-
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
104
+
## Prerequisites
105
+
106
+
Latest version of the [.NET 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).
107
+
108
+
{% tabs %}
109
+
{% highlight c# tabtitle=".NET CLI" %}
110
+
111
+
dotnet --version
112
+
113
+
{% endhighlight %}
114
+
{% endtabs %}
115
+
116
+
## Create a Blazor Web App using .NET CLI
117
+
118
+
Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
119
+
120
+
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
121
+
122
+
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
123
+
124
+
{% tabs %}
125
+
{% highlight c# tabtitle="Blazor Web App" %}
126
+
127
+
dotnet new blazor -o BlazorWebApp -int Auto
128
+
cd BlazorWebApp
129
+
cd BlazorWebApp.Client
130
+
131
+
{% endhighlight %}
132
+
{% endtabs %}
133
+
134
+
This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
135
+
136
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
137
+
138
+
Here's an example of how to add the **Blazor 3D Chart** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) 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) for more details.
139
+
140
+
If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<supstyle="font-size:70%">®</sup> Blazor component NuGet packages in the client project.
105
141
106
-
| Interactive Render Mode | Description |
107
-
| -- | -- |
108
-
| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
109
-
| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
152
+
153
+
{% endtabcontent %}
154
+
155
+
{% endtabcontents %}
156
+
157
+
## Add Import Namespaces
110
158
111
-
Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D`namespace.
159
+
Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D`namespaces.
112
160
113
161
{% tabs %}
114
162
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -119,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
119
167
{% endhighlight %}
120
168
{% endtabs %}
121
169
122
-
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
170
+
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
171
+
172
+
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
123
173
124
-
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in both**~/Program.cs** files of your Blazor Web App.
174
+
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the**~/Program.cs** files of the main `server` project and associated `.Client` project.
If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service only in that **~/Program.cs** file.
The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -191,16 +220,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
191
220
192
221
## Add Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component
193
222
194
-
Add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
223
+
Add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
195
224
196
225
| Interactivity location | RenderMode | Code |
197
226
| --- | --- | --- |
198
227
| Per page/component | Auto |@rendermode InteractiveAuto |
N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
231
+
N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
204
232
205
233
{% tabs %}
206
234
{% highlight razor %}
@@ -221,7 +249,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
221
249
{% endhighlight %}
222
250
{% endtabs %}
223
251
224
-
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component in your default web browser.
252
+
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component in the default web browser.
0 commit comments