diff --git a/blazor/3D-chart/getting-started-wasm.md b/blazor/3D-chart/getting-started-wasm.md index 54e917f5b7..70a613db2f 100644 --- a/blazor/3D-chart/getting-started-wasm.md +++ b/blazor/3D-chart/getting-started-wasm.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor 3D Chart Component in Blazor WASM App -This section briefly explains about how to include `Blazor 3D Charts` component in your Blazor WebAssembly (WASM) App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,11 +23,13 @@ This section briefly explains about how to include `Blazor 3D Charts` component ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor 3D Chart NuGet in the App -To add **Blazor 3D Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.Chart3D`. Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor 3D Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -37,7 +39,7 @@ Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -49,9 +51,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -64,7 +66,7 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Chart3D and Themes NuGet in the App +## Install Syncfusion® Blazor Chart3D NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -81,18 +83,62 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Chart3D NuGet in the App + +To add the **Blazor 3D Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D @@ -100,7 +146,9 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -124,9 +172,7 @@ await builder.Build().RunAsync(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `` of the main page as follows: - -* For Blazor WebAssembly app, include it in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `` of the **~/index.html** file. ```html @@ -134,7 +180,8 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor ``` -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor 3D Chart Component @@ -150,7 +197,7 @@ Add the Syncfusion® Blazor 3D Chart compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor 3D Chart component in your default web browser. +* 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. ## Populate Blazor 3D Chart with data diff --git a/blazor/3D-chart/images/blazor-wasm-app-template.png b/blazor/3D-chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/3D-chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md index a8d65b9f06..25c58f2d80 100644 --- a/blazor/accordion/getting-started.md +++ b/blazor/accordion/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor Accordion Component -This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor Accordion, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accordion) sample: - -{% youtube -"youtube:https://www.youtube.com/watch?v=c5TX84Fc9SE"%} +This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with Blazor Accordion, check on the following video or [G ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor Accordion** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Accordion** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the **Blazor Accordion** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +182,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Accordion component @@ -158,7 +203,7 @@ Add the Syncfusion® Blazor Accordion compon {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion component in your default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %} diff --git a/blazor/accordion/images/blazor-wasm-app-template.png b/blazor/accordion/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/accordion/images/blazor-wasm-app-template.png differ diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index d852c55791..076a0e139e 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -11,12 +11,7 @@ documentation: ug # Getting Started with Blazor Accumulation Chart Component -This section briefly explains about how to include [Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor Accumulation Chart component, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=ol8c_iH7ebk" %} +This section briefly explains about how to include [Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -28,11 +23,13 @@ To get started quickly with Blazor Accumulation Chart component, check on the fo ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Charts and Themes NuGet in the App -To add **Blazor Accumulation Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Accumulation Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -55,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Charts and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -88,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Charts and Themes NuGet in the App + +To add the **Blazor Accumulation Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -107,7 +149,9 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script reference within the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -140,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Accumulation Chart component @@ -179,7 +224,7 @@ Add the Syncfusion® Blazor Accumulation Cha {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in your default web browser. +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. {% 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.png)" %} diff --git a/blazor/accumulation-chart/images/blazor-wasm-app-template.png b/blazor/accumulation-chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/appbar/getting-started.md b/blazor/appbar/getting-started.md index e5a0bec38d..47e8516e35 100644 --- a/blazor/appbar/getting-started.md +++ b/blazor/appbar/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor AppBar Component -This section briefly explains about how to include Blazor AppBar component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor AppBar, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=JuMgm3XfGRc"%} +This section briefly explains about how to include [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,12 +21,13 @@ To get started quickly with Blazor AppBar, check on the following video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor AppBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor AppBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -87,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the **Blazor AppBar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @@ -106,7 +147,9 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -139,13 +182,15 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor AppBar component Add the Syncfusion® Blazor AppBar component in the **~/Pages/Index.razor** file. -```cshtml +{% tabs %} +{% highlight razor %} + @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -163,6 +208,10 @@ Add the Syncfusion® Blazor AppBar component margin: 0 3px; } -``` + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AppBar component in the default web browser. {% 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)" %} \ No newline at end of file diff --git a/blazor/appbar/images/blazor-wasm-app-template.png b/blazor/appbar/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/appbar/images/blazor-wasm-app-template.png differ diff --git a/blazor/autocomplete/getting-started.md b/blazor/autocomplete/getting-started.md index 03dba139de..7932edd123 100644 --- a/blazor/autocomplete/getting-started.md +++ b/blazor/autocomplete/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor AutoComplete Component -This section explains how to include the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. - -To get started quickly with the Blazor AutoComplete component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete). - -{% youtube -"youtube:https://www.youtube.com/watch?v=DbVs6UPjQ-U"%} +This section explains how to include the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with the Blazor AutoComplete component, watch the followi ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add the **Blazor AutoComplete** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: +To add the **Blazor AutoComplete** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,7 +69,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure in the project root directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are restored. +* Run the following commands to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App + +To add the **Blazor AutoComplete** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns @@ -105,7 +147,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight c# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +182,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Syncfusion® Blazor Autocomplete component diff --git a/blazor/autocomplete/images/blazor-wasm-app-template.png b/blazor/autocomplete/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/autocomplete/images/blazor-wasm-app-template.png differ diff --git a/blazor/avatar/getting-started.md b/blazor/avatar/getting-started.md index 979a13041a..302e65ccf5 100644 --- a/blazor/avatar/getting-started.md +++ b/blazor/avatar/getting-started.md @@ -11,12 +11,7 @@ documentation: ug # Getting Started with Blazor Avatar Component -This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get start quickly with Avatar component using Blazor, you can check on this video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=IYZEZUQd6JE"%} +This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -28,11 +23,13 @@ To get start quickly with Avatar component using Blazor, you can check on this v ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +39,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +51,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,7 +69,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure in the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -86,7 +83,51 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Themes NuGet in the App + +To add the **Blazor Avatar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -102,7 +143,7 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. ## Add Blazor Avatar component @@ -135,6 +176,6 @@ Add the Syncfusion® Blazor Avatar component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %} diff --git a/blazor/avatar/images/blazor-wasm-app-template.png b/blazor/avatar/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/avatar/images/blazor-wasm-app-template.png differ diff --git a/blazor/badge/getting-started.md b/blazor/badge/getting-started.md index 899c08a018..7643428e58 100644 --- a/blazor/badge/getting-started.md +++ b/blazor/badge/getting-started.md @@ -11,11 +11,7 @@ documentation: ug # Getting Started with Blazor Badge Component -This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get start quickly with Blazor Badge, you can check on this video: - -{% youtube "https://www.youtube.com/watch?v=CNkXfjZDGUQ" %} +This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -27,11 +23,13 @@ To get start quickly with Blazor Badge, you can check on this video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +39,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +51,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,7 +69,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure in the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -85,7 +83,51 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Themes NuGet in the App + +To add the **Blazor Badge** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -101,7 +143,7 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. ## Add Blazor Badge component @@ -115,7 +157,7 @@ Add the Syncfusion® Blazor Badge component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in the 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.png)" %} diff --git a/blazor/badge/images/blazor-wasm-app-template.png b/blazor/badge/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/badge/images/blazor-wasm-app-template.png differ diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index df3c5937f4..78502a079d 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -9,9 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component -This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using Visual Studio or Visual Studio Code. - -{% youtube "youtube:https://www.youtube.com/watch?v=CuApVvYbQtI" %} +This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,11 +21,13 @@ This section explains how to include [Blazor Barcode](https://www.syncfusion.com ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: +To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -68,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is opened at the project root directory where the .csproj file is located. -* Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -83,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App + +To add the **Blazor Barcode** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.BarcodeGenerator -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.BarcodeGenerator @@ -102,7 +147,9 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -126,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -135,7 +182,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Barcode component diff --git a/blazor/barcode/images/blazor-wasm-app-template.png b/blazor/barcode/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/barcode/images/blazor-wasm-app-template.png differ diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md index f1bec6bacf..b2f870f94f 100644 --- a/blazor/breadcrumb/getting-started.md +++ b/blazor/breadcrumb/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor Breadcrumb Component -This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor Breadcrumb component, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=yWqATPayFS0" %} +This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with Blazor Breadcrumb component, check on the following ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the **Blazor Breadcrumb** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} -{% highlight razor tabtitle="~/Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +182,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Syncfusion® Blazor Breadcrumb component @@ -153,7 +197,7 @@ Add the Syncfusion® Blazor Breadcrumb compo {% endhighlight %} {% endtabs %} -* Press F5 to run the application. Then, the Syncfusion® Blazor Breadcrumb component will be rendered in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Breadcrumb component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png)" %} diff --git a/blazor/breadcrumb/images/blazor-wasm-app-template.png b/blazor/breadcrumb/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/breadcrumb/images/blazor-wasm-app-template.png differ diff --git a/blazor/bullet-chart/getting-started.md b/blazor/bullet-chart/getting-started.md index 377bfa72b6..1f352c3555 100644 --- a/blazor/bullet-chart/getting-started.md +++ b/blazor/bullet-chart/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor Bullet Chart Component -This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Bullet Chart Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart) sample: - -{% youtube -"youtube:https://www.youtube.com/watch?v=rWXSysqy5YE"%} +To get start quickly with Blazor Bullet Chart component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get start quickly with Bullet Chart Component using Blazor, you can check on ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Bullet Chart NuGet in the App -To add **Blazor Bullet Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Bullet Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +39,7 @@ Install-Package Syncfusion.Blazor.BulletChart -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -52,9 +51,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -67,11 +66,11 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor BulletChart and Themes NuGet in the App +## Install Syncfusion® Blazor BulletChart NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -84,18 +83,62 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor BulletChart NuGet in the App + +To add the **Blazor Bullet Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.BulletChart -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -103,7 +146,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -135,7 +180,7 @@ The script can be accessed through [Static Web Assets](https://blazor.syncfusion ``` -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Bullet Chart component @@ -162,7 +207,7 @@ Add the Syncfusion® Blazor Bullet Chart com {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Bullet Chart component in your default web browser. +* 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. {% 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.png)" %} diff --git a/blazor/bullet-chart/images/blazor-wasm-app-template.png b/blazor/bullet-chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/bullet-chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/button-group/getting-started.md b/blazor/button-group/getting-started.md index 1f9dd0f78e..1c21f0a0d2 100644 --- a/blazor/button-group/getting-started.md +++ b/blazor/button-group/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor ButtonGroup Component -This section briefly explains about how to include [Blazor ButtonGroup](https://www.syncfusion.com/blazor-components/blazor-button-group) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor ButtonGroup](https://www.syncfusion.com/blazor-components/blazor-button-group) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,11 +23,13 @@ This section briefly explains about how to include [Blazor ButtonGroup](https:// ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -To add **Blazor ButtonGroup** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ButtonGroup** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -68,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -83,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App + +To add the **Blazor ButtonGroup** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons @@ -102,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -126,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -135,7 +184,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor ButtonGroup component @@ -153,7 +202,7 @@ Add the Syncfusion® Blazor ButtonGroup comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ButtonGroup component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ButtonGroup component in the 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.png)" %} diff --git a/blazor/button-group/images/blazor-wasm-app-template.png b/blazor/button-group/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/button-group/images/blazor-wasm-app-template.png differ diff --git a/blazor/button/getting-started.md b/blazor/button/getting-started.md index c248d45e52..096279da7d 100644 --- a/blazor/button/getting-started.md +++ b/blazor/button/getting-started.md @@ -11,12 +11,9 @@ documentation: ug # Getting Started with Blazor Button Component -This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button) sample: - -{% youtube -"youtube:https://www.youtube.com/watch?v=qkHqP_CymrI"%} +To get start quickly with Blazor Button component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button) sample. {% tabcontents %} @@ -28,11 +25,13 @@ To get start quickly with Button Component using Blazor, you can check on this v ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -55,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,8 +72,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -88,18 +87,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +To add the **Blazor Button** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons @@ -107,7 +151,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +177,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -140,7 +186,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Button component @@ -154,7 +200,7 @@ Add the Syncfusion® Blazor Button component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Button component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Button component in the 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.png)" %} diff --git a/blazor/button/images/blazor-wasm-app-template.png b/blazor/button/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/button/images/blazor-wasm-app-template.png differ diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md index 42dcc530b8..5e4870e6c5 100644 --- a/blazor/calendar/getting-started.md +++ b/blazor/calendar/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor Calendar Component -This guide shows how to add the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. It targets modern .NET and Blazor WebAssembly tooling. +This guide shows how to add the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor Calendar component, refer to the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). - -{% youtube -"youtube:https://www.youtube.com/watch?v=PbmIW_tWzVo"%} +To get started quickly with the Blazor Calendar component, refer to the following [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Blazor Calendar component, refer to the followin ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add the **Blazor Calendar** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following Package Manager commands: +To add the **Blazor Calendar** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components 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 a list of available packages. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`): +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App - Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project root directory where the `.csproj` file is located. -- Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies: +- Ensure in the project root directory where the `.csproj` file is located. +- Run the following commands to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components 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 a list of available packages. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App + +To add the **Blazor Calendar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars @@ -105,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in **~/Program.cs** for your Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,11 +184,11 @@ The theme stylesheet and script are provided via NuGet [Static Web Assets](https ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Calendar component -Add the Syncfusion® Blazor Calendar component to **~/Pages/Index.razor**: +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -152,7 +198,7 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Calendar component renders in your default web browser. +- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Calendar component renders in the 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.png)" %} diff --git a/blazor/calendar/images/blazor-wasm-app-template.png b/blazor/calendar/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/calendar/images/blazor-wasm-app-template.png differ diff --git a/blazor/card/getting-started.md b/blazor/card/getting-started.md index bc702502ca..fcbee7ec3c 100644 --- a/blazor/card/getting-started.md +++ b/blazor/card/getting-started.md @@ -11,11 +11,9 @@ documentation: ug # Getting Started with Blazor Card Component -This section briefly explains about how to include [Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor Card component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card) sample. -{% youtube -"youtube:https://www.youtube.com/watch?v=k8KSZIf5VPs"%} +To get start quickly with Blazor Card component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card) sample. {% tabcontents %} @@ -27,11 +25,13 @@ To get start quickly with Blazor Card component, you can check on this video or ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Cards and Themes NuGet in the App -To add **Blazor Card** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Card** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,8 +72,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Cards and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following commands to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -87,18 +87,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Cards and Themes NuGet in the App + +To add the **Blazor Card** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Cards -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespaces. {% tabs %} -{% highlight cshtml tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Cards @@ -106,7 +151,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -130,7 +177,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -139,21 +186,21 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Card component Add the Syncfusion® Blazor Card component in the **~/Pages/Index.razor** file. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} Sample Card {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDhJZiryJJlCWAIq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -162,7 +209,7 @@ Add the Syncfusion® Blazor Card component i You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardHeader.html) tag and add [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardHeader.html#Syncfusion_Blazor_Cards_CardHeader_Title) and [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardHeader.html#Syncfusion_Blazor_Cards_CardHeader_SubTitle) in that tag. You can also add the content by using [CardContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardContent.html) tag. {% tabs %} -{% highlight cshtml %} +{% highlight razor %}
@@ -180,4 +227,4 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} -N> You can also explore our [Blazor Card example](https://blazor.syncfusion.com/demos/card/basic-card?theme=fluent) that shows you how to render and configure the Card. +N> You can also explore our [Blazor Card example](https://blazor.syncfusion.com/demos/card/basic-card) that shows you how to render and configure the Card. diff --git a/blazor/card/images/blazor-wasm-app-template.png b/blazor/card/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/card/images/blazor-wasm-app-template.png differ diff --git a/blazor/carousel/getting-started.md b/blazor/carousel/getting-started.md index 5a4bb1382c..90961984c2 100644 --- a/blazor/carousel/getting-started.md +++ b/blazor/carousel/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor Carousel Component -This section briefly explains about how to include [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get start quickly with Blazor Carousel component, you can check on this video. - -{% youtube -"youtube:https://www.youtube.com/watch?v=v_lVXs-3yRw" %} +This section briefly explains about how to include [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get start quickly with Blazor Carousel component, you can check on this video ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor Carousel** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Carousel** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the **Blazor Carousel** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,13 +182,15 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Carousel component Add the Syncfusion® Blazor Carousel component in the **~/Pages/Index.razor** file. -```cshtml +{% tabs %} +{% highlight razor %} + @using Syncfusion.Blazor.Navigations
@@ -205,7 +251,12 @@ Add the Syncfusion® Blazor Carousel compone width: 100%; } -``` -{% 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)" %} + +{% endhighlight %} +{% endtabs %} + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Carousel component in the default web browser. + +{% 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/carousel/images/blazor-wasm-app-template.png b/blazor/carousel/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/carousel/images/blazor-wasm-app-template.png differ diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index dba1d34185..9db650c3ce 100644 --- a/blazor/chart/getting-started-wasm.md +++ b/blazor/chart/getting-started-wasm.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor Chart Component in Blazor WASM App -This section briefly explains about how to include [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor WebAssembly (WASM) App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains about how to include [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor WebAssembly (WASM) App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -25,11 +25,13 @@ This section briefly explains about how to include [Blazor Charts](https://www.s ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Charts NuGet in the App -To add **Blazor Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -39,7 +41,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -51,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -69,7 +71,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Charts and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure in the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -83,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -91,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,7 +105,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,8 +116,6 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. - ## Install Syncfusion® Blazor Chart NuGet in the App Here's an example of how to add **Blazor Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. @@ -129,7 +129,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -137,7 +137,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -150,7 +150,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -174,9 +174,7 @@ await builder.Build().RunAsync(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `` of the main page as follows: - -* For Blazor WebAssembly app, include it in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference within the `` section of the **~/index.html** file. ```html @@ -187,7 +185,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor ``` -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Blazor Chart Component @@ -203,7 +201,7 @@ Add the Syncfusion® Blazor Chart component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the 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.png)" %} diff --git a/blazor/chart/images/blazor-wasm-app-template.png b/blazor/chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/chat-ui/getting-started.md b/blazor/chat-ui/getting-started.md index f361a2c326..37e1318af8 100644 --- a/blazor/chat-ui/getting-started.md +++ b/blazor/chat-ui/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Chat UI Component -This section explains how to add the [Blazor Chat UI](https://www.syncfusion.com/blazor-components/blazor-chat-ui) component to a Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Chat UI](https://www.syncfusion.com/blazor-components/blazor-chat-ui) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,11 +21,13 @@ This section explains how to add the [Blazor Chat UI](https://www.syncfusion.com ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App -To add the **Blazor Chat UI** component to the application, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the required packages can be installed using the Package Manager Console command. +To add the **Blazor Chat UI** component to the application, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -48,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -67,7 +69,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current working directory is set to the project root where the `.csproj` file is located. -* Run the following command to 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. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -81,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App + +To add the **Blazor Chat UI** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.InteractiveChat @@ -100,7 +147,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -124,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -133,11 +182,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Syncfusion® Blazor Chat UI component -Add the Syncfusion® Blazor Chat UI component to the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Chat UI component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,9 +199,7 @@ Add the Syncfusion® Blazor Chat UI componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. +* 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. {% 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.png)" %} diff --git a/blazor/chat-ui/images/blazor-wasm-app-template.png b/blazor/chat-ui/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/chat-ui/images/blazor-wasm-app-template.png differ diff --git a/blazor/check-box/getting-started.md b/blazor/check-box/getting-started.md index 032e9ba714..e36de65898 100644 --- a/blazor/check-box/getting-started.md +++ b/blazor/check-box/getting-started.md @@ -11,12 +11,9 @@ documentation: ug # Getting Started with Blazor CheckBox Component -This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the CheckBox Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=a6HR1QGAvLo"%} +To get started quickly with the CheckBox Component using Blazor, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox) sample. {% tabcontents %} @@ -28,11 +25,13 @@ To get started quickly with the CheckBox Component using Blazor, you can check o ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor CheckBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor CheckBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -55,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,8 +72,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -88,18 +87,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +To add the **Blazor CheckBox** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons @@ -107,7 +151,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +177,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -140,7 +186,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor CheckBox component @@ -159,7 +205,7 @@ Add the Syncfusion® Blazor CheckBox compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CheckBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CheckBox component in the 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.png)" %} diff --git a/blazor/check-box/images/blazor-wasm-app-template.png b/blazor/check-box/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/check-box/images/blazor-wasm-app-template.png differ diff --git a/blazor/chip/getting-started.md b/blazor/chip/getting-started.md index b71d238a13..ad9109c3ce 100644 --- a/blazor/chip/getting-started.md +++ b/blazor/chip/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor Chip Component -This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor Chip component, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=YJtHD8jPwW0" %} +This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with Blazor Chip component, check on the following video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +To add the **Blazor Chip** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +182,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Chip component @@ -158,7 +202,7 @@ Add the Syncfusion® Blazor Chip component i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chip component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chip component in the 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.png)" %} diff --git a/blazor/chip/images/blazor-wasm-app-template.png b/blazor/chip/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/chip/images/blazor-wasm-app-template.png differ diff --git a/blazor/circular-gauge/getting-started.md b/blazor/circular-gauge/getting-started.md index fe2f948b27..ba6bf2aab4 100644 --- a/blazor/circular-gauge/getting-started.md +++ b/blazor/circular-gauge/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor CircularGauge Component -This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor CircularGauge component, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=sAhXjDOTEjc"%} +This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with Blazor CircularGauge component, check on the followi ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor CircularGauge and Themes NuGet in the App -To add **Blazor CircularGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor CircularGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor CircularGauge and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor CircularGauge and Themes NuGet in the App + +To add the **Blazor CircularGauge** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.CircularGauge @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +182,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor CircularGauge component @@ -160,7 +204,7 @@ Add the Syncfusion® Blazor CircularGauge co {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CircularGauge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CircularGauge component in the 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.png)" %} diff --git a/blazor/circular-gauge/images/blazor-wasm-app-template.png b/blazor/circular-gauge/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/circular-gauge/images/blazor-wasm-app-template.png differ diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md index ead1c246e2..0bbd6bfa36 100644 --- a/blazor/color-picker/getting-started.md +++ b/blazor/color-picker/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor ColorPicker Component -This section explains how to add the [Blazor Color Picker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Color Picker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Color Picker in Blazor, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker): - -{% youtube -"youtube:https://www.youtube.com/watch?v=lI_5h-ZUSHw"%} +To get started quickly with the Blazor Color Picker component, refer to this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker). {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Color Picker in Blazor, watch the following vide ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the **Blazor Color Picker** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands. +To add the **Blazor Color Picker** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly app using the following commands in the integrated terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,9 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is in the project root directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following commands to 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 and ensure all dependencies are installed. + {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -85,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +To add the **Blazor Color Picker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs @@ -104,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -128,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -137,6 +184,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` + N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application. ## Add Blazor ColorPicker component diff --git a/blazor/color-picker/images/blazor-wasm-app-template.png b/blazor/color-picker/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/color-picker/images/blazor-wasm-app-template.png differ diff --git a/blazor/combobox/getting-started.md b/blazor/combobox/getting-started.md index 916470485e..fcae3bc4fe 100644 --- a/blazor/combobox/getting-started.md +++ b/blazor/combobox/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor ComboBox Component -This section explains how to include the [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor ComboBox component, review the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox). - -{% youtube -"youtube:https://www.youtube.com/watch?v=VYK2xHC_Lrg"%} +To get started quickly with the Blazor ComboBox component, refer to this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox). {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Blazor ComboBox component, review the following ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add the **Blazor ComboBox** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. +To add the **Blazor ComboBox** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App - Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project root directory where the `.csproj` file is located. -- Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. +- Ensure in the project root directory where the `.csproj` file is located. +- Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App + +To add the **Blazor ComboBox** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns @@ -105,7 +149,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of **~/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,11 +184,12 @@ The theme stylesheet and script are provided via NuGet using [Static Web Assets] ``` -N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for ways to add script references in a Blazor application. + +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application. ## Add Blazor ComboBox component -Add the Syncfusion Blazor ComboBox component in **~/Pages/Index.razor**. +Add the Syncfusion® Blazor ComboBox component to the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -152,7 +199,7 @@ Add the Syncfusion Blazor ComboBox component in **~/Pages/Index.razor**. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ComboBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ComboBox component in the 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.png)" %} diff --git a/blazor/combobox/images/blazor-wasm-app-template.png b/blazor/combobox/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/combobox/images/blazor-wasm-app-template.png differ diff --git a/blazor/context-menu/getting-started.md b/blazor/context-menu/getting-started.md index adc995d6a8..ee0dfa7f5e 100644 --- a/blazor/context-menu/getting-started.md +++ b/blazor/context-menu/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor ContextMenu Component -This section briefly explains about how to include [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with ContextMenu Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ContextMenu) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=0-II6YezL1s"%} +To get started quickly with the Blazor ContextMenu component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ContextMenu) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with ContextMenu Component using Blazor, you can check ou ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor ContextMenu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ContextMenu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the **Blazor ContextMenu** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations @@ -105,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor ContextMenu component @@ -171,7 +218,7 @@ Add the Syncfusion® Blazor ContextMenu comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ContextMenu component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ContextMenu component in the 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/context-menu/images/blazor-wasm-app-template.png b/blazor/context-menu/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/context-menu/images/blazor-wasm-app-template.png differ diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index a9c73d3be4..25caa75ab9 100644 --- a/blazor/dashboard-layout/getting-started.md +++ b/blazor/dashboard-layout/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Start with Blazor Dashboard Layout in WebAssembly App -This section explains how to integrate the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor Dashboard Layout component, watch the following video or refer to the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample: - -{% youtube -"youtube:https://www.youtube.com/watch?v=K6i0KU7tbLQ" %} +To get started quickly with the Blazor Dashboard Layout component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Blazor Dashboard Layout component, watch the fol ## Create a New Blazor WebAssembly App in Visual Studio -Create a **Blazor WebAssembly App** project using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App -To add **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package +To add the **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a New Blazor WebAssembly App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Layouts and Themes NuGet in the App + +To add the **Blazor Dashboard Layout** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Layouts @@ -105,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,20 +175,17 @@ await builder.Build().RunAsync(); ## Add Stylesheet and Script Resources -Reference the theme stylesheet within the `` section and the script reference at the end of the `` in the **~/index.html** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html .... - -.... - - .... ``` -N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Dashboard Layout Component @@ -165,7 +208,7 @@ Add the Syncfusion® Blazor Dashboard Layout N> There is no need to assign default value for panels. Refer to the [Panels](./panels/position-sizing-of-panels#panels) section to learn about default value. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dashboard Layout component in your default web browser. +* 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. {% 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/dashboard-layout/images/blazor-wasm-app-template.png b/blazor/dashboard-layout/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-wasm-app-template.png differ diff --git a/blazor/data-form/getting-started.md b/blazor/data-form/getting-started.md index 17999a9e73..042d574674 100644 --- a/blazor/data-form/getting-started.md +++ b/blazor/data-form/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataForm Component -This section explains how to add the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,11 +21,13 @@ This section explains how to add the [Blazor DataForm](https://www.syncfusion.co ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor DataForm and Themes NuGet in the App -To add the **Blazor DataForm** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following Package Manager commands to achieve the same. +To add the **Blazor DataForm** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -48,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -66,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor DataForm and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure in the project root directory where the `.csproj` file is located. * Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -81,17 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor DataForm and Themes NuGet in the App + +To add the **Blazor DataForm** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.DataForm -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DataForm @@ -99,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -123,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -132,7 +182,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor DataForm component @@ -185,6 +236,8 @@ Add the Syncfusion® Blazor DataForm compone {% 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. + {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/images/blazor-wasm-app-template.png b/blazor/data-form/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/data-form/images/blazor-wasm-app-template.png differ diff --git a/blazor/data/getting-started.md b/blazor/data/getting-started.md index 2fe5a42ce5..fba4e1d80a 100644 --- a/blazor/data/getting-started.md +++ b/blazor/data/getting-started.md @@ -11,7 +11,7 @@ documentation: ug The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component provides a robust data access layer for Blazor applications. It enables seamless interaction with both **local** and **remote** data sources and supports essential operations such as **querying**, **sorting**, **filtering**, and **CRUD** actions. The component is designed to work in conjunction with Syncfusion® data-bound controls, ensuring efficient data management across the application. -This guide explains how to configure and use the `DataManager` component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This guide explains how to configure and use the `DataManager` component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -114,14 +114,59 @@ N> Syncfusion® Blazor components are availa {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Data and Themes NuGet in the App + +To add the **Blazor DataManager** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Data -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -2. Register the Syncfusion® Blazor service in the **~/Program.cs** file: +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @@ -129,7 +174,9 @@ N> Syncfusion® Blazor components are availa {% endhighlight %} {% endtabs %} -2. Register the Syncfusion® Blazor service in the **~/Program.cs** file: +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file: {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} diff --git a/blazor/data/images/blazor-wasm-app-template.png b/blazor/data/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/data/images/blazor-wasm-app-template.png differ diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index 4d8e9fac78..e89b588f2f 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataGrid in WASM App -This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor webAssembly app using Visual Studio, Visual Studio code and .NET CLI. +This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a Blazor webAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > Ready to streamline your Syncfusion® Blazor development? Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -33,6 +33,8 @@ A **Blazor WebAssembly App** can be created using **Visual Studio 2022** with th 5. Select the **target framework** as **.NET 8.0 or later** (choose the latest installed version available on the system). 6. Click **Create** to generate the project. +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) + N> For detailed steps, refer to [Microsoft Blazor tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). ## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio @@ -120,7 +122,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} diff --git a/blazor/datagrid/images/blazor-wasm-app-template.png b/blazor/datagrid/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/datagrid/images/blazor-wasm-app-template.png differ diff --git a/blazor/datepicker/getting-started.md b/blazor/datepicker/getting-started.md index fd4a6deeb7..9a98d84b2b 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor DatePicker Component -This section briefly explains about how to include [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor DatePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DatePicker) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=ZN0zSIU59nY"%} +To get start quickly with Blazor DatePicker component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DatePicker) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get start quickly with Blazor DatePicker component, you can check on this vid ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor DatePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DatePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App + +To add the **Blazor Date Picker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars @@ -105,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor DatePicker component @@ -152,7 +199,7 @@ Add the Syncfusion® Blazor DatePicker compo {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in the 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.png)" %} diff --git a/blazor/datepicker/images/blazor-wasm-app-template.png b/blazor/datepicker/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/datepicker/images/blazor-wasm-app-template.png differ diff --git a/blazor/daterangepicker/getting-started.md b/blazor/daterangepicker/getting-started.md index f2cbff9f2a..5228d31a16 100644 --- a/blazor/daterangepicker/getting-started.md +++ b/blazor/daterangepicker/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor DateRangePicker Component -This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor DateRangePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateRangePicker) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=1xB_h1Zixl0"%} +To get start quickly with Blazor DateRangePicker component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateRangePicker) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get start quickly with Blazor DateRangePicker component, you can check on thi ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App + +To add the **Blazor DateRangePicker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars @@ -105,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor DateRangePicker component @@ -152,7 +199,7 @@ Add the Syncfusion® Blazor DateRangePicker {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.png)" %} diff --git a/blazor/daterangepicker/images/blazor-wasm-app-template.png b/blazor/daterangepicker/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/daterangepicker/images/blazor-wasm-app-template.png differ diff --git a/blazor/datetime-picker/getting-started.md b/blazor/datetime-picker/getting-started.md index 04adf78d7a..d1a9f21ce9 100644 --- a/blazor/datetime-picker/getting-started.md +++ b/blazor/datetime-picker/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component -This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor DateTimePicker component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker). - -{% youtube -"youtube:https://www.youtube.com/watch?v=BzcHdhd4o8I"%} +To get started quickly with the Blazor DateTimePicker component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Blazor DateTimePicker component, watch the follo ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add the **Blazor DateTimePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: +To add the **Blazor DateTimePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for, and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -86,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App + +To add the **Blazor DateTimePicker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars @@ -105,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,6 +184,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` + N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. @@ -153,7 +200,7 @@ Add the Syncfusion® Blazor DateTimePicker c {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %} diff --git a/blazor/datetime-picker/images/blazor-wasm-app-template.png b/blazor/datetime-picker/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/datetime-picker/images/blazor-wasm-app-template.png differ diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index 103d91cd62..5000fbb8b7 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Diagram Component in the Blazor WASM App -This section explains the step-by-step process for integrating the Syncfusion® Blazor Diagram component into a Blazor WebAssembly (WASM) app using Visual Studio, Visual Studio Code and .NET CLI. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). +This section explains the step-by-step process for integrating the Syncfusion® Blazor Diagram component into a Blazor WebAssembly (WASM) app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -23,11 +23,13 @@ This section explains the step-by-step process for integrating the Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in a Blazor WebAssembly App -To add the **Blazor Diagram** component to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following package manager command to achieve the same. +To add the **Blazor Diagram** component to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -55,7 +57,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Step 4: How to Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the program.cs file. +Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -78,7 +80,7 @@ await builder.Build().RunAsync(); ## Step 5: How to Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the section of the **wwwroot/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -114,9 +116,9 @@ Add the Syncfusion® Blazor Diagram componen ## Step 1: How to Create a New Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, Create a WebAssembly application using the following commands in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -133,7 +135,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory is the project root directory where the `.csproj` file is located. -* Run the following command to install the [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following command to install the [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -147,7 +149,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -164,7 +166,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Step 4: How to Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the program.cs file. +Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -187,7 +189,7 @@ await builder.Build().RunAsync(); ## Step 5: How to Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -197,7 +199,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Step 6: How to Add the Blazor Diagram component @@ -219,7 +221,7 @@ Add the Syncfusion® Blazor Diagram componen ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -231,7 +233,7 @@ dotnet --version ## Step 1: Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -242,11 +244,9 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. - ## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App -Here's an example of how to add **Blazor Diagram** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add **Blazor Diagram** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -258,7 +258,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -275,7 +275,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Step 4: How to Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the program.cs file. +Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -298,7 +298,7 @@ await builder.Build().RunAsync(); ## Step 5: How to Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **wwwroot/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html diff --git a/blazor/diagram/images/blazor-wasm-app-template.png b/blazor/diagram/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/diagram/images/blazor-wasm-app-template.png differ diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md index e1883de636..786109067a 100644 --- a/blazor/dialog/getting-started.md +++ b/blazor/dialog/getting-started.md @@ -9,11 +9,9 @@ documentation: ug # Getting Started with Blazor Dialog Component -This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor Dialog component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog) sample. -{% youtube -"youtube:https://www.youtube.com/watch?v=uSyGKuB8ghg"%} +To get start quickly with Blazor Dialog component, refer this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog) sample. {% tabcontents %} @@ -25,11 +23,13 @@ To get start quickly with Blazor Dialog component, you can check on this video o ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add **Blazor Dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -70,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Popups and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -85,18 +85,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App + +To add the **Blazor Dialog** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Popups @@ -104,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -128,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -137,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Dialog component @@ -155,7 +203,7 @@ Add the Syncfusion® Blazor Dialog component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} diff --git a/blazor/dialog/images/blazor-wasm-app-template.png b/blazor/dialog/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/dialog/images/blazor-wasm-app-template.png differ diff --git a/blazor/drop-down-menu/getting-started.md b/blazor/drop-down-menu/getting-started.md index 2d39b44144..307419d8ba 100644 --- a/blazor/drop-down-menu/getting-started.md +++ b/blazor/drop-down-menu/getting-started.md @@ -11,12 +11,9 @@ documentation: ug # Getting started with Blazor Dropdown Menu component -This guide explains how to integrate the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component into a Blazor WebAssembly app using Visual Studio or Visual Studio Code. +This guide explains how to integrate the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component into a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -Watch the [Dropdown Menu getting started video tutorial](https://www.youtube.com/watch?v=LKszhsAVuHc) or explore the [GitHub sample project](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) to see the completed application. - -{% youtube -"youtube:https://www.youtube.com/watch?v=LKszhsAVuHc"%} +Explore the [GitHub sample project](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) to see the completed application. {% tabcontents %} @@ -28,11 +25,13 @@ Watch the [Dropdown Menu getting started video tutorial](https://www.youtube.com ## Create a new Blazor app in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor SplitButtons and Themes NuGet packages -To add the **Blazor Dropdown Menu** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, install them with the Package Manager console: +To add the **Blazor Dropdown Menu** component, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -55,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor app in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly app from the terminal (Ctrl+`) using the following commands: +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,8 +72,8 @@ cd BlazorApp ## Install Syncfusion® Blazor SplitButtons and Themes NuGet packages * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure in the project root directory that contains the `.csproj` file. -* Run the following commands to 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/) packages and restore dependencies. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -88,18 +87,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App + +To add the **Blazor Dropdown Menu** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons @@ -107,7 +151,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Next, register the Syncfusion® Blazor service in **~/Program.cs**. +## Register Syncfusion® Blazor service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +177,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `` section of **~/wwwroot/index.html**: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -140,11 +186,12 @@ The theme stylesheet and script are provided via [Static Web Assets](https://bla ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Dropdown Menu component -Add the Syncfusion® Blazor Dropdown Menu component to **~/Pages/Index.razor**. +Add the Syncfusion® Blazor Dropdown Menu component to **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} diff --git a/blazor/drop-down-menu/images/blazor-wasm-app-template.png b/blazor/drop-down-menu/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/drop-down-menu/images/blazor-wasm-app-template.png differ diff --git a/blazor/dropdown-list/getting-started.md b/blazor/dropdown-list/getting-started.md index 77262107b7..cc5df10799 100644 --- a/blazor/dropdown-list/getting-started.md +++ b/blazor/dropdown-list/getting-started.md @@ -13,9 +13,9 @@ documentation: ug The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) is a dynamic replacement for the HTML select element. It presents a rich UI to select a single, non-editable value from a predefined list. Features include data binding, filtering, grouping, UI customization, accessibility, and preselected values. -This guide explains how to add the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component to a Blazor WebAssembly app using Visual Studio, Visual Studio Code, and the .NET CLI. Ensure a valid Syncfusion license is registered in the application and choose a theme (Bootstrap, Fluent, Material, or Tailwind) as part of setup. +This guide explains how to add the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). Ensure a valid Syncfusion license is registered in the application and choose a theme (Bootstrap, Fluent, Material, or Tailwind) as part of setup. -To get started quickly with the Blazor DropDownList component, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). +To get started quickly with the Blazor DropDownList component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList) sample. {% tabcontents %} @@ -27,11 +27,13 @@ To get started quickly with the Blazor DropDownList component, review this [GitH ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add the Blazor DropDownList component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. +To add the Blazor DropDownList component, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +56,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,7 +75,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal path is the project root directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. +* Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -87,7 +89,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -95,7 +97,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -107,7 +109,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -118,11 +120,9 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates a new Blazor WebAssembly app and places it in a directory named `BlazorApp` under the current location. See the [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation for more details. - ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -Use the following commands to add the Blazor DropDownList component by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). +To add the Blazor DropDownList component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -134,7 +134,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -155,7 +155,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. Ensure a valid Syncfusion license key is registered at application startup before using components. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -179,7 +179,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -191,7 +191,8 @@ The theme stylesheet and script are provided via [Static Web Assets](https://bla ``` -N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for theme reference methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor DropDown List component diff --git a/blazor/dropdown-list/images/blazor-wasm-app-template.png b/blazor/dropdown-list/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-wasm-app-template.png differ diff --git a/blazor/dropdown-tree/getting-started.md b/blazor/dropdown-tree/getting-started.md index e9e7bb6305..857969a826 100644 --- a/blazor/dropdown-tree/getting-started.md +++ b/blazor/dropdown-tree/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Dropdown Tree -This section briefly explains about how to include [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor Dropdown Tree, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=LQTn69p97O0"%} +This section briefly explains about how to include [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ To get started quickly with Blazor Dropdown Tree, check on the following video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor Dropdown Tree** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Dropdown Tree** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,15 +83,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Navigations and Themes NuGet in the App + +To add the Blazor Dropdown Tree component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +182,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Dropdown Tree component diff --git a/blazor/dropdown-tree/images/blazor-wasm-app-template.png b/blazor/dropdown-tree/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-wasm-app-template.png differ diff --git a/blazor/file-manager/getting-started-with-wasm-app.md b/blazor/file-manager/getting-started-with-wasm-app.md index 5742e2c33e..dd81fec3cf 100644 --- a/blazor/file-manager/getting-started-with-wasm-app.md +++ b/blazor/file-manager/getting-started-with-wasm-app.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in WASM App -This section briefly explains about how to include [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains about how to include [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,11 +23,13 @@ This section briefly explains about how to include [Blazor File Manager](https:/ ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App -To add **Blazor File Manager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Manager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -68,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -83,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -91,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,7 +105,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +116,9 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. - ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App -Here's an example of how to add **Blazor FileManager** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor FileManager** component in the application, run the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +130,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -138,7 +138,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 10" %} @@ -175,9 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: - -* For Blazor WebAssembly app, include it in the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -186,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor File Manager component diff --git a/blazor/file-manager/images/blazor-wasm-app-template.png b/blazor/file-manager/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/file-manager/images/blazor-wasm-app-template.png differ diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 1074a2b451..90fad7dda8 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component -This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,11 +21,13 @@ This section briefly explains how to include the [Blazor File Upload](https://ww ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -48,9 +50,9 @@ N> Syncfusion® Blazor components are available in [nuget.org](htt ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -66,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to 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 and ensure all dependencies are installed. {% tabs %} @@ -81,7 +83,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -89,7 +91,7 @@ N> Syncfusion® Blazor components are available in [nuget.org](htt ## Prerequisites -Install the latest [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If already installed, check the version using the following command in a terminal or command prompt. +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -101,7 +103,7 @@ dotnet --version ## Create a Blazor WebAssembly project using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +114,9 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,7 +128,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -136,7 +136,7 @@ N> Syncfusion® Blazor components are available in [nuget.org](htt ## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -149,7 +149,7 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -173,7 +173,7 @@ await builder.Build().RunAsync(); ## Add Stylesheet and Script Resources -The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `` section of **~/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -185,7 +185,8 @@ The theme stylesheet and script are available via [Static Web Assets](https://bl ``` -N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For scripts, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). When using the consolidated Syncfusion script, separate per-component scripts are typically not required. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. When using the consolidated Syncfusion script, separate per-component scripts are typically not required. ## Add Syncfusion® Blazor File Upload component @@ -212,7 +213,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/file-upload/images/blazor-wasm-app-template.png b/blazor/file-upload/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/file-upload/images/blazor-wasm-app-template.png differ diff --git a/blazor/floating-action-button/getting-started.md b/blazor/floating-action-button/getting-started.md index c567bf5dc3..39eeb0266e 100644 --- a/blazor/floating-action-button/getting-started.md +++ b/blazor/floating-action-button/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor Floating Action Button Component -This guide explains how to add the Blazor Floating Action Button component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This guide explains how to add the [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Floating Action Button component in Blazor, watch this video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=own8zVAakTk"%} +To get started quickly with the Blazor Floating Action Button component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Floating Action Button component in Blazor, watc ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add the Blazor Floating Action Button component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. +To add the Blazor Floating Action Button component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is in the project root directory where your `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,15 +85,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +To add the Blazor Floating Action Button component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +184,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to adding script references. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Floating Action Button component diff --git a/blazor/floating-action-button/images/blazor-wasm-app-template.png b/blazor/floating-action-button/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/floating-action-button/images/blazor-wasm-app-template.png differ diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md index a1dfc00154..417dc2d583 100644 --- a/blazor/gantt-chart/getting-started.md +++ b/blazor/gantt-chart/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Gantt Chart component -This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) @@ -23,11 +23,13 @@ This section briefly explains about how to include [Blazor Gantt Chart](https:// ## Create a new Blazor app in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Gantt and Themes NuGet in the app -To add **Blazor Gantt Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Gantt Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor app in Visual Studio code -You can create a **Blazor WebAssembly app** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -68,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Gantt and Themes NuGet in the app * Press Ctrl+` to open the integrated terminal in Visual Studio code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -83,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -91,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,7 +105,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +116,9 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. - ## Install Syncfusion® Blazor Gantt and Themes NuGet in the app -Use the following command to add **Blazor Gantt Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor Gantt Chart** component in the application, run the following command in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +130,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -138,7 +138,7 @@ N> Syncfusion® Blazor components are availa ## Add import namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -175,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -187,7 +187,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Syncfusion® Blazor Gantt Chart component @@ -239,6 +240,8 @@ Add the Syncfusion® Blazor Gantt Chart comp {% endhighlight %} {% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Gantt Chart component in the default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Binding Gantt Chart with data and mapping task fields diff --git a/blazor/gantt-chart/images/blazor-wasm-app-template.png b/blazor/gantt-chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/heatmap-chart/getting-started.md b/blazor/heatmap-chart/getting-started.md index 72e7e8b5dd..862fdbe760 100644 --- a/blazor/heatmap-chart/getting-started.md +++ b/blazor/heatmap-chart/getting-started.md @@ -9,12 +9,7 @@ documentation: ug # Getting Started with Blazor HeatMap Chart Component -This section briefly explains about how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -You can explore some useful features in the Blazor HeatMap component using the video below. - -{% youtube -"youtube:https://www.youtube.com/watch?v=0SAf_S4HFS4"%} +This section briefly explains about how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -26,11 +21,13 @@ You can explore some useful features in the Blazor HeatMap component using the v ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor HeatMap and Themes NuGet in the App -To add **Blazor HeatMap Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor HeatMap Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,8 +68,8 @@ cd BlazorApp ## Install Syncfusion® Blazor HeatMap and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -86,15 +83,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor HeatMap and Themes NuGet in the App + +To add the Blazor HeatMap Chart component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +147,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +173,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,7 +182,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor HeatMap component @@ -176,7 +221,7 @@ Add the Syncfusion® Blazor HeatMap Chart co {% endhighlight %} {% endtabs %} -*Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor HeatMap Chart component in your default web browser. +*Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor HeatMap Chart component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTDWBuJXfSXofp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.gif)" %} diff --git a/blazor/heatmap-chart/images/blazor-wasm-app-template.png b/blazor/heatmap-chart/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/heatmap-chart/images/blazor-wasm-app-template.png differ diff --git a/blazor/image-editor/getting-started.md b/blazor/image-editor/getting-started.md index 5d6f59151c..03453c7f41 100644 --- a/blazor/image-editor/getting-started.md +++ b/blazor/image-editor/getting-started.md @@ -9,11 +9,9 @@ documentation: ug # Getting Started with Blazor Image Editor Component -This section explains how to include the [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor Image Editor component, refer to this video or the corresponding [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/imageEditor): - -{% youtube "youtube:https://www.youtube.com/watch?v=lBB8oHvTuII"%} +To get started quickly with the Blazor Image Editor component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/imageEditor) sample. {% tabcontents %} @@ -25,11 +23,13 @@ To get started quickly with the Blazor Image Editor component, refer to this vid ## Create a new Blazor app in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor ImageEditor and themes NuGet packages -To add the **Blazor Image Editor** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the following Package Manager commands can be used: +To add the **Blazor Image Editor** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor app in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following terminal commands (Ctrl+`): +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -71,7 +71,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the command is run in the project root directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. +* Run the following commands to install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -85,15 +85,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor ImageEditor and Themes NuGet in the App + +To add the Blazor Image Editor Chart component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.ImageEditor -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -104,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Register the Syncfusion® Blazor service in **~/Program.cs** of the Blazor WebAssembly app. +## Register Syncfusion® Blazor service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -128,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -137,11 +184,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See the [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes in a Blazor application: [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). Also, see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to add script references. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Syncfusion® Blazor Image Editor component -Add the Syncfusion® Blazor Image Editor component in **~/Pages/Index.razor**. +Add the Syncfusion® Blazor Image Editor component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="~/Index.razor" %} diff --git a/blazor/image-editor/images/blazor-wasm-app-template.png b/blazor/image-editor/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/image-editor/images/blazor-wasm-app-template.png differ diff --git a/blazor/in-place-editor/getting-started.md b/blazor/in-place-editor/getting-started.md index fbe8100475..e89981de99 100644 --- a/blazor/in-place-editor/getting-started.md +++ b/blazor/in-place-editor/getting-started.md @@ -11,11 +11,9 @@ documentation: ug # Getting Started with Blazor In-place Editor Component -This section explains how to add the [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor In-place Editor in a Blazor WebAssembly app, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/how-to-add-a-blazor-in-place-editor-to-a-blazor-webassembly-app): - -{% youtube "youtube:https://www.youtube.com/watch?v=yv5TvEjdjBM"%} +To get started quickly with the Blazor In-place Editor component, refer to this [GitHub](https://github.com/SyncfusionExamples/how-to-add-a-blazor-in-place-editor-to-a-blazor-webassembly-app) sample. {% tabcontents %} @@ -27,11 +25,13 @@ To get started quickly with the Blazor In-place Editor in a Blazor WebAssembly a ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly app** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor InPlaceEditor and Themes NuGet in the App -To add the **Blazor In-place Editor** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: +To add the **Blazor In-place Editor** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly app** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly app using the following commands in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -73,7 +73,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal is in the project root directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. +* Run the following commands to install the [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -87,15 +87,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor InPlaceEditor and Themes NuGet in the App + +To add the Blazor In-place Editor Chart component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.InPlaceEditor -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.InPlaceEditor`, and `Syncfusion.Blazor.Inputs` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.InPlaceEditor`, and `Syncfusion.Blazor.InPlaceEditor` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +152,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor`, `Syncfusion.Blazor {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +178,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -140,11 +187,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See the [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor In-Place Editor component -Add the Syncfusion® Blazor In-place Editor component to the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor In-place Editor component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight cshtml %} @@ -175,7 +223,7 @@ Add the Syncfusion® Blazor In-place Editor N> The type of component editor must be configured in the 'Type' Editor In-place property. Also, the two-way binding between the In-place Editor and its EditorComponent should be configured. It's used to update the editor component value into the In-place Editor component. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %} diff --git a/blazor/in-place-editor/images/blazor-wasm-app-template.png b/blazor/in-place-editor/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-wasm-app-template.png differ diff --git a/blazor/input-mask/getting-started.md b/blazor/input-mask/getting-started.md index 767cd1deb5..9021e9243c 100644 --- a/blazor/input-mask/getting-started.md +++ b/blazor/input-mask/getting-started.md @@ -9,12 +9,9 @@ documentation: ug # Getting Started with Blazor Input Mask Component -This section explains how to include the [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor MaskedTextBox component, watch this video or explore the corresponding [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MaskedTextBox) sample. - -{% youtube -"youtube:https://www.youtube.com/watch?v=QQwInHTmBUY"%} +To get started quickly with the Blazor MaskedTextBox component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MaskedTextBox) sample. {% tabcontents %} @@ -26,11 +23,13 @@ To get started quickly with the Blazor MaskedTextBox component, watch this video ## Create a new Blazor App in Visual Studio -C**Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the **Blazor MaskedTextBox** component to the app, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. +To add the **Blazor MaskedTextBox** component to the app, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -53,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,7 +71,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal is in the project root directory where the `.csproj` file is located. -* Run the following commands to 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 and restore dependencies. +* Run the following commands to 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 and ensure all dependencies are installed. {% tabs %} @@ -86,15 +85,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +To add the Blazor MaskedTextBox component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to 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. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +149,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +175,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -138,11 +184,11 @@ The theme stylesheet and script are provided via NuGet through [Static Web Asset ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor MaskedTextBox component -Add the Syncfusion® Blazor MaskedTextBox component to **~/Pages/Index.razor**. +Add the Syncfusion® Blazor MaskedTextBox component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -153,6 +199,7 @@ Add the Syncfusion® Blazor MaskedTextBox co {% endtabs %} * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor MaskedTextBox component in the default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrzXsLuJBRJNWJf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MaskedTextBox Component](./images/blazor-maskedtextbox-component.png)" %} ## Set the mask diff --git a/blazor/input-mask/images/blazor-wasm-app-template.png b/blazor/input-mask/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/input-mask/images/blazor-wasm-app-template.png differ diff --git a/blazor/kanban/getting-started.md b/blazor/kanban/getting-started.md index 1fdc1257bf..d6de4f8024 100644 --- a/blazor/kanban/getting-started.md +++ b/blazor/kanban/getting-started.md @@ -11,11 +11,11 @@ documentation: ug # Getting Started with Blazor Kanban Component -This guide explains how to integrate the [Syncfusion Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component into a Blazor WebAssembly application using Visual Studio or Visual Studio Code. +This guide explains how to integrate the [Syncfusion Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component into a Blazor WebAssembly application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) -To get started quickly with the Blazor Kanban component, explore to the[GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban). +To get started quickly with the Blazor Kanban component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban) sample. {% tabcontents %} @@ -27,11 +27,13 @@ To get started quickly with the Blazor Kanban component, explore to the[GitHub s ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Kanban and Themes NuGet in the App -To add **Blazor Kanban** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Kanban** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +56,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,8 +74,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Kanban and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -87,15 +89,60 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Kanban and Themes NuGet in the App + +To add the Blazor Kanban component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -106,7 +153,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -130,7 +179,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -139,7 +188,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Kanban component @@ -170,7 +220,7 @@ Add the Syncfusion® Blazor Kanban component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Kanban component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Kanban component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.png)" %} diff --git a/blazor/kanban/images/blazor-wasm-app-template.png b/blazor/kanban/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/kanban/images/blazor-wasm-app-template.png differ diff --git a/blazor/linear-gauge/getting-started.md b/blazor/linear-gauge/getting-started.md index a7b6e041d9..9e1c3e18e3 100644 --- a/blazor/linear-gauge/getting-started.md +++ b/blazor/linear-gauge/getting-started.md @@ -11,12 +11,7 @@ documentation: ug The Blazor LinearGauge is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. -This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get started quickly with Blazor LinearGauge component, check on the following video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=u6MZxPv1df4" %} +This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -28,21 +23,24 @@ To get started quickly with Blazor LinearGauge component, check on the following ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor LinearGauge NuGet in the App -To add **Blazor LinearGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor LinearGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -72,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor LinearGauge and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure in the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -91,11 +89,56 @@ N> Syncfusion® Blazor components are availa {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor LinearGauge and Themes NuGet in the App + +To add the Blazor LinearGauge component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add Import Namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -106,7 +149,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -128,17 +173,19 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add script resources +## Add stylesheet and script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html .... + ``` -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor LinearGauge component @@ -160,7 +207,7 @@ Add the Syncfusion® Blazor LinearGauge comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor LinearGauge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor LinearGauge component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.png)" %} diff --git a/blazor/linear-gauge/images/blazor-wasm-app-template.png b/blazor/linear-gauge/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/linear-gauge/images/blazor-wasm-app-template.png differ diff --git a/blazor/predefined-dialogs/getting-started.md b/blazor/predefined-dialogs/getting-started.md index 254004be72..a5caeaa85e 100644 --- a/blazor/predefined-dialogs/getting-started.md +++ b/blazor/predefined-dialogs/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Predefined Dialogs in Blazor -This section explains how to include predefined dialogs in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. +This section explains how to include `Blazor Predefined Dialogs` in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,11 +21,13 @@ This section explains how to include predefined dialogs in a Blazor WebAssembly ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add the Blazor predefined dialog component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: +To add the Blazor predefined dialog component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. A valid Syncfusion license must be registered in the application. For guidance, see the licensing overview in the Syncfusion documentation. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -48,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). {% tabs %} @@ -67,7 +69,7 @@ cd BlazorApp * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal is in the project root directory where the `.csproj` file is located. -* Run the following commands to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. +* Run the following commands to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -81,18 +83,63 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. A valid Syncfusion license must be registered in the application. For guidance, see the licensing overview in the Syncfusion documentation. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App + +To add the **Blazor Predefined Dialog** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service and Syncfusion® Dialog Service +## Add Import Namespaces -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Popups @@ -100,7 +147,9 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. +## Register Syncfusion® Blazor Service and Syncfusion® Dialog Service + +Register the Syncfusion® Blazor service and Dialog service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="1 2 7 8" %} @@ -121,7 +170,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are provided by NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/wwwroot/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. ```html @@ -130,7 +179,7 @@ The theme stylesheet and script are provided by NuGet through [Static Web Assets ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to explore different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include script references. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to explore different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. ## Add Blazor Dialog Provider diff --git a/blazor/predefined-dialogs/images/blazor-wasm-app-template.png b/blazor/predefined-dialogs/images/blazor-wasm-app-template.png new file mode 100644 index 0000000000..8cf1737d81 Binary files /dev/null and b/blazor/predefined-dialogs/images/blazor-wasm-app-template.png differ