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
+72-46Lines changed: 72 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,15 @@ 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
32
33
33
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart NuGet in the Blazor Web App
34
34
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).
35
+
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
36
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.
37
+
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
38
39
39
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.
49
+
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
60
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).
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-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
62
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.
63
+
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
64
65
65
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
66
66
@@ -74,11 +74,9 @@ cd BlazorWebApp.Client
74
74
{% endhighlight %}
75
75
{% endtabs %}
76
76
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
77
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
80
78
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.
79
+
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
80
83
81
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
84
82
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -95,20 +93,68 @@ dotnet restore
95
93
96
94
{% endtabs %}
97
95
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.
96
+
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
97
100
98
{% endtabcontent %}
101
99
102
-
{% endtabcontents %}
100
+
{% tabcontent .NET CLI %}
103
101
104
-
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
102
+
## Prerequisites
103
+
104
+
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).
105
+
106
+
{% tabs %}
107
+
{% highlight c# tabtitle=".NET CLI" %}
108
+
109
+
dotnet --version
110
+
111
+
{% endhighlight %}
112
+
{% endtabs %}
113
+
114
+
## Create a Blazor Web App using .NET CLI
115
+
116
+
Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
117
+
118
+
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).
119
+
120
+
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
105
121
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.|
122
+
{% tabs %}
123
+
{% highlight c# tabtitle="Blazor Web App" %}
124
+
125
+
dotnet new blazor -o BlazorWebApp -int Auto
126
+
cd BlazorWebApp
127
+
cd BlazorWebApp.Client
128
+
129
+
{% endhighlight %}
130
+
{% endtabs %}
131
+
132
+
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.
133
+
134
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
110
135
111
-
Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
136
+
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.
137
+
138
+
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.
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.
150
+
151
+
{% endtabcontent %}
152
+
153
+
{% endtabcontents %}
154
+
155
+
## Add Import Namespaces
156
+
157
+
Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces.
112
158
113
159
{% tabs %}
114
160
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -119,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
119
165
{% endhighlight %}
120
166
{% endtabs %}
121
167
122
-
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
168
+
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
169
+
170
+
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
123
171
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.
172
+
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 +218,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
191
218
192
219
## Add Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart component
193
220
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:
221
+
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
222
196
223
| Interactivity location | RenderMode | Code |
197
224
| --- | --- | --- |
198
225
| 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.
229
+
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
230
205
231
{% tabs %}
206
232
{% highlight razor %}
@@ -221,7 +247,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
221
247
{% endhighlight %}
222
248
{% endtabs %}
223
249
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.
250
+
* 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