diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 4b3a04fc95..81c4e1728c 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,22 +162,15 @@ 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 %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -180,6 +180,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 3D 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. + ## Populate Blazor 3D Chart with data To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. @@ -187,6 +197,7 @@ To bind data for the 3D chart component, you can assign a IEnumerable object to {% tabs %} {% highlight razor tabtitle="Home.razor" %} + public class SalesInfo { public string Month { get; set; } diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index b27b9a665e..30277cabd7 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" %} - @@ -183,6 +183,16 @@ N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion 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/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accordion/) diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 09f89e92d9..1856ccb20b 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) @@ -212,6 +225,7 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% tabs %} {% highlight razor tabtitle="Home.razor" %} + diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index f9779e29c6..3dc45a5d47 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 @@ -192,6 +192,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 AppBar 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/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AppBar) diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index ec890e6946..cc1ced3708 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. - -{% tabs %} -{% highlight razor %} +* 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`). -@* 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 @@ -197,6 +200,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 AutoComplete 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/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete) diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 348502f159..4a0876004c 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. @@ -150,6 +159,16 @@ Add the Syncfusion® Blazor Avatar component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar 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/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar) \ No newline at end of file diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 1d66845ee1..0d13d5f6ae 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 %} @@ -131,6 +139,16 @@ Add the Syncfusion® Blazor Badge component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge 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/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 70848c91e5..9f44de3392 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,22 +160,19 @@ 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 %} @@ -176,6 +180,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 renders the Syncfusion® Blazor Barcode 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/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Barcode). @@ -187,6 +201,7 @@ Add a QR code in our barcode generator component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md index 498305954e..7ed8708e66 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,19 +160,11 @@ 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 %} - -@* Define desired render mode here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -176,6 +175,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 renders the Syncfusion® Blazor Block Editor 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/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %} ## Configure blocks @@ -185,6 +194,7 @@ The Block Editor uses a block-based content structure where each block represent {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.BlockEditor diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 86a53786cc..1a9879eca4 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,22 +158,16 @@ 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 %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} @@ -174,6 +175,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 Breadcrumb 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/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Breadcrumb). diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 9999041e50..f47754c3eb 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -89,18 +89,26 @@ 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 %} + 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. @@ -150,22 +158,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 @@ -186,6 +187,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 Bullet 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/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart). diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index 7141a10cb0..0de03a9e87 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 @@ -180,6 +181,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 ButtonGroup 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/VjVftihITUHgzQAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup Component](./images/blazor-button-group-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ButtonGroup). diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 08f2f834fc..edccc78df0 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,22 +160,16 @@ 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 %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto Button {% endhighlight %} @@ -176,6 +177,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 Button 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/LjLftsrepgKpagFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component](./images/blazor-button-component.webp)" %} N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows how to render and configure the button. diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index abb6e5079a..cf1cf20f2f 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,22 +160,15 @@ 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 %} - -@* desired render mode define here *@ -@rendermode InteractiveServer - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} @@ -176,6 +176,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 Calendar 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/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 4e42041699..3e9fc84b64 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,31 @@ 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" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in the default web browser. - Sample Card +**Visual Studio Code or .NET CLI**: -{% endhighlight %} -{% endtabs %} +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..9e5b508a1b 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
@@ -235,6 +236,17 @@ 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 Carousel 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/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel). diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md index 5c1a66e166..3589bf4a31 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,22 +161,15 @@ 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 %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -178,6 +179,17 @@ 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 Chart Wizard 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. + + ![Chart Wizard Default](images/chart-wizard-default.webp) ## Populate Blazor Chart Wizard data diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 06bf81f6e1..38afe45096 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,22 +160,16 @@ 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`). - -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 %} +* 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`). -@* 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 @@ -177,6 +179,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 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/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} ## Populate Blazor chart with data diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 8037f4ee7d..4cbd12ff52 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
@@ -185,6 +186,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 Chat UI 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/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %} ## Configure Messages and User diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index cabcdf9c4b..9ab7e2d31e 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/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.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 %} + 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,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 @@ -183,6 +185,17 @@ 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 renders the Syncfusion® Blazor CheckBox 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/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %} N> You can also explore our [Blazor CheckBox example](https://blazor.syncfusion.com/demos/buttons/checkbox) that shows how to render and configure the CheckBox. diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md index d1e413df09..fa000ea351 100644 --- a/blazor/chip/getting-started-with-web-app.md +++ b/blazor/chip/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,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Chip component -Add the Syncfusion® Blazor Chip 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 Chip 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 @@ -180,7 +180,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 Chip 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 DataGrid 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/VXrTNCBaiGVbwHyL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip Component](./images/blazor-chip-component.webp)" %} diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md index ef31ce770a..6d67da5c44 100644 --- a/blazor/circular-gauge/getting-started-with-web-app.md +++ b/blazor/circular-gauge/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.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) 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.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) 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.CircularGauge` 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.CircularGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.CircularGauge -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,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor CircularGauge component -Add the Syncfusion® Blazor CircularGauge 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 CircularGauge 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 @@ -182,7 +183,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 CircularGauge 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 DataGrid 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/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.webp)" %} diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index a36291b241..e98b273d25 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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.Inputs` 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.Inputs -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Inputs -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 ColorPicker component -Add the Syncfusion® Blazor ColorPicker 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 ColorPicker 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 DataGrid 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 ColorPicker 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/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %} diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 137cbdddde..5290f176fc 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/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.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 %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ComboBox component -Add the Syncfusion® Blazor ComboBox 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 ComboBox 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 DataGrid 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 ComboBox 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/rtBpNiBuBWhiNjHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox Component](./images/blazor-combobox-component.webp)" %} diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md index 6f8b852adb..15a49c9fdf 100644 --- a/blazor/context-menu/getting-started-with-web-app.md +++ b/blazor/context-menu/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 ContextMenu component -Add the Syncfusion® Blazor ContextMenu 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 ContextMenu 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
Right click/Touch hold to open the ContextMenu
@@ -195,7 +195,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 ContextMenu 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 DataGrid 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/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %} diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index 91be60f0f1..2fe1504f55 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -85,15 +85,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) 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.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) 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.Layouts` 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.Layouts -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Layouts -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,22 +156,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dashboard Layout component -Add the Syncfusion® Blazor Dashboard Layout 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 Layout 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.Layouts @@ -177,7 +177,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 Dashboard Layout 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 DataGrid 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/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index 81a9620c24..a6b34fe868 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) 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: +**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.DataForm` 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.DataForm -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DataForm -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DataForm component -Add the Syncfusion® Blazor DataForm 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 DataForm 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 %} +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 System.ComponentModel.DataAnnotations 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 DataForm 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 DataGrid 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/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.webp)" %} diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md index 88467ba73d..0d8cb5b377 100644 --- a/blazor/data/getting-started-with-web-app.md +++ b/blazor/data/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.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) 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.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) 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.Data` 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.Data -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Data -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,19 +160,11 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DataManager component -Add the Syncfusion® Blazor DataManager 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 DataManager 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 %} - The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component acts as a data gateway for Syncfusion® Blazor components that support data binding. It enables interaction with local or remote data sources using queries. ### Binding to JSON data @@ -175,6 +174,7 @@ Local [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -213,6 +213,22 @@ Local [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager {% endhighlight %} {% endtabs %} +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid 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. + ### Binding to OData Remote data can be bound by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 008222d3c4..6eedf35b6f 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/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.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) 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.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) 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: +**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.Grid` 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.Grid -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid -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 DataGrid component -Add the Syncfusion® Blazor DataGrid 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 DataGrid 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.Grids @@ -198,7 +198,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid 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 DataGrid 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. ## Defining row data diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 4c2bcf8d1e..d3ed326b52 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -85,15 +85,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 %} @@ -149,30 +156,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker 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 DatePicker 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 +@using Syncfusion.Blazor.Calendars + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.Calendars +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid 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 DatePicker 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/LXVptWruKtEfoXQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DatePicker Component](./images/blazor-datepicker-component.webp)" %}