diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 4b3a04fc95..a0aed72907 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -93,19 +93,26 @@ This command creates a new Blazor Web App and places it in a new directory calle N> 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. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). ## Install Syncfusion® Blazor packages +Install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet packages using one of the following methods. -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package in the project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +**Visual Studio (NuGet Package Manager)**: -Alternatively, run the following commands in the Package Manager Console to achieve the same. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Chart3D`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -155,30 +162,37 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor 3D Chart component -Add the Syncfusion® Blazor 3D Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor 3D Chart component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor 3D Chart component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor 3D Chart component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ## Populate Blazor 3D Chart with data diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index b27b9a665e..297d01106c 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -88,16 +88,22 @@ This command creates a new Blazor Web App and places it in a new directory calle N> 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. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). ### Install Syncfusion® Blazor packages +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +**Visual Studio (NuGet Package Manager)**: -Alternatively, run the following commands in the Package Manager Console to achieve the same. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -154,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accordion component -Add the Syncfusion® Blazor Accordion component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Accordion component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -181,7 +181,21 @@ N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Accordion component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %} diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 09f89e92d9..d05fcb61d2 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Charts` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -153,22 +161,17 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accumulation Chart component -Add the Syncfusion® Blazor Accumulation Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Accumulation Chart component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + @@ -201,6 +204,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) @@ -303,7 +316,21 @@ Legend is used for the accumulation chart by setting the [Visible](https://help. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation component in your default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Accumulation Chart component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.webp)" %} diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index f9779e29c6..9f19ed9383 100644 --- a/blazor/appbar/getting-started-with-web-app.md +++ b/blazor/appbar/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AppBar component -Add the Syncfusion® Blazor AppBar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor AppBar component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -190,7 +190,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AppBar component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor AppBar component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %} diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index ec890e6946..f94ad4512c 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -153,22 +161,17 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AutoComplete component -Add the Syncfusion® Blazor AutoComplete component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor AutoComplete component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.DropDowns @@ -195,7 +198,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AutoComplete component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor AutoComplete component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.webp)" %} diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 348502f159..2479969a7e 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -89,18 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -148,7 +157,21 @@ Add the Syncfusion® Blazor Avatar component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Avatar component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %} diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 1d66845ee1..dd316a70bd 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -89,14 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -129,7 +137,21 @@ Add the Syncfusion® Blazor Badge component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Badge component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.webp)" %} diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 70848c91e5..fbd84f2a76 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BarcodeGenerator -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,39 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Barcode component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -{% tabs %} -{% highlight razor %} -@* desired render mode define here *@ -@rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Barcode component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.webp)" %} diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md index 498305954e..d23df7f59f 100644 --- a/blazor/block-editor/getting-started.md +++ b/blazor/block-editor/getting-started.md @@ -91,15 +91,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BlockEditor` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BlockEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Block Editor component -Add the Syncfusion® Blazor Block Editor component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Block Editor component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* Define desired render mode here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Block Editor component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Block Editor component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %} diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 86a53786cc..a0e64c290e 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,28 +158,36 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Breadcrumb component -Add the Syncfusion® Blazor Breadcrumb component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Breadcrumb component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Breadcrumb component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Breadcrumb component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 9999041e50..31676d759d 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -89,14 +89,21 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor BulletChart NuGet in the App -Install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BulletChart`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BulletChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BulletChart -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -150,22 +157,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Bullet Chart component -Add the Syncfusion® Blazor Bullet Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Bullet Chart component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -184,7 +184,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Bullet Chart component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Bullet Chart component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index 7141a10cb0..ba1d376750 100644 --- a/blazor/button-group/getting-started-with-web-app.md +++ b/blazor/button-group/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SplitButtons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SplitButtons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ButtonGroup component -Add the Syncfusion® Blazor ButtonGroup component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor ButtonGroup component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto Left Center @@ -178,7 +179,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ButtonGroup component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Button-Group component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVftihITUHgzQAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup Component](./images/blazor-button-group-component.webp)" %} diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 08f2f834fc..6b145e54d0 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,36 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Button component -Add the Syncfusion® Blazor Button component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Button component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +Button {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -Button +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Button component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Button component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLftsrepgKpagFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component](./images/blazor-button-component.webp)" %} diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index abb6e5079a..f27a9e750c 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Calendars` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Calendar component -Add the Syncfusion® Blazor Calendar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Calendar component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ -@rendermode InteractiveServer +@rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Calendar component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 4e42041699..b534dcd3df 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Cards` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Cards -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Cards -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Card component -Add the Syncfusion® Blazor Card component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Card component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + Sample Card {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - Sample Card +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Card component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ## Add header and content diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md index 3f65497e5f..47f939a4b1 100644 --- a/blazor/carousel/getting-started-with-web-app.md +++ b/blazor/carousel/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Carousel component -Add the Syncfusion® Blazor Carousel component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Carousel component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations
@@ -233,7 +234,22 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Carousel component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Carousel component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %} diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md index 5c1a66e166..1e127d9293 100644 --- a/blazor/chart-wizard/getting-started-with-web-app.md +++ b/blazor/chart-wizard/getting-started-with-web-app.md @@ -92,18 +92,26 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) NuGet packages using one of the following methods. -Alternatively, run the following command in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.ChartWizard`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.ChartWizard -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.ChartWizard -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -153,30 +161,37 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Chart Wizard component -Add the Syncfusion® Blazor Chart Wizard component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chart Wizard component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chart Wizard component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart Wizard component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ![Chart Wizard Default](images/chart-wizard-default.webp) diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 06bf81f6e1..2d8780cf2c 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -91,18 +91,26 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet packages using one of the following methods. -Alternatively, run the following command in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Charts`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. @@ -152,30 +160,38 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Chart component -Add the Syncfusion® Blazor Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chart component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). + N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chart component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 8037f4ee7d..9a91c9ca99 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -94,15 +94,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.InteractiveChat` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.InteractiveChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -158,22 +165,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Chat UI Component -Add the Syncfusion® Blazor Chat UI component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chat UI component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.InteractiveChat
@@ -183,7 +184,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chat UI component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %} diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index cabcdf9c4b..5b5c438103 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor CheckBox component -Add the Syncfusion® Blazor CheckBox component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor CheckBox component inside the razor file. +* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Buttons @@ -181,7 +182,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor CheckBox component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %}