WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
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-wasm.md
+64-17Lines changed: 64 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ documentation: ug
11
11
12
12
# Getting Started with Blazor 3D Chart Component in Blazor WASM App
13
13
14
-
This section briefly explains about how to include `Blazor 3D Charts` component in your Blazor WebAssembly (WASM) App using Visual Studio and Visual Studio Code.
14
+
This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your Blazor WebAssembly 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/).
15
15
16
16
{% tabcontents %}
17
17
@@ -23,11 +23,13 @@ This section briefly explains about how to include `Blazor 3D Charts` component
23
23
24
24
## Create a new Blazor App in Visual Studio
25
25
26
-
You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
26
+
Create a **Blazor WebAssembly App** using Visual Studio 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). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor 3D Chart NuGet in the App
29
31
30
-
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`. Alternatively, you can utilize the following package manager command to achieve the same.
32
+
To add the **Blazor 3D Chart** component in the app, open the 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). Alternatively, run the following commands in the Package Manager Console 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.
42
+
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.
You can create a **Blazor WebAssembly 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).
54
+
Create a **Blazor WebAssembly 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). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
53
55
54
-
Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
56
+
Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
55
57
56
58
{% tabs %}
57
59
@@ -64,7 +66,7 @@ cd BlazorApp
64
66
65
67
{% endtabs %}
66
68
67
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D and Themes NuGet in the App
69
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
68
70
69
71
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
70
72
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -81,26 +83,72 @@ dotnet restore
81
83
82
84
{% endtabs %}
83
85
84
-
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.
86
+
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.
87
+
88
+
{% endtabcontent %}
89
+
90
+
{% tabcontent .NET CLI %}
91
+
92
+
## Prerequisites
93
+
94
+
Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
95
+
96
+
{% tabs %}
97
+
{% highlight c# tabtitle=".NET CLI" %}
98
+
99
+
dotnet --version
100
+
101
+
{% endhighlight %}
102
+
{% endtabs %}
103
+
104
+
## Create a Blazor WebAssembly App using .NET CLI
105
+
106
+
Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
107
+
108
+
{% tabs %}
109
+
{% highlight c# tabtitle=".NET CLI" %}
110
+
111
+
dotnet new blazorwasm -o BlazorApp
112
+
cd BlazorApp
113
+
114
+
{% endhighlight %}
115
+
{% endtabs %}
116
+
117
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Chart3D NuGet in the App
118
+
119
+
To add the **Blazor 3D Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) 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) topics for more details.
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.
85
131
86
132
{% endtabcontent %}
87
133
88
134
{% endtabcontents %}
89
135
90
-
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
136
+
## Add Import Namespaces
91
137
92
-
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
138
+
Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces.
93
139
94
140
{% tabs %}
95
-
{% highlight razor tabtitle="~/_Imports.razor" %}
141
+
{% highlight C# tabtitle="~/_Imports.razor" %}
96
142
97
143
@using Syncfusion.Blazor
98
144
@using Syncfusion.Blazor.Chart3D
99
145
100
146
{% endhighlight %}
101
147
{% endtabs %}
102
148
103
-
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
149
+
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
150
+
151
+
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `<head>` of the main page as follows:
128
-
129
-
* For Blazor WebAssembly app, include it in the **~/index.html** file.
175
+
The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `<head>` of the **~/index.html** file.
N> 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.
183
+
184
+
N> 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 Blazor application.
138
185
139
186
## Add Blazor 3D Chart Component
140
187
@@ -150,7 +197,7 @@ Add the Syncfusion<sup style="font-size:70%">®</sup> Blazor 3D Chart compone
150
197
{% endhighlight %}
151
198
{% endtabs %}
152
199
153
-
* 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.
200
+
* 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