Skip to content

Commit cdc82ca

Browse files
authored
Merge branch 'development' into 990489-HTTP-D
2 parents b3bdaa2 + d223fac commit cdc82ca

File tree

172 files changed

+9131
-6616
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

172 files changed

+9131
-6616
lines changed

blazor-toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3749,7 +3749,7 @@
37493749
<a href="/blazor/pager/data-binding">Data Binding</a>
37503750
</li>
37513751
<li>
3752-
<a href="/blazor/pager/behaviour-settings">Behaviour Settings</a>
3752+
<a href="/blazor/pager/behavior-settings">Behavior Settings</a>
37533753
</li>
37543754
<li>
37553755
<a href="/blazor/pager/pager-with-drop-down">Pager with Dropdown</a>

blazor/3D-chart/getting-started-with-web-app.md

Lines changed: 74 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Blazor 3D Chart Component in Web App
1111

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/).
1313

1414
To get started quickly with Blazor 3D Chart component, check on the following video:
1515

@@ -26,15 +26,17 @@ To get started quickly with Blazor 3D Chart component, check on the following vi
2626

2727
## Create a new Blazor Web App in Visual Studio
2828

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<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
3030

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+
![Create Blazor Web App](images/blazor-create-web-app.png)
3234

3335
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart NuGet in the Blazor Web App
3436

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).
3638

37-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
3840

3941
Alternatively, you can utilize the following package manager command to achieve the same.
4042

@@ -46,7 +48,7 @@ Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }}
4648
{% endhighlight %}
4749
{% endtabs %}
4850

49-
N> Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</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.
5052

5153
{% endtabcontent %}
5254

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

5961
## Create a new Blazor Web App in Visual Studio Code
6062

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<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
6264

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).
6466

6567
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
6668

@@ -74,11 +76,9 @@ cd BlazorWebApp.Client
7476
{% endhighlight %}
7577
{% endtabs %}
7678

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-
7979
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart3D NuGet in the App
8080

81-
If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
8282

8383
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
8484
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -95,20 +95,68 @@ dotnet restore
9595

9696
{% endtabs %}
9797

98-
N> Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</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.
9999

100100
{% endtabcontent %}
101101

102-
{% endtabcontents %}
102+
{% tabcontent .NET CLI %}
103103

104-
## Register Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
105141

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.|
142+
{% tabs %}
143+
{% highlight c# tabtitle=".NET CLI" %}
144+
145+
dotnet add package Syncfusion.Blazor.Chart3D --version {{ site.releaseversion }}
146+
dotnet restore
147+
148+
{% endhighlight %}
149+
{% endtabs %}
150+
151+
N> Syncfusion<sup style="font-size:70%">&reg;</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
110158

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.
112160

113161
{% tabs %}
114162
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -119,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
119167
{% endhighlight %}
120168
{% endtabs %}
121169

122-
Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
170+
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
171+
172+
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
123173

124-
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
125175

126176
{% tabs %}
127177
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -155,27 +205,6 @@ await builder.Build().RunAsync();
155205
{% endhighlight %}
156206
{% endtabs %}
157207

158-
If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
159-
160-
{% tabs %}
161-
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
162-
163-
...
164-
using Syncfusion.Blazor;
165-
166-
var builder = WebApplication.CreateBuilder(args);
167-
168-
// Add services to the container.
169-
builder.Services.AddRazorComponents()
170-
.AddInteractiveServerComponents();
171-
builder.Services.AddSyncfusionBlazor();
172-
173-
var app = builder.Build();
174-
....
175-
176-
{% endhighlight %}
177-
{% endtabs %}
178-
179208
## Add script resources
180209

181210
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
191220

192221
## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component
193222

194-
Add the Syncfusion<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</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:
195224

196225
| Interactivity location | RenderMode | Code |
197226
| --- | --- | --- |
198227
| Per page/component | Auto | @rendermode InteractiveAuto |
199228
| | WebAssembly | @rendermode InteractiveWebAssembly |
200-
| | Server | @rendermode InteractiveServer |
201229
| | None | --- |
202230

203-
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.
204232

205233
{% tabs %}
206234
{% highlight razor %}
@@ -221,7 +249,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
221249
{% endhighlight %}
222250
{% endtabs %}
223251

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<sup style="font-size:70%">&reg;</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<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component in the default web browser.
225253

226254
## Populate Blazor 3D Chart with data
227255

79.4 KB
Loading

0 commit comments

Comments
 (0)