diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index aeddc137d8..82e7f52760 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -30,6 +30,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor 3D Chart NuGet in the Blazor Web App To add the **Blazor 3D Chart** component in the app, open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D). diff --git a/blazor/3D-chart/images/blazor-create-web-app.png b/blazor/3D-chart/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/3D-chart/images/blazor-create-web-app.png differ diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index 0f932e583b..9a0c5b81f1 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App 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/). diff --git a/blazor/accordion/images/blazor-create-web-app.png b/blazor/accordion/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/accordion/images/blazor-create-web-app.png differ diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 1c4de686a5..e5ddb0212e 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Charts and Themes NuGet in the App 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/). diff --git a/blazor/accumulation-chart/images/blazor-create-web-app.png b/blazor/accumulation-chart/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-create-web-app.png differ diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index a9e6313412..2390147e33 100644 --- a/blazor/appbar/getting-started-with-web-app.md +++ b/blazor/appbar/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App 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/). diff --git a/blazor/appbar/images/blazor-create-web-app.png b/blazor/appbar/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/appbar/images/blazor-create-web-app.png differ diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index 86ab179e80..6eca854df2 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -18,7 +18,6 @@ This section briefly explains about how to include [Blazor AutoComplete](https:/ ## Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* .NET SDK 8.0 or later, Visual Studio 2022 (latest), and the ASP.NET and web development workload ## Create a new Blazor Web App in Visual Studio @@ -26,13 +25,15 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App 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 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/). If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages in the client project. -Alternatively, run the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,7 +53,6 @@ N> Syncfusion® Blazor components are availa ## Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* .NET SDK 8.0 or later, Visual Studio Code (latest), and the C# Dev Kit extension ## Create a new Blazor Web App in Visual Studio Code @@ -77,8 +77,8 @@ cd BlazorWebApp.Client If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure in the project 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 you’re in the project root directory where your `.csproj` file is located. +* Run the following command 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 package and ensure all dependencies are installed. {% tabs %} @@ -205,7 +205,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -219,7 +219,7 @@ The theme stylesheet and script are available via NuGet as [Static Web Assets](h ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn 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 adding script references. If styles or interactivity are missing at runtime, ensure packages are restored and the correct project (Server or Client) is running for the selected render mode. +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. ## Add Syncfusion® Blazor AutoComplete component @@ -277,7 +277,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Binding data source -After initialization, populate the AutoComplete with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. +After initialization, populate the AutoComplete with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. {% tabs %} {% highlight razor %} @@ -340,5 +340,5 @@ By default, the suggestion list width automatically matches the AutoComplete inp ## See also -* [Getting Started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/autocomplete/images/blazor-create-web-app.png b/blazor/autocomplete/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/autocomplete/images/blazor-create-web-app.png differ diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index b06b2fe19f..6c729647d7 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Themes NuGet in the App 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/). diff --git a/blazor/avatar/images/blazor-create-web-app.png b/blazor/avatar/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/avatar/images/blazor-create-web-app.png differ diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 1ed10f9008..f18e9de8fc 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Themes NuGet in the App 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/). diff --git a/blazor/badge/images/blazor-create-web-app.png b/blazor/badge/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/badge/images/blazor-create-web-app.png differ diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 4a7e44d19e..d249f8071c 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.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*), 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/). diff --git a/blazor/barcode/images/blazor-create-web-app.png b/blazor/barcode/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/barcode/images/blazor-create-web-app.png differ diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 364a39f936..197482770f 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App 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/). diff --git a/blazor/breadcrumb/images/blazor-create-web-app.png b/blazor/breadcrumb/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/breadcrumb/images/blazor-create-web-app.png differ diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 6ac477ab60..422c4955d3 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Bullet Chart NuGet in the App 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). diff --git a/blazor/bullet-chart/images/blazor-create-web-app.png b/blazor/bullet-chart/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/bullet-chart/images/blazor-create-web-app.png differ diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index e3fb9e611b..665dcc439f 100644 --- a/blazor/button-group/getting-started-with-web-app.md +++ b/blazor/button-group/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App 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/). diff --git a/blazor/button-group/images/blazor-create-web-app.png b/blazor/button-group/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/button-group/images/blazor-create-web-app.png differ diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 3e7dd7afd9..ab969480be 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App 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/). diff --git a/blazor/button/images/blazor-create-web-app.png b/blazor/button/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/button/images/blazor-create-web-app.png differ diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index e55660a3c1..ababfebddb 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -25,13 +25,15 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App To add the **Blazor Calendar** 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/). If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the Package Manager console commands shown below. +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,9 +76,9 @@ cd BlazorWebApp.Client If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -- Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project directory containing the target `.csproj`. -- 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/). +* 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. {% tabs %} @@ -203,7 +205,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). Add the stylesheet reference in the `` section and the script reference at the end of the `` section in **~/Components/App.razor** as shown: +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 reference in the `` section and the script reference at end of the `` section in **~/Components/App.razor** file as shown below: ```html @@ -217,7 +219,7 @@ 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 options ([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 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. ## Add Blazor Calendar component @@ -252,11 +254,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.png)" %} -N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). ## See also * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) -N> Explore the [Blazor Calendar example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) to learn how to render and configure the Calendar. \ No newline at end of file +N> Explore the [Blazor Calendar example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) to learn how to render and configure the Calendar. + + diff --git a/blazor/calendar/images/blazor-create-web-app.png b/blazor/calendar/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/calendar/images/blazor-create-web-app.png differ diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 8be0bdff56..3f1af2d7e5 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Cards and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/card/images/blazor-create-web-app.png b/blazor/card/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/card/images/blazor-create-web-app.png differ diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md index 367192138a..8a4b836fce 100644 --- a/blazor/carousel/getting-started-with-web-app.md +++ b/blazor/carousel/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Navigations and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/carousel/images/blazor-create-web-app.png b/blazor/carousel/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/carousel/images/blazor-create-web-app.png differ diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index cc516ad3ab..3232999c79 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -30,6 +30,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App To add the **Blazor Chat UI** component to your 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.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). diff --git a/blazor/chat-ui/images/blazor-create-web-app.png b/blazor/chat-ui/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/chat-ui/images/blazor-create-web-app.png differ diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index 77268030be..b41bb8f338 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App To add the **Blazor CheckBox** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). diff --git a/blazor/check-box/images/blazor-create-web-app.png b/blazor/check-box/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/check-box/images/blazor-create-web-app.png differ diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md index d51f27b5fe..b81cf8644c 100644 --- a/blazor/chip/getting-started-with-web-app.md +++ b/blazor/chip/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/chip/images/blazor-create-web-app.png b/blazor/chip/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/chip/images/blazor-create-web-app.png differ diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md index ce16e7ce2e..3202295f87 100644 --- a/blazor/circular-gauge/getting-started-with-web-app.md +++ b/blazor/circular-gauge/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor CircularGauge and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/circular-gauge/images/blazor-create-web-app.png b/blazor/circular-gauge/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/circular-gauge/images/blazor-create-web-app.png differ diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index 926ba7d251..71d321c71f 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Syncfusion Blazor ColorPicker Component in WebApp description: Checkout and learn about the documentation for getting started with Blazor ColorPicker Component in Blazor Web App. platform: Blazor -control: Color Picker +component: ColorPicker documentation: ug --- @@ -25,13 +25,15 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App To add the **Blazor ColorPicker** 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/). If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, run the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -75,8 +77,8 @@ cd BlazorWebApp.Client If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is at 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 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. {% tabs %} @@ -258,4 +260,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/color-picker/images/blazor-create-web-app.png b/blazor/color-picker/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/color-picker/images/blazor-create-web-app.png differ diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 5c6fc4074a..bd5e985a46 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Web App in Blazor ComboBox | Syncfusion description: Checkout and learn here all about the documentation for getting started with Blazor ComboBox component in Blazor Web App. platform: Blazor -control: ComboBox +component: ComboBox documentation: ug --- @@ -25,13 +25,15 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App To add the **Blazor ComboBox** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -75,8 +77,8 @@ cd BlazorWebApp.Client If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is in the project directory that contains the `.csproj` file. -* 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 you’re in the project root directory where your `.csproj` file is located. +* Run the following command 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 package and ensure all dependencies are installed. {% tabs %} @@ -203,7 +205,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 reference in the `` section and the script reference at the end of the `` in the `~/Components/App.razor` 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -217,7 +219,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for multiple 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)). 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 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. ## Add Syncfusion® Blazor ComboBox component @@ -254,7 +256,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Binding data source -After initialization, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the ComboBox. +After initializing, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the ComboBox component. {% tabs %} {% highlight razor %} @@ -324,6 +326,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) + diff --git a/blazor/combobox/images/blazor-create-web-app.png b/blazor/combobox/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/combobox/images/blazor-create-web-app.png differ diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md index 4c2ba355ba..1d8a1a7e20 100644 --- a/blazor/context-menu/getting-started-with-web-app.md +++ b/blazor/context-menu/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Navigations and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/context-menu/images/blazor-create-web-app.png b/blazor/context-menu/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/context-menu/images/blazor-create-web-app.png differ diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index f9235abb09..24989f8638 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Layouts and Themes NuGet in the Blazor Web App 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/). diff --git a/blazor/dashboard-layout/images/blazor-create-web-app.png b/blazor/dashboard-layout/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-create-web-app.png differ diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index c124dfb650..6e8a9adf16 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor DataForm Component in WebApp description: Checkout and learn about the documentation for getting started with Blazor DataForm Component in Blazor Web App. platform: Blazor -control: DataForm +component: DataForm documentation: ug --- # Getting Started with Blazor DataForm Component in Web App -This section explains how to include the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to include the [Blazor DataForm](https://www.syncfusio ## Create a new Blazor Web App in Visual Studio -Create **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the app. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. -## Install Syncfusion Blazor DataForm and Themes NuGet in the Blazor Web App +![Create Blazor Web App](images/blazor-create-web-app.png) -To add the DataForm component, open 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/). +## Install Syncfusion® Blazor DataForm and Themes NuGet in the Blazor Web App -If using `WebAssembly` or `Auto` render modes, install Syncfusion Blazor component NuGet packages in the client project. +To add the **Blazor DataForm** 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -Alternatively, use the Package Manager console: +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +Alternatively, you can utilize the following package manager command 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. For the complete list, 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 %} @@ -54,11 +56,11 @@ N> Syncfusion Blazor components are available on NuGet. For the complete list, s ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information about interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - -## Install Syncfusion Blazor DataForm and Themes NuGet in the App +## Install Syncfusion® Blazor DataForm and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you are in the project directory where the `.csproj` file is located. -* Run the following commands to install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,21 +92,69 @@ dotnet restore {% endtabs %} -N> Syncfusion Blazor components are available on NuGet. For the complete list, 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 + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor DataForm and Themes NuGet in the App +Here's an example of how to add the **Blazor DataForm** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.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. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 package list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion Blazor Service - -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | -| Server | Open **~/_Imports.razor** in the `Components` folder. | +## Add Import Namespaces -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -117,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service -If the Interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. + +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -153,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the Interactive render mode is `Server`, your project contains a single **~/Program.cs** file. Register the Syncfusion Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -The theme stylesheet and script are available via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` and the script at the end of the `` in **~/Components/App.razor** as shown: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -190,20 +219,19 @@ The theme stylesheet and script are available via NuGet using [Static Web Assets ``` -N> For more options, see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to reference themes via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script references](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 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. ## Add Blazor DataForm component -Add the Syncfusion Blazor DataForm component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to Per page/component, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor DataForm component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the Interactivity location is set to `Global` and the Render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -261,6 +289,8 @@ N> If the Interactivity location is set to `Global` and the Render mode is `Auto {% endhighlight %} {% endtabs %} -{% 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)" %} +* 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 Component](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 +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-create-web-app.png b/blazor/data-form/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/data-form/images/blazor-create-web-app.png differ diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md index f3820c68f2..c98c2e5cf0 100644 --- a/blazor/data/getting-started-with-web-app.md +++ b/blazor/data/getting-started-with-web-app.md @@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +![Create Blazor Web App](images/blazor-create-web-app.png) + ## Install Syncfusion® Blazor Data and Themes NuGet in the Blazor Web App To add the **Blazor DataManager** 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.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). diff --git a/blazor/data/images/blazor-create-web-app.png b/blazor/data/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/data/images/blazor-create-web-app.png differ diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index ac507586da..8c8ada7e67 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component in Web App -This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,18 +21,19 @@ This section explains how to include the [Blazor DateTimePicker](https://www.syn ## Create a new Blazor Web App in Visual Studio - Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add the **Blazor DateTimePicker** 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/). +To add the **Blazor DateTimePicker** 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/). -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list 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 %} @@ -55,14 +56,12 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: - {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -73,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure in the project directory that contains the `.csproj` file. -* 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/): +* 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. {% tabs %} @@ -95,20 +92,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App + +Here's an example of how to add the **Blazor DateTimePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.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. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +{% endhighlight %} +{% endtabs %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +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 package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -119,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, need to register the Syncfusion® Blazor service in both **~/Program.cs** files of Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -155,29 +203,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, project will contain a single **~/Program.cs** file. So, should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -194,20 +219,19 @@ 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 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. ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor DateTimePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -226,7 +250,7 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% 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)" %} @@ -256,4 +280,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/datetime-picker/images/blazor-create-web-app.png b/blazor/datetime-picker/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/datetime-picker/images/blazor-create-web-app.png differ diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 53c1efef54..f48e1b16ab 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dropdown Menu Component in Web App -This section explains how to add the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to add the [Blazor Dropdown Menu](https://www.syncfusi ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the Blazor Web App -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/). +To add the **Blazor DropDown Menu** 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/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, install packages using the Package Manager console: +Alternatively, you can utilize the following package manager command 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). 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with different interactive modes and locations, see [Getting started with Blazor Web App (render interactive modes)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure in the project 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 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. {% tabs %} @@ -92,20 +92,69 @@ 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Here's an example of how to add the **Blazor DropDown Menu** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.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. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both **~/Program.cs** files of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 stylesheet reference in the `` and the script reference at the end of the `` in the **~/Components/App.razor** file as shown: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ The theme stylesheet and script are provided via [Static Web Assets](https://bla ``` -N> For additional options 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)), see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes). For approaches to add script references, see [Adding script references](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 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. ## Add Syncfusion® Blazor Dropdown Menu component -Add the Syncfusion® Blazor Dropdown Menu component to a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor DropDown Menu component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,16 +256,16 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Dropdown Menu component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %} -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu). ## See also -1. [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -N> Explore the [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) to learn how to render and configure the dropdown menu. \ No newline at end of file +N> You can also explore our [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the dropdown menu. diff --git a/blazor/drop-down-menu/images/blazor-create-web-app.png b/blazor/drop-down-menu/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/drop-down-menu/images/blazor-create-web-app.png differ diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index 6c0ac00215..799ca432f3 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting started with Blazor DropDownList in Web App | Syncfusion +title: Getting Started with Blazor DropDown List in Web App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor DropDown List Component in Blazor Web App. platform: Blazor -component: DropDownList +component: DropDown List documentation: ug --- # Getting Started with Blazor DropDown List Component in Web App -This section explains how to include the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. +This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,19 +21,19 @@ This section explains how to include the [Blazor DropDownList](https://www.syncf ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web 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 install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDown List** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the Client project of the Blazor Web App. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,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 full 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 %} @@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location. For more information, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, for a Blazor Web App with the `Auto` interactive render mode, run: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,11 +74,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the Client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal path is the project directory that contains the target `.csproj` file. -* 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 you’re in the project root directory where your `.csproj` file is located. +* Run the following command 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 package and ensure all dependencies are installed. {% tabs %} @@ -92,7 +92,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 full 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 %} @@ -100,7 +100,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 version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux). +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App. For detailed instructions, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location. For more information, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, for a Blazor Web App with `Auto` interactive render mode, run: +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App and places it in a directory named `BlazorApp` under the current location. See the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## 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). +Here's an example of how to add **Blazor DropDown List** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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 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. -If using `WebAssembly` or `Auto` render modes, install the packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,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 full 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 %} @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the Client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the Client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion Blazor service in both the main Server project and the associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -205,7 +205,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 stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file as shown below: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -222,11 +222,11 @@ 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 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 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. ## Add Syncfusion® Blazor DropDown List component -Add the Syncfusion® Blazor DropDown List component to a Razor page under the Pages folder (for example, Pages/Home.razor) in either the **Server** or **Client** project. If the interactivity location is `Per page/component`, define a render mode at the top of the component, as follows: +Add the Syncfusion® Blazor DropDown List component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -234,7 +234,7 @@ Add the Syncfusion® Blazor DropDown List co | | WebAssembly | @rendermode InteractiveWebAssembly | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -253,7 +253,7 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component renders in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} @@ -332,7 +332,7 @@ By default, the popup list width adjusts to the DropDownList input width, and th ## Get selected value -Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. +Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. {% highlight cshtml %} @@ -355,4 +355,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also 1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) + diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index cb3e0cf525..6073341932 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component in Web App -This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and .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 Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section briefly explains how to include the [Blazor File Upload](https://ww ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the project. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add the **Blazor File Upload** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +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/). -If using the `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands. +Alternatively, you can utilize the following package manager command 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). For a full 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location during setup. For details, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, to create a Blazor Web App with the `Auto` interactive render mode: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight C# tabtitle="Blazor Web App" %} @@ -70,11 +72,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * 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. @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete package list with 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 %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in a terminal or command prompt: +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight C# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ dotnet --version ## Create a Blazor Web project using .NET CLI -Run the following command to create a new Blazor Web App. For step-by-step guidance, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location during setup. For details, see the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, to create a Blazor Web App with the `Auto` interactive render mode: +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight C# tabtitle=".NET CLI" %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web 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/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web 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/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) 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. -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight C# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete package list, 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 %} @@ -165,11 +165,11 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf {% endhighlight %} {% endtabs %} -

Register Syncfusion® Blazor Service

+## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in both the main Server project and the associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight C# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %} @@ -203,9 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -

Add stylesheet and script resources

+## 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 stylesheet in the `` and the script at the end of the `` in **~/Components/App.razor** as shown below. When using the `WebAssembly` or `Auto` render modes, ensure the client project also references the required 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -222,7 +222,7 @@ 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 adding scripts, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If 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 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. ## Add Syncfusion® Blazor File Upload component @@ -238,7 +238,7 @@ The most basic way to render the File Upload component is by adding the ` If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in `App.razor` by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -257,11 +257,9 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% 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" %} - -![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif)" %} ## Use ValueChange Event @@ -320,9 +318,7 @@ This example demonstrates how to use the [`ValueChange`](https://help.syncfusion N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif)" %} ## Memory stream @@ -392,9 +388,7 @@ This example demonstrates how to read the content of an uploaded file into a [Me N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif)" %} ## Created Event @@ -433,9 +427,7 @@ This example shows how to use the [`Created`](https://help.syncfusion.com/cr/bla N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Created Example](images/blazor-fileupload-created.gif)" %} ## File Selected Event @@ -488,9 +480,7 @@ This example demonstrates how to use the [FileSelected Event](https://help.syncf N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif)" %} ## OnFileListRender diff --git a/blazor/floating-action-button/getting-started-with-web-app.md b/blazor/floating-action-button/getting-started-with-web-app.md index d449be5827..5273c6ce6b 100644 --- a/blazor/floating-action-button/getting-started-with-web-app.md +++ b/blazor/floating-action-button/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Floating Action Button Component in WebApp -This guide explains how to add the [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) component to a Blazor Web App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This guide explains how to add the [Blazor Floating Action Button](https://www.s ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web 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/). +To add the **Blazor Floating Action 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/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command 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 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -If you use `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * 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 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. {% tabs %} @@ -92,20 +92,69 @@ 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 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +Here's an example of how to add **Blazor Floating Action Button** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +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 %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +203,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,20 +219,19 @@ 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. The script reference is required for component interactivity. +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. ## Add Syncfusion® Blazor Floating Action Button component -Add the Syncfusion® Blazor Floating Action Button component in `.razor` file inside the `Pages` folder. If an interactivity location is set to `Per page/component` in the web app, define a render mode at the top of the component, as follows: +Add the Syncfusion® Blazor Floating Action Button component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -225,9 +254,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Floating Action Button component in the default web browser. The `Target` property positions the FAB relative to the specified container. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Floating Action Button component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Floating Action Button Component](./images/blazor-fab-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Floating Action Button Component](./images/blazor-fab-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton). @@ -260,4 +289,5 @@ N> You can also explore our [Blazor Floating Action Button example](https://blaz 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/floating-action-button/images/blazor-create-web-app.png b/blazor/floating-action-button/images/blazor-create-web-app.png new file mode 100644 index 0000000000..7dd6e612d2 Binary files /dev/null and b/blazor/floating-action-button/images/blazor-create-web-app.png differ diff --git a/blazor/in-place-editor/getting-started-with-web-app.md b/blazor/in-place-editor/getting-started-with-web-app.md index 339a5299e1..ef64c67c0c 100644 --- a/blazor/in-place-editor/getting-started-with-web-app.md +++ b/blazor/in-place-editor/getting-started-with-web-app.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Blazor In-place Editor in WebApp | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor In-place Editor Component in Blazor Web App. platform: Blazor -control: In-place Editor +component: In place Editor documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor In-place Editor Component in Web App -This section explains how to include the [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,17 +23,19 @@ This section explains how to include the [Blazor In-place Editor](https://www.sy ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor InPlaceEditor and Themes NuGet in the Blazor Web 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), 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/). +To add the **Blazor In-place Editor** 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.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on nuget.org. 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 %} @@ -56,11 +58,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -72,15 +74,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with different interactive modes and locations, refer to [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor InPlaceEditor and Themes NuGet in the App -If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal path is the project root directory that contains the `.csproj` file. -* 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. +* 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.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -94,20 +94,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on nuget.org. 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor InPlaceEditor and Themes NuGet in the App + +Here's an example of how to add **Blazor In-place Editor** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the Client project. | -| Server | Open **~/_Imports.razor** in the `Components` folder. | +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 %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespaces. +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -118,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,27 +205,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -191,20 +221,19 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional 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. For script references, see [Adding script references](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 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. ## Add Syncfusion® Blazor In-place Editor component -Add the Syncfusion® Blazor In-place Editor component to a `.razor` file inside the `Pages` folder. If the Interactivity location is `Per page/component` in the web app, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor In-place Editor component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity location** is set to `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -244,15 +273,15 @@ N> If the **Interactivity location** is set to `Global` and the **Render mode** N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) when using non-default editors (for example, `DropDownList`, `Date`, or `AutoComplete`). Configure two-way binding between the In-place Editor and its editor component to synchronize values. -* 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)" %} -N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor). ## Render Blazor In-place Editor with popup -The following example shows how to initialize a simple In-place Editor with a popup in a Blazor page. +The following code explains how to initialize a simple In-place Editor with popup in the Blazor page. {% tabs %} {% highlight razor %} @@ -371,7 +400,7 @@ Render the Blazor `DatePicker` by changing the `Type` property to `Date` and con {% endhighlight %} {% endtabs %} -In the following code, the `DatePicker`, `DropDownList`, and `TextBox` components are configured. +In the following code, it is configured to render the `DatePicker`, `DropDownList` and `Textbox` components. {% tabs %} {% highlight razor %} @@ -570,6 +599,7 @@ After submit, the edited data is sent to the server, and the updated value is re ## See also -1. [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/input-mask/getting-started-with-web-app.md b/blazor/input-mask/getting-started-with-web-app.md index bbfe6c5e05..249cf5caa9 100644 --- a/blazor/input-mask/getting-started-with-web-app.md +++ b/blazor/input-mask/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Input Mask Component in Blazor Web App -This section explains how to include the [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to include the [Blazor MaskedTextBox](https://www.sync ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add the Blazor MaskedTextBox 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/). +To add the **Blazor MaskedTextBox** 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/). -If using `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command 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 the 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 Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * 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. +* 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. {% tabs %} @@ -92,20 +92,69 @@ 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 the 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +Here's an example of how to add **Blazor MaskedTextBox** 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project. | -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder. | +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 %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the `~/Program.cs` file of the Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both `~/Program.cs` files (Server and Client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the `~/Components/App.razor` file, as shown below. Ensure scripts are added after the Blazor framework scripts so that components initialize correctly. +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ 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 to explore theme references via [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 different approaches to add scripts. +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. ## Add Syncfusion® Blazor MaskedTextBox component -Add the Syncfusion® Blazor MaskedTextBox component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to Per page/component, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor MaskedTextBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the interactivity location is set to `Global` and the render mode is set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +250,7 @@ N> If the interactivity location is set to `Global` and the render mode is set t {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor MaskedTextBox component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render 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)" %} @@ -247,4 +276,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md index b9832ca6a6..ef8d58832a 100644 --- a/blazor/listbox/getting-started-webapp.md +++ b/blazor/listbox/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor ListBox in Blazor Web App -This section explains how to add the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. +This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to add the [Blazor ListBox](https://www.syncfusion.com ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. -## Install Syncfusion® Blazor DropDowns and Themes NuGet in the app +![Create Blazor Web App](images/blazor-create-web-app.png) -To add the **Blazor ListBox** 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/). +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If the app uses the `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in the client project. For a `Server` render mode, install in the server project. +To add the **Blazor ListBox** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -Alternatively, install via the Package Manager Console: +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +Alternatively, you can utilize the following package manager command 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). 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 %} @@ -54,9 +56,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to this [guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - -## Install Syncfusion® Blazor DropDowns and Themes NuGet in the app +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If the app uses `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you are in the project 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/), then restore packages. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command 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 package and ensure all dependencies are installed. {% tabs %} @@ -92,20 +92,69 @@ 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App + +Here's an example of how to add **Blazor ListBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} -| Interactive render mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | -| Server | Open **~/_Imports.razor** located under the `Components` folder. | +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 %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the interactive render mode is `WebAssembly` or `Auto`, register Syncfusion® Blazor in both **~/Program.cs** files (server and client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -The theme stylesheet and script are exposed via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the `` and the script at the end of the `` in **~/Components/App.razor**: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ The theme stylesheet and script are exposed via NuGet as [Static Web Assets](htt ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional 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)). Refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script reference options. +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. ## Add Syncfusion® Blazor ListBox component -Add the Syncfusion® Blazor ListBox component to a page under the **~/Pages** folder. If the interactivity location is set to `Per page/component`, specify a render mode at the top of the `.razor` page as shown: +Add the Syncfusion® Blazor ListBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the interactivity location is `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -254,11 +283,11 @@ After initialization, populate the ListBox using the `DataSource` property. The N> `TValue` is the type of the value in the data source used for type inference. It is a generic type and can be specified as string[], int[], etc. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor ListBox will render in the default browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.png)" %} -N> [View sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox/BlazorWebApp). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox/BlazorWebApp). ## See Also diff --git a/blazor/multicolumn-combobox/getting-started-with-web-app.md b/blazor/multicolumn-combobox/getting-started-with-web-app.md index e673052498..a7a7953b54 100644 --- a/blazor/multicolumn-combobox/getting-started-with-web-app.md +++ b/blazor/multicolumn-combobox/getting-started-with-web-app.md @@ -3,15 +3,16 @@ layout: post title: Getting Started with Syncfusion Blazor MultiColumn ComboBox in WebApp description: Checkout and learn here all about the documentation for getting started with Blazor MultiColumn ComboBox component in Blazor Web App. platform: Blazor -control: MultiColumn ComboBox +component: MultiColumn ComboBox documentation: ug --- # Getting Started with Blazor MultiColumn ComboBox Component in Web App -This section explains how to include the [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get started quickly with the Blazor MultiColumn ComboBox, see the following video: + +To get started quickly with Blazor MultiColumn ComboBox component, you can check the video below. {% youtube "https://www.youtube.com/watch?v=2B5ctnHw4vk" %} @@ -25,17 +26,19 @@ To get started quickly with the Blazor MultiColumn ComboBox, see the following v ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). + +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +![Create Blazor Web App](images/blazor-create-web-app.png) -## Install Syncfusion® Blazor MultiColumn ComboBox and Themes NuGet in the Blazor Web App +## Install Syncfusion® Blazor MultiColumnComboBox and Themes NuGet in the Blazor Web App -To add the Blazor MultiColumn ComboBox, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor MultiColumn ComboBox** 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.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using the WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, run the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -46,7 +49,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 the full 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 %} @@ -58,11 +61,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the Auto interactive render mode, use the following commands: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,15 +77,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a Blazor Web App with various interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) section. +## Install Syncfusion® Blazor MultiColumnComboBox and Themes NuGet in the App -## Install Syncfusion® Blazor MultiColumn ComboBox and Themes NuGet in the App - -If using WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the current directory contains the target `.csproj`. -* Run the following commands to install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -96,20 +97,69 @@ 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 the full 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open the ~/_Imports.razor file in the client project. | -| Server | Open the ~/_Imports.razor file located in the Components folder. | +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespaces. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor MultiColumnComboBox and Themes NuGet in the App + +Here's an example of how to add **Blazor MultiColumn ComboBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.MultiColumnComboBox --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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -120,7 +170,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` names {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file(s) of the Blazor Web App. If the interactive render mode is set to WebAssembly or Auto, register services in both the server and client Program.cs files. Ensure the Syncfusion license is registered early in Program.cs using the provided license key to avoid runtime license warnings. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. + +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,30 +208,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the interactive render mode is set to Server, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -Access the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -191,11 +224,11 @@ Access the theme stylesheet and script from NuGet via [Static Web Assets](https: ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme reference options ([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 reference 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 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. ## Add Syncfusion® Blazor MultiColumn ComboBox component -Add the Syncfusion Blazor MultiColumn ComboBox component to a `.razor` file under the `Pages` folder. When the interactivity location is Per page/component, define a render mode at the top of the component as shown: +Add the Syncfusion® Blazor MultiColumn ComboBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -204,7 +237,7 @@ Add the Syncfusion Blazor MultiColumn ComboBox component to a `.razor` file unde | | Server | @rendermode InteractiveServer | | | None | --- | -N> If the Interactivity Location is set to Global and the Render Mode is Auto, WebAssembly, or Server, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -223,7 +256,7 @@ N> If the Interactivity Location is set to Global and the Render Mode is Auto, W {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion Blazor MultiColumn ComboBox component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiColumn ComboBox component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hthpNuiEUXUBXNYa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox Component](./images/blazor-multicolumncombobox-component.png)" %} @@ -305,4 +338,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) + diff --git a/blazor/multiselect-dropdown/getting-started-webapp.md b/blazor/multiselect-dropdown/getting-started-webapp.md index 23c0e04cff..b49aac3b33 100644 --- a/blazor/multiselect-dropdown/getting-started-webapp.md +++ b/blazor/multiselect-dropdown/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor MultiSelect DropDown in Web App -This guide explains how to include the [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, or the .NET CLI. +This section briefly explains about how to include [Blazor MultiSelect DropDown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -17,23 +17,23 @@ This guide explains how to include the [Blazor MultiSelect Dropdown](https://www ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add the Blazor MultiSelect Dropdown 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/). +To add the **Blazor MultiSelect DropDown** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -When using `WebAssembly` or `Auto` render modes in a Blazor Web App with a separate client project, install the Syncfusion Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,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 %} @@ -52,15 +52,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the interactive render mode and interactivity location when setting up the Blazor Web App. For details, see [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, with the `Auto` interactive render mode: +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,11 +74,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -When using `WebAssembly` or `Auto` render modes with a separate client project, install the Syncfusion Blazor NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -- Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure the working directory contains the project `.csproj`. -- 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/): +* 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,7 +92,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 %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, use the following command: +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). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App. For detailed steps, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the interactive render mode and interactivity location when setting up the Blazor Web App. For details, see [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, with the `Auto` interactive render mode: +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App in the `BlazorApp` directory. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the following commands. 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. +Here's an example of how to add **Blazor MultiSelect DropDown** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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 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. -When using `WebAssembly` or `Auto` render modes with a separate client project, install the Syncfusion Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion Blazor components are available on NuGet. See 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 %} @@ -154,7 +154,7 @@ N> Syncfusion Blazor components are available on NuGet. See the [NuGet packages] ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -205,7 +205,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -Theme stylesheets and scripts are served via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from the installed NuGet packages. Add the stylesheet in the and the script at the end of the in ~/Components/App.razor: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -222,7 +222,7 @@ Theme stylesheets and scripts are served via [Static Web Assets](https://blazor. ``` -N> The single script reference [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 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. ## Add Syncfusion® Blazor MultiSelect DropDown component @@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiSelect DropDown component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiSelect DropDown component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)" %} diff --git a/blazor/numeric-textbox/getting-started-webapp.md b/blazor/numeric-textbox/getting-started-webapp.md index 1f715efc82..0c7e82520e 100644 --- a/blazor/numeric-textbox/getting-started-webapp.md +++ b/blazor/numeric-textbox/getting-started-webapp.md @@ -3,13 +3,13 @@ layout: post title: Getting started with Syncfusion NumericTextBox in Blazor Web App description: Check out the documentation for getting started with Syncfusion Blazor NumericTextBox Components in Web App. platform: Blazor -control: Numeric TextBox +control: NumericTextBox documentation: ug --- # Getting started with Blazor NumericTextBox in Blazor Web App -This section explains how to include [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -17,21 +17,23 @@ This section explains how to include [Blazor NumericTextBox](https://www.syncfus ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the Blazor NumericTextBox 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor NumericTextBox** 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/). -If using WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands to install the packages. +Alternatively, you can utilize the following package manager command 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 the full 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 %} @@ -50,15 +52,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -- Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project 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. +* 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. {% tabs %} @@ -92,20 +92,69 @@ 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 full 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} + +## Prerequisites -## Register Syncfusion Blazor Service +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces . +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +Here's an example of how to add **Blazor NumericTextBox** 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces . {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. + +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the section and the script reference at the end of the in the ~/Components/App.razor file, as shown below: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor NumericTextBox component -Add the Syncfusion® Blazor NumericTextBox component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor NumericTextBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor NumericTextBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor NumericTextBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzXCKXVVvZqDCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor NumericTextBox Component](./images/blazor-numerictextbox-component.png)" %} diff --git a/blazor/otp-input/getting-started-webapp.md b/blazor/otp-input/getting-started-webapp.md index c61ac02231..338e9c8b29 100644 --- a/blazor/otp-input/getting-started-webapp.md +++ b/blazor/otp-input/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor OTP Input in Blazor Web App -This guide explains how to add the`Blazor OTP Input` component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include `Blazor OTP Input` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). To get started quickly with Blazor OTP Input component, check on the following video: @@ -26,17 +26,19 @@ To get started quickly with Blazor OTP Input component, check on the following v ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the Blazor OTP Input 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor OTP Input** 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/). -Use `WebAssembly or Auto` render modes in the Blazor Web App need to be install the Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,7 +49,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in NuGet at [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 %} @@ -59,9 +61,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft t](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -75,15 +77,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Use `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install the Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is in the project directory that contains the `.csproj` file. -* 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 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. {% tabs %} @@ -97,20 +97,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in NuGet at [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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +Here's an example of how to add **Blazor OTP Input** 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -121,9 +170,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -157,27 +208,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -198,16 +228,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor OTP Input component -Add the Syncfusion® Blazor OTP Input component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor OTP Input component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md index e767c7f4c4..d912d3042d 100644 --- a/blazor/predefined-dialogs/getting-started-webapp.md +++ b/blazor/predefined-dialogs/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Predefined Dialogs in Blazor Web App -This section explains how to include the Blazor predefined dialogs component in a Blazor Web App using Visual Studio and Visual Studio Code. +This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to include the Blazor predefined dialogs component in ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the project. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add the Blazor predefined dialogs 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/). +To add the **Blazor predefined 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/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` mode, install them in the Server project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following package manager commands: +Alternatively, you can utilize the following package manager command 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. 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 details, see [How to register the Syncfusion license in a Blazor app](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview). +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 Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the project. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For information about creating a Blazor Web App with different interactive modes and locations, refer to [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).. - ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is in the project directory that contains the `.csproj` file. -* 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. +* 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. {% tabs %} @@ -92,20 +92,69 @@ 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 details, see [How to register the Syncfusion license in a Blazor app](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview). +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 %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App + +Here's an example of how to add the **Blazor Predefined Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.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. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the interactive render mode is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,31 +205,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddScoped(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below. Add these references once in the app. +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -192,13 +221,13 @@ The theme stylesheet and script are provided by NuGet through [Static Web Assets ``` -N> See [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different 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)). Also, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include 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 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. ## Add Blazor Dialog Provider `SfDialogProvider` opens predefined dialogs based on `SfDialogService` settings from anywhere in the application. Add `SfDialogProvider` in `MainLayout.razor` or in a specific page, but include it only once in the app. When added to `MainLayout.razor`, predefined dialogs are available throughout the application; when added to a specific page, dialogs are available only within that page. -* Add `SfDialogProvider` in the **~/Components/Layout/MainLayout.razor** file. +* Now, add `SfDialogProvider` in the **~/Components/Layout/MainLayout.razor** file. {% tabs %} {% highlight razor tabtitle=".NET 10, .NET 9 & .NET 8 (~/MainLayout.razor)" %} @@ -220,10 +249,9 @@ An alert dialog box is used to display errors, warnings, or informational messag | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} diff --git a/blazor/progress-button/getting-started-webapp.md b/blazor/progress-button/getting-started-webapp.md index e484d8a134..c95db20b41 100644 --- a/blazor/progress-button/getting-started-webapp.md +++ b/blazor/progress-button/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor ProgressButton in Blazor Web App -This section explains how to include the [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -17,21 +17,23 @@ This section explains how to include the [Blazor ProgressButton](https://www.syn ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio -Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the app. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the app +![Create Blazor Web App](images/blazor-create-web-app.png) -To add the ProgressButton 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/). +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +To add the **Blazor ProgressButton** 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, use the following Package Manager commands: +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +Alternatively, run the following commands in the Package Manager Console. {% 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). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full 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 %} @@ -50,15 +52,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code -Create a Blazor Web App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands: +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a Blazor Web App with different interactive modes and locations, see the [render interactive modes guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).. - -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the app +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -- Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project directory that contains the `.csproj` file. -- Run the following commands to install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): +* 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. {% tabs %} @@ -92,20 +92,69 @@ 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 full 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App + +Here's an example of how to add **Blazor ProgressButton** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} -| Interactive render mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** in the client project. | -| Server | Open **~/_Imports.razor** in the `Components` folder. | +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 %} -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in the **~/Program.cs** file(s) of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the interactive render mode is `WebAssembly` or `Auto`, register the service in both **~/Program.cs** files (server and client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -Theme stylesheets and scripts are served via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from the installed NuGet packages. Add the stylesheet reference in the `` and the script at the end of `` in **~/Components/App.razor**: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ Theme stylesheets and scripts are served via [Static Web Assets](https://blazor. ``` -N> For theme reference options, see [Blazor Themes](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 reference approaches, see [Adding script references](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 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. ## Add Syncfusion® Blazor ProgressButton component -Add the Syncfusion Blazor ProgressButton component to a page in the **~Pages/.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the page as shown: +Add the Syncfusion® Blazor ProgressButton component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the interactivity location is `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,16 +250,16 @@ N> If the interactivity location is `Global` and the render mode is `Auto`, `Web {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ProgressButton component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ProgressButton component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %} -N> [View the sample on GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton/BlazorWebApp) +N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton/BlazorWebApp) ## See also -- [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -- [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -- [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -N> Explore the [Blazor ProgressButton example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) to learn how to render and configure the ProgressButton. \ No newline at end of file +N> You can also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button. \ No newline at end of file diff --git a/blazor/query-builder/getting-started-webapp.md b/blazor/query-builder/getting-started-webapp.md index a1f2e104c3..2b8effa8d1 100644 --- a/blazor/query-builder/getting-started-webapp.md +++ b/blazor/query-builder/getting-started-webapp.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor QueryBuilder in Blazor Web App -This section explains how to add the [Blazor Query Builder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. +This section briefly explains about how to include [Blazor QueryBuilder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder. +N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. {% tabcontents %} @@ -23,17 +23,19 @@ N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demo ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App -To add the **Blazor Query Builder** 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor QueryBuilder** 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, run the following commands in the Package Manager Console. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,7 +46,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 a list of 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 %} @@ -56,11 +58,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, run:. +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -72,15 +74,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with different interactive modes and locations, see the [getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -- Press Ctrl+` to open the integrated terminal in Visual Studio Code. -- Ensure you are in the project directory that contains the `.csproj` file. -- Run the following commands to install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): +* 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -94,20 +94,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a list of 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** in the client project. | -| Server | Open **Components/_Imports.razor** in the server project. | +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App + +Here's an example of how to add **Blazor QueryBuilder** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder/) 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.QueryBuilder --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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -118,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces. {% endhighlight %} {% endtabs %} -Now register the Syncfusion® Blazor service in **~/Program.cs** for your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client). +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,30 +205,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` and the script at the end of `` in **~/Components/App.razor** as shown below: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -191,20 +221,19 @@ The theme stylesheet and script are provided via NuGet as [Static Web Assets](ht ``` -N> See [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 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. ## Add Syncfusion® Blazor QueryBuilder component -Add the Syncfusion® Blazor Query Builder component in the **~Pages/.razor** file. If the interactivity location is set to `Per page/component`, specify a render mode at the top of the page as follows: +Add the Syncfusion® Blazor QueryBuilder component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in `App.razor` by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -247,11 +276,11 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in the default web browser. -![Blazor Query Builder Component](./images/blazor-querybuilder-component.png) +![Blazor QueryBuilder Component](./images/blazor-querybuilder-component.png) -N> [View sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder/BlazorWebApp) +N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder/BlazorWebApp) ## See also diff --git a/blazor/radio-button/getting-started-webapp.md b/blazor/radio-button/getting-started-webapp.md index 78ce8edbe5..265156a721 100644 --- a/blazor/radio-button/getting-started-webapp.md +++ b/blazor/radio-button/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor RadioButton Component in Blazor Web App -This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to include the [Blazor RadioButton](https://www.syncfu ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. For WebAssembly or Auto render modes, actions typically apply to the Client project; for Server render mode, actions apply to the Server app. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add the **Blazor RadioButton** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor RadioButton** 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/). -If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, run the following commands in the Package Manager Console. {% 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). 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -Use `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you are in the project 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/), then restore packages. +* 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. {% tabs %} @@ -92,20 +92,69 @@ 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the Client project. | -| Server | Open **~/Components/_Imports.razor** from the Server project. | +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Buttons and Themes NuGet in the App + +Here's an example of how to add **Blazor RadioButton** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) 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. 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 in the `` and the script at the end of the `` in **~/Components/App.razor** as shown: +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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ The theme stylesheet and script are provided via [Static Web Assets](https://bla ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for options 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)). Also see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include scripts used by components via JavaScript interop. +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. ## Add Syncfusion® Blazor RadioButton component -Add the Syncfusion® Blazor RadioButton component in a **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: +Add the Syncfusion® Blazor RadioButton component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -226,7 +255,7 @@ N> If **Interactivity Location** is set to `Global` and the **Render Mode** is ` {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor RadioButton component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor RadioButton component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} diff --git a/blazor/range-slider/getting-started-webapp.md b/blazor/range-slider/getting-started-webapp.md index fdf216c51a..676c4c1654 100644 --- a/blazor/range-slider/getting-started-webapp.md +++ b/blazor/range-slider/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Range Slider in Blazor Web App -This section explains how to add the [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to add the [Blazor Range Slider](https://www.syncfusio ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the **Blazor Range Slider** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Range Slider** 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/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can use the following Package Manager commands. +Alternatively, run the following commands in the Package Manager Console. {% 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). 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, for a Blazor Web App with the `Auto` interactive render mode, run: +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) guidance. - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * 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.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 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. {% tabs %} @@ -92,20 +92,69 @@ 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 %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project. | -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder. | +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +Here's an example of how to add **Blazor Range Slider** 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +203,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. In that case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,20 +219,19 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional theme options (such as Bootstrap 5, Fluent, or Material) and referencing 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 reference approaches, see [Adding script references](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 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. ## Add Syncfusion® Blazor Range Slider component -Add the Syncfusion® Blazor Range Slider component in the **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Range Slider component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -223,7 +252,7 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Range Slider component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Range Slider component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VthfZWAZKrFqBOlr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Slider Component](images/blazor-rangeslider.gif)" %} diff --git a/blazor/rating/getting-started-webapp.md b/blazor/rating/getting-started-webapp.md index 9b80a68519..828ba040eb 100644 --- a/blazor/rating/getting-started-webapp.md +++ b/blazor/rating/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Rating in Blazor Web App -This section explains how to add the Blazor Rating component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor Rating](https://www.syncfusion.com/blazor-components/blazor-rating) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,19 @@ This section explains how to add the Blazor Rating component to a Blazor Web App ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. + +![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add the **Blazor Rating** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Rating** 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/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands. +Alternatively, run the following commands in the Package Manager Console. {% 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. 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 %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, for a Blazor Web App with the `Auto` interactive render mode, run: +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +72,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with different interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) guidance. - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure the terminal is open in the project directory that contains the `.csproj` file. -* 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 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. {% tabs %} @@ -92,20 +92,69 @@ 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. +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 %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | -| Server | Open **~/_Imports.razor** located in the `Components` folder. | +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Auto +cd BlazorApp +cd BlazorApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App + +Here's an example of how to add **Blazor Rating** 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. + +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% 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 %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,30 +203,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In that case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -189,20 +219,19 @@ The theme stylesheet and script are provided via NuGet as [Static Web Assets](ht ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional theme options (such as Fluent or Bootstrap 5) and referencing 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 reference approaches, see [Adding script references](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 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. ## Add Syncfusion® Blazor Rating component -Add the Syncfusion® Blazor Rating component in a **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as shown: +Add the Syncfusion® Blazor Rating component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +250,7 @@ N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Aut {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor Rating component will render in the default browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rating component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %} @@ -239,4 +268,4 @@ Set the rating using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusio {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Rating/BlazorWebApp). \ No newline at end of file +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Rating/BlazorWebApp). diff --git a/blazor/rich-text-editor/getting-started-webapp.md b/blazor/rich-text-editor/getting-started-webapp.md index 921891040f..212d2c2af8 100644 --- a/blazor/rich-text-editor/getting-started-webapp.md +++ b/blazor/rich-text-editor/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Rich Text Editor in Blazor Web App -This section explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **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,9 +23,9 @@ This section explains how to add the [Blazor Rich Text Editor](https://www.syncf ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -33,9 +33,9 @@ Configure the appropriate [Interactive render mode](https://learn.microsoft.com/ To add the **Blazor Rich Text Editor** 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.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor NuGet packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, use the following Package Manager commands: +Alternatively, run the following commands in the Package Manager Console. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -58,9 +58,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up the Blazor Web App. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -76,7 +76,7 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor Rich Text Editor and Themes NuGet in the App -If the app uses `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the Client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory contains your `.csproj` file. @@ -102,7 +102,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Install the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in your terminal or command prompt: +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,9 +116,9 @@ dotnet --version Run the following command to create a new Blazor Web App. For detailed instructions, refer to [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up the project. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, to create a Blazor Web App with the `Auto` interactive render mode, run: +For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,13 +130,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App in a directory named `BlazorApp` at the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor Rich Text Editor and Themes NuGet in the App -Use the following commands to add the **Blazor Rich Text Editor** component to the application by installing [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. For details, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). +Here's an example of how to add **Blazor Rich Text Editor** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) 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. -If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor NuGet packages in the Client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -171,7 +171,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -259,7 +259,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rich Text Editor component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rich Text Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhfZMqXAUqtaOyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}