From 060edff4f8a4d793b5f192eb5993e84090e89b29 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Thu, 2 Jan 2025 18:51:26 +0530 Subject: [PATCH 1/2] 927482: updated Blazor Web App UG content for Blazor components --- .../numeric-textbox/getting-started-webapp.md | 73 ++++++++++++++-- blazor/otp-input/getting-started-webapp.md | 73 ++++++++++++++-- blazor/pager/getting-started-webapp.md | 73 ++++++++++++++-- blazor/pdfviewer-2/getting-started/web-app.md | 18 +++- blazor/pivot-table/getting-started-webapp.md | 73 ++++++++++++++-- .../getting-started-webapp.md | 75 ++++++++++++++-- blazor/progress-bar/getting-started-webapp.md | 73 ++++++++++++++-- .../progress-button/getting-started-webapp.md | 73 ++++++++++++++-- .../query-builder/getting-started-webapp.md | 73 ++++++++++++++-- blazor/radio-button/getting-started-webapp.md | 73 ++++++++++++++-- .../range-selector/getting-started-webapp.md | 73 ++++++++++++++-- blazor/range-slider/getting-started-webapp.md | 73 ++++++++++++++-- blazor/rating/getting-started-webapp.md | 73 ++++++++++++++-- blazor/ribbon/getting-started-webapp.md | 73 ++++++++++++++-- .../getting-started-webapp.md | 73 ++++++++++++++-- blazor/sankey/getting-started-with-web-app.md | 85 +++++++++++++++---- blazor/scheduler/getting-started-webapp.md | 73 ++++++++++++++-- blazor/sidebar/getting-started-webapp.md | 73 ++++++++++++++-- blazor/signature/getting-started-webapp.md | 73 ++++++++++++++-- blazor/skeleton/getting-started-webapp.md | 73 ++++++++++++++-- blazor/smart-paste/getting-started-webapp.md | 11 ++- .../smart-textarea/getting-started-webapp.md | 11 ++- blazor/smith-chart/getting-started-webapp.md | 73 ++++++++++++++-- blazor/sparkline/getting-started-webapp.md | 73 ++++++++++++++-- blazor/speeddial/getting-started-webapp.md | 73 ++++++++++++++-- blazor/spinner/getting-started-webapp.md | 73 ++++++++++++++-- blazor/split-button/getting-started-webapp.md | 73 ++++++++++++++-- blazor/splitter/getting-started-webapp.md | 73 ++++++++++++++-- blazor/stepper/getting-started-webapp.md | 73 ++++++++++++++-- blazor/stock-chart/getting-started-webapp.md | 73 ++++++++++++++-- blazor/tabs/getting-started-webapp.md | 73 ++++++++++++++-- blazor/textarea/getting-started-webapp.md | 73 ++++++++++++++-- blazor/textbox/getting-started-webapp.md | 73 ++++++++++++++-- blazor/timeline/getting-started-webapp.md | 73 ++++++++++++++-- blazor/timepicker/getting-started-webapp.md | 73 ++++++++++++++-- blazor/toast/getting-started-webapp.md | 73 ++++++++++++++-- .../getting-started-webapp.md | 73 ++++++++++++++-- blazor/toolbar/getting-started-webapp.md | 73 ++++++++++++++-- blazor/tooltip/getting-started-webapp.md | 73 ++++++++++++++-- blazor/treegrid/getting-started-webapp.md | 73 ++++++++++++++-- blazor/treemap/getting-started-webapp.md | 73 ++++++++++++++-- blazor/treeview/getting-started-webapp.md | 73 ++++++++++++++-- 42 files changed, 2613 insertions(+), 288 deletions(-) diff --git a/blazor/numeric-textbox/getting-started-webapp.md b/blazor/numeric-textbox/getting-started-webapp.md index d475c5e893..d538555aec 100644 --- a/blazor/numeric-textbox/getting-started-webapp.md +++ b/blazor/numeric-textbox/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/otp-input/getting-started-webapp.md b/blazor/otp-input/getting-started-webapp.md index 6683bd5488..a10c251d77 100644 --- a/blazor/otp-input/getting-started-webapp.md +++ b/blazor/otp-input/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/pager/getting-started-webapp.md b/blazor/pager/getting-started-webapp.md index 3736744ddd..8967c80a82 100644 --- a/blazor/pager/getting-started-webapp.md +++ b/blazor/pager/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Here, the Pager component is integrated with the ListView component. So, the first ListView component is added in the **~Pages/.razor** file. Refer [here](https://blazor.syncfusion.com/documentation/listview/getting-started) to create the Syncfusion® ListView component.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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/pdfviewer-2/getting-started/web-app.md b/blazor/pdfviewer-2/getting-started/web-app.md index 9f78bbcd56..cc0b9e751a 100644 --- a/blazor/pdfviewer-2/getting-started/web-app.md +++ b/blazor/pdfviewer-2/getting-started/web-app.md @@ -61,6 +61,11 @@ The above configuration is required only for .NET 9 projects. Please ensure you ## Register Syncfusion® Blazor Service +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| + * In the **~/_Imports.razor** file, add the following namespaces: {% tabs %} @@ -74,7 +79,9 @@ The above configuration is required only for .NET 9 projects. Please ensure you * Register the Syncfusion® Blazor Service in the program.cs file of your Blazor Web App. -If you select an Interactive render mode as `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`, 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 `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=".NET 9 & .NET 8 (~/Program.cs) Server" hl_lines="2 9 11 13" %} @@ -204,6 +211,15 @@ Add the following stylesheet and script to the head section of the **~/Component Add the Syncfusion® PDF Viewer (Next Gen) 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/pivot-table/getting-started-webapp.md b/blazor/pivot-table/getting-started-webapp.md index 9366c790de..17bd8b83c2 100644 --- a/blazor/pivot-table/getting-started-webapp.md +++ b/blazor/pivot-table/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.PivotView -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor pivot Table 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md index f79de9b229..ca43693fd5 100644 --- a/blazor/predefined-dialogs/getting-started-webapp.md +++ b/blazor/predefined-dialogs/getting-started-webapp.md @@ -42,30 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; -using Syncfusion.Blazor.Popups; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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(); -builder.Services.AddScoped(); + +var app = builder.Build(); .... -``` +{% endhighlight %} +{% endtabs %} ## Add stylesheet and script resources @@ -107,6 +155,15 @@ Once you added `SfDialogService` and `SfDialogProvider`, you can open predefined An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog is displayed along with the `OK` button. When user clicks on `OK` button, alert dialog will get closed. 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/progress-bar/getting-started-webapp.md b/blazor/progress-bar/getting-started-webapp.md index ff35fee4f8..373a81cbf3 100644 --- a/blazor/progress-bar/getting-started-webapp.md +++ b/blazor/progress-bar/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ProgressBar` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ProgressBar` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.ProgressBar -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ProgressBar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/progress-button/getting-started-webapp.md b/blazor/progress-button/getting-started-webapp.md index 3506d150e8..9e01fd602a 100644 --- a/blazor/progress-button/getting-started-webapp.md +++ b/blazor/progress-button/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ProgressButton 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/query-builder/getting-started-webapp.md b/blazor/query-builder/getting-started-webapp.md index afa6a5ee9b..3822fc80ee 100644 --- a/blazor/query-builder/getting-started-webapp.md +++ b/blazor/query-builder/getting-started-webapp.md @@ -44,28 +44,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.QueryBuilder -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -89,6 +139,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor QueryBuilder 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/radio-button/getting-started-webapp.md b/blazor/radio-button/getting-started-webapp.md index 102b49e01f..6e3a1bc0f9 100644 --- a/blazor/radio-button/getting-started-webapp.md +++ b/blazor/radio-button/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor RadioButton 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/range-selector/getting-started-webapp.md b/blazor/range-selector/getting-started-webapp.md index da2b63097a..eb59258cf9 100644 --- a/blazor/range-selector/getting-started-webapp.md +++ b/blazor/range-selector/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Range Selector 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/range-slider/getting-started-webapp.md b/blazor/range-slider/getting-started-webapp.md index 19e6982d29..0627dc8334 100644 --- a/blazor/range-slider/getting-started-webapp.md +++ b/blazor/range-slider/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Range Slider 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/rating/getting-started-webapp.md b/blazor/rating/getting-started-webapp.md index be6d3c0483..882dd0999d 100644 --- a/blazor/rating/getting-started-webapp.md +++ b/blazor/rating/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Rating 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md index 5fc650d97f..6362f98d0d 100644 --- a/blazor/ribbon/getting-started-webapp.md +++ b/blazor/ribbon/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o ## Register Syncfusion Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Ribbon -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion Blazor Ribbon 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/rich-text-editor/getting-started-webapp.md b/blazor/rich-text-editor/getting-started-webapp.md index 5174298c49..f4dba5a713 100644 --- a/blazor/rich-text-editor/getting-started-webapp.md +++ b/blazor/rich-text-editor/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.RichTextEditor -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Rich Text Editor 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/sankey/getting-started-with-web-app.md b/blazor/sankey/getting-started-with-web-app.md index 293eea37a6..c7127a9638 100644 --- a/blazor/sankey/getting-started-with-web-app.md +++ b/blazor/sankey/getting-started-with-web-app.md @@ -19,9 +19,9 @@ This section briefly explains about how to include [Blazor Sankey](https://www.s ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Syncfusion Blazor Sankey NuGet in the App +## Install Syncfusion® Blazor Sankey NuGet in the App To add **Blazor Sankey Diagram** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages). Alternatively, you can utilize the following package manager command to achieve the same. @@ -33,31 +33,82 @@ Install-Package Syncfusion.Blazor.Sankey -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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -## Register Syncfusion Blazor Service +## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Sankey -``` -Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. +{% endhighlight %} +{% endtabs %} -If you select an **Interactive render mode** as `WebAssembly` or `Auto (Server and WebAssembly)`, you need to register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -```cshtml +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. -.... +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -74,7 +125,7 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Blazor Sankey Diagram -Add the Syncfusion Blazor Sankey Diagram in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Sankey Diagram in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -128,7 +179,7 @@ Add the Syncfusion Blazor Sankey Diagram in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Sankey Diagram in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Sankey Diagram in your default web browser. ![Blazor Sankey Diagram](images/getting-started/blazor-sankey.png) @@ -253,6 +304,6 @@ You can use legend for the sankey diagram by setting the `Visible` property to * ## 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) diff --git a/blazor/scheduler/getting-started-webapp.md b/blazor/scheduler/getting-started-webapp.md index 079a1d9243..974be6ef99 100644 --- a/blazor/scheduler/getting-started-webapp.md +++ b/blazor/scheduler/getting-started-webapp.md @@ -47,28 +47,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Schedule -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -92,6 +142,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Scheduler 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/sidebar/getting-started-webapp.md b/blazor/sidebar/getting-started-webapp.md index fd6efd4f99..e0ac348f39 100644 --- a/blazor/sidebar/getting-started-webapp.md +++ b/blazor/sidebar/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Sidebar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/signature/getting-started-webapp.md b/blazor/signature/getting-started-webapp.md index af1a483c39..04775a548a 100644 --- a/blazor/signature/getting-started-webapp.md +++ b/blazor/signature/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Signature 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/skeleton/getting-started-webapp.md b/blazor/skeleton/getting-started-webapp.md index 26c45e89b1..03992656a2 100644 --- a/blazor/skeleton/getting-started-webapp.md +++ b/blazor/skeleton/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Skeleton 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md index 3418a6df88..6c4169c08a 100644 --- a/blazor/smart-paste/getting-started-webapp.md +++ b/blazor/smart-paste/getting-started-webapp.md @@ -46,7 +46,12 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| + +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace . {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -59,6 +64,10 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio Now, 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 `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="Blazor Server App" hl_lines="3 10" %} diff --git a/blazor/smart-textarea/getting-started-webapp.md b/blazor/smart-textarea/getting-started-webapp.md index cb5e5d71d4..f01c0fc54d 100644 --- a/blazor/smart-textarea/getting-started-webapp.md +++ b/blazor/smart-textarea/getting-started-webapp.md @@ -47,7 +47,12 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| + +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -60,6 +65,10 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio Now, 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 `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="Blazor Server App" hl_lines="3 10" %} diff --git a/blazor/smith-chart/getting-started-webapp.md b/blazor/smith-chart/getting-started-webapp.md index d43b6739b3..3c619a82e0 100644 --- a/blazor/smith-chart/getting-started-webapp.md +++ b/blazor/smith-chart/getting-started-webapp.md @@ -41,28 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -81,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor Smith Chart 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/sparkline/getting-started-webapp.md b/blazor/sparkline/getting-started-webapp.md index 2c051ee5f8..6cd223bafc 100644 --- a/blazor/sparkline/getting-started-webapp.md +++ b/blazor/sparkline/getting-started-webapp.md @@ -41,28 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -81,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor Sparkline 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/speeddial/getting-started-webapp.md b/blazor/speeddial/getting-started-webapp.md index aee96cadf9..7b891b8538 100644 --- a/blazor/speeddial/getting-started-webapp.md +++ b/blazor/speeddial/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -88,6 +138,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor SpeedDial 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/spinner/getting-started-webapp.md b/blazor/spinner/getting-started-webapp.md index ad852c6c26..c074bbf5fe 100644 --- a/blazor/spinner/getting-started-webapp.md +++ b/blazor/spinner/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spinner` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spinner` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spinner -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Spinner component with Syncfusion® Blazor Button 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/split-button/getting-started-webapp.md b/blazor/split-button/getting-started-webapp.md index 24d9a8f252..3335f86a0b 100644 --- a/blazor/split-button/getting-started-webapp.md +++ b/blazor/split-button/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Split Button 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/splitter/getting-started-webapp.md b/blazor/splitter/getting-started-webapp.md index ab42291987..14bd0f7f22 100644 --- a/blazor/splitter/getting-started-webapp.md +++ b/blazor/splitter/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Layouts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Splitter 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/stepper/getting-started-webapp.md b/blazor/stepper/getting-started-webapp.md index d2bb4c00a0..2057236434 100644 --- a/blazor/stepper/getting-started-webapp.md +++ b/blazor/stepper/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Stepper 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/stock-chart/getting-started-webapp.md b/blazor/stock-chart/getting-started-webapp.md index 29bcb4c871..e2cddfee0a 100644 --- a/blazor/stock-chart/getting-started-webapp.md +++ b/blazor/stock-chart/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Stock Chart 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/tabs/getting-started-webapp.md b/blazor/tabs/getting-started-webapp.md index 5350b1e19e..7bf5f8391f 100644 --- a/blazor/tabs/getting-started-webapp.md +++ b/blazor/tabs/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Tabs 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/textarea/getting-started-webapp.md b/blazor/textarea/getting-started-webapp.md index b55cf1288d..483202b181 100644 --- a/blazor/textarea/getting-started-webapp.md +++ b/blazor/textarea/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor TextArea 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/textbox/getting-started-webapp.md b/blazor/textbox/getting-started-webapp.md index 6218f99b25..28a78fede2 100644 --- a/blazor/textbox/getting-started-webapp.md +++ b/blazor/textbox/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor TextBox 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/timeline/getting-started-webapp.md b/blazor/timeline/getting-started-webapp.md index 76f8384b7c..dfde7ceff1 100644 --- a/blazor/timeline/getting-started-webapp.md +++ b/blazor/timeline/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Layouts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Timeline 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/timepicker/getting-started-webapp.md b/blazor/timepicker/getting-started-webapp.md index 805830ac3d..a3b7146629 100644 --- a/blazor/timepicker/getting-started-webapp.md +++ b/blazor/timepicker/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor TimePicker 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md index a947581e9d..c7713276f6 100644 --- a/blazor/toast/getting-started-webapp.md +++ b/blazor/toast/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Toast 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/toggle-switch-button/getting-started-webapp.md b/blazor/toggle-switch-button/getting-started-webapp.md index 94431a1bd4..23b701e471 100644 --- a/blazor/toggle-switch-button/getting-started-webapp.md +++ b/blazor/toggle-switch-button/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Toggle Switch Button 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/toolbar/getting-started-webapp.md b/blazor/toolbar/getting-started-webapp.md index 5db3489f79..a4bcdf9bae 100644 --- a/blazor/toolbar/getting-started-webapp.md +++ b/blazor/toolbar/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Toolbar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/tooltip/getting-started-webapp.md b/blazor/tooltip/getting-started-webapp.md index 7d25b2d83a..cdac2e919d 100644 --- a/blazor/tooltip/getting-started-webapp.md +++ b/blazor/tooltip/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Tooltip component with the Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 8183fcd1c3..efd0daa718 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -46,28 +46,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.TreeGrid -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -91,6 +141,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor TreeGrid 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/treemap/getting-started-webapp.md b/blazor/treemap/getting-started-webapp.md index 0d9e77dc54..c64ddc722c 100644 --- a/blazor/treemap/getting-started-webapp.md +++ b/blazor/treemap/getting-started-webapp.md @@ -41,28 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.TreeMap -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -81,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor TreeMap 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/treeview/getting-started-webapp.md b/blazor/treeview/getting-started-webapp.md index 894cb060b8..760ac053bc 100644 --- a/blazor/treeview/getting-started-webapp.md +++ b/blazor/treeview/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor TreeView 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: +| 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. + {% tabs %} {% highlight razor %} From bf1a861a884714b407d7ad517180207b72ceddcc Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Fri, 3 Jan 2025 13:48:28 +0530 Subject: [PATCH 2/2] 930500: updated Blazor Web App UG content for Blazor components --- .../3D-chart/getting-started-with-web-app.md | 74 +++++++++++++++-- .../accordion/getting-started-with-web-app.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 73 +++++++++++++++-- .../ai-assistview/getting-started-webapp.md | 73 +++++++++++++++-- blazor/appbar/getting-started-with-web-app.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 73 +++++++++++++++-- blazor/avatar/getting-started-with-web-app.md | 9 ++ blazor/badge/getting-started-with-web-app.md | 9 ++ .../barcode/getting-started-with-web-app.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 73 +++++++++++++++-- blazor/button/getting-started-with-web-app.md | 73 +++++++++++++++-- .../calendar/getting-started-with-web-app.md | 73 +++++++++++++++-- blazor/card/getting-started-with-web-app.md | 74 +++++++++++++++-- .../carousel/getting-started-with-web-app.md | 74 +++++++++++++++-- blazor/chart/getting-started-with-web-app.md | 74 +++++++++++++++-- blazor/chat-ui/getting-started-webapp.md | 75 +++++++++++++++-- .../check-box/getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/chip/getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../combobox/getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 81 +++++++++++++++--- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../data-form/getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/data/getting-started-with-web-app.md | 70 ++++++++++++++-- .../datagrid/getting-started-with-web-app.md | 76 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../diagram/getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/dialog/getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started/web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/getting-started/blazor-web-app.md | 78 ++++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/kanban/getting-started-with-web-app.md | 77 +++++++++++++++-- blazor/linear-gauge/getting-started-webapp.md | 73 +++++++++++++++-- blazor/listbox/getting-started-webapp.md | 73 +++++++++++++++-- blazor/listview/getting-started-webapp.md | 73 +++++++++++++++-- blazor/maps/getting-started-webapp.md | 73 +++++++++++++++-- blazor/media-query/getting-started-webapp.md | 73 +++++++++++++++-- blazor/mention/getting-started-webapp.md | 82 +++++++++++++++++-- blazor/menu-bar/getting-started-webapp.md | 73 +++++++++++++++-- blazor/message/getting-started-webapp.md | 73 +++++++++++++++-- .../getting-started-with-web-app.md | 77 +++++++++++++++-- .../getting-started-webapp.md | 73 +++++++++++++++-- 57 files changed, 3772 insertions(+), 393 deletions(-) diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index c95787e7f1..9b9e63b227 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -41,27 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D -``` + +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto (Server and WebAssembly)`, 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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -80,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor 3D Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index a65e4c2949..abd90c6b5f 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Accordion 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index f921ef8f66..90acf9fcc0 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Accumulation Chart 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md index 9fe9414a4a..5787be5ddc 100644 --- a/blazor/ai-assistview/getting-started-webapp.md +++ b/blazor/ai-assistview/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.InteractiveChat -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor AI AssistView 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index cc55e443fb..739030a507 100644 --- a/blazor/appbar/getting-started-with-web-app.md +++ b/blazor/appbar/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor AppBar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index dcb69fe597..ff0287fefb 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor AutoComplete 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index ff5f6bee5e..a9275c1a2c 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -56,6 +56,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Avatar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index a7fe53d83e..3277695606 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -56,6 +56,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Badge 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 53f83dd369..96d3f83fb2 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.BarcodeGenerator -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Barcode 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index bcf97c559f..d5229f545f 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Breadcrumb 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 89f83545a8..e1b6dc1773 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -41,28 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -81,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor Bullet Chart 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index a2de8995a8..71b151d20c 100644 --- a/blazor/button-group/getting-started-with-web-app.md +++ b/blazor/button-group/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ButtonGroup 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index f405ef6b30..36636c16db 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Button 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index 778815b724..ba2d23090e 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -``` cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto (Server and WebAssembly)`, 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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Calendar component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 5270fccbbe..ea43652630 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -42,27 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Cards -``` + +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto (Server and WebAssembly)`, 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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -86,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Card component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md index 6747f16ae8..ac3403234e 100644 --- a/blazor/carousel/getting-started-with-web-app.md +++ b/blazor/carousel/getting-started-with-web-app.md @@ -42,27 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` + +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -86,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Carousel component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 4bdc8134fc..9d2a561cb7 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -41,27 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts -``` + +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto (Server and WebAssembly)`, 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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -80,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index acef877432..70e7a558a5 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -40,30 +40,80 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} 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. -## Register Syncfusion Blazor Service +## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.InteractiveChat -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion Blazor Chat UI 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index cd7a5ceee1..11151dd30c 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor CheckBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md index e60804482a..7dc9165d51 100644 --- a/blazor/chip/getting-started-with-web-app.md +++ b/blazor/chip/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} -.... +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Chip component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md index 9e30f29cd5..83ddc1a3bf 100644 --- a/blazor/circular-gauge/getting-started-with-web-app.md +++ b/blazor/circular-gauge/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.CircularGauge -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor CircularGauge component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index bddebe9ab4..6a778e3a2a 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ColorPicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 222c77d541..aad50edcce 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ComboBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md index 75cd7f5ad1..9a5e8304cd 100644 --- a/blazor/context-menu/getting-started-with-web-app.md +++ b/blazor/context-menu/getting-started-with-web-app.md @@ -17,11 +17,7 @@ This section briefly explains about how to include [Blazor ContextMenu](https:// ## Create a new Blazor Web App -<<<<<<< HEAD -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) 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-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ->>>>>>> remotes/origin/hotfix/hotfix-v27.2.2 You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. @@ -46,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ContextMenu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index b5592b773a..ba75b1a499 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Layouts -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index b7b1187f0d..381c273f82 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DataForm -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DataForm component in `.razor` file inside the `Pages` folder. If an interactivity location as Per `page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md index 8873294571..a213f826a5 100644 --- a/blazor/data/getting-started-with-web-app.md +++ b/blazor/data/getting-started-with-web-app.md @@ -21,7 +21,7 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. -## Install Syncfusion® Blazor Datas and Themes NuGet in the Blazor Web App +## Install Syncfusion® Blazor Data and Themes NuGet in the Blazor Web App To add **Blazor DataManager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Data -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} -.... +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 1130ad667e..aeecdcf963 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -42,25 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. +{% endhighlight %} +{% endtabs %} -```cshtml +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -84,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DataGrid component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index ef22657b35..909c119501 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DatePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index d863bb5e64..cadaec9020 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DateRangePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index 47bb3eb960..bf8b4b7a07 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DateTimePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index 7cbb029ae2..8e8c139c85 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Diagram component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 1e5055c1bb..752e27d26d 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Popups -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Dialog component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/document-editor/getting-started/web-app.md b/blazor/document-editor/getting-started/web-app.md index c9517f32e0..345ab638d8 100644 --- a/blazor/document-editor/getting-started/web-app.md +++ b/blazor/document-editor/getting-started/web-app.md @@ -42,26 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DocumentEditor` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DocumentEditor` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DocumentEditor -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... -builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; }); -.... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -85,6 +137,13 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DocumentEditor component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| Interactivity location | RenderMode | Code | +| --- | --- | --- | +| Per page/component | Auto | @rendermode InteractiveAuto | +| | WebAssembly | @rendermode InteractiveWebAssembly | +| | Server | @rendermode InteractiveServer | +| | None | --- | + {% tabs %} {% highlight razor %} 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 22e3d758d8..8e19c61d57 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SplitButtons -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DropDown Menu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index 4da992d5d9..056ff764ad 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor DropDown List component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/dropdown-tree/getting-started-with-web-app.md b/blazor/dropdown-tree/getting-started-with-web-app.md index 54ca0a5511..7e685e6d85 100644 --- a/blazor/dropdown-tree/getting-started-with-web-app.md +++ b/blazor/dropdown-tree/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Dropdown Tree component in `.razor` file inside the `Pages` folder. The `TValue` parameter specifies the type for the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_Value) property, while `TItem` specifies the model class for the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DropDownTreeField-1.html#Syncfusion_Blazor_Navigations_DropDownTreeField_1_DataSource) property. 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/file-manager/getting-started-with-web-app.md b/blazor/file-manager/getting-started-with-web-app.md index d69a8c24fc..2c2a3c2a31 100644 --- a/blazor/file-manager/getting-started-with-web-app.md +++ b/blazor/file-manager/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.FileManager -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} -.... +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor FileManager component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 2a19cdee81..137dc5c548 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor File Upload component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} 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 4a30fb6c1c..5c87f66ba5 100644 --- a/blazor/floating-action-button/getting-started-with-web-app.md +++ b/blazor/floating-action-button/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Buttons -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Floating Action Button component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index 9efcd24c22..968c160156 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Gantt Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md index 37fbb72fd6..4195f48bdc 100644 --- a/blazor/getting-started/blazor-web-app.md +++ b/blazor/getting-started/blazor-web-app.md @@ -229,25 +229,80 @@ N> Syncfusion® Blazor components are availa ### Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +Now, 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 **Interactive Render Mode** as `WebAssembly` or `Auto`, + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -272,6 +327,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Accordion component in the **~/Components/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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/heatmap-chart/getting-started-with-web-app.md b/blazor/heatmap-chart/getting-started-with-web-app.md index e6092f5123..b921542005 100644 --- a/blazor/heatmap-chart/getting-started-with-web-app.md +++ b/blazor/heatmap-chart/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.HeatMap -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor HeatMap Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/image-editor/getting-started-with-web-app.md b/blazor/image-editor/getting-started-with-web-app.md index a3ba7e95ea..e9df59685e 100644 --- a/blazor/image-editor/getting-started-with-web-app.md +++ b/blazor/image-editor/getting-started-with-web-app.md @@ -46,24 +46,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.ImageEditor -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +141,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Image Editor component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} 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 ee19eaf8e4..e66222faf1 100644 --- a/blazor/in-place-editor/getting-started-with-web-app.md +++ b/blazor/in-place-editor/getting-started-with-web-app.md @@ -44,24 +44,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.InPlaceEditor -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -85,6 +139,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor In-place Editor component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/input-mask/getting-started-with-web-app.md b/blazor/input-mask/getting-started-with-web-app.md index e0641c906c..88705e5a2f 100644 --- a/blazor/input-mask/getting-started-with-web-app.md +++ b/blazor/input-mask/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor MaskedTextBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md index 6387fd0049..4ae3381b9f 100644 --- a/blazor/kanban/getting-started-with-web-app.md +++ b/blazor/kanban/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Kanban -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Kanban component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/linear-gauge/getting-started-webapp.md b/blazor/linear-gauge/getting-started-webapp.md index 16e4ea2711..1fe7ea7080 100644 --- a/blazor/linear-gauge/getting-started-webapp.md +++ b/blazor/linear-gauge/getting-started-webapp.md @@ -43,28 +43,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.LinearGauge -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -83,6 +133,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor LinearGauge 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md index 546c441d97..ead2fd4f16 100644 --- a/blazor/listbox/getting-started-webapp.md +++ b/blazor/listbox/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ListBox 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/listview/getting-started-webapp.md b/blazor/listview/getting-started-webapp.md index ac1182ee36..864f67ee83 100644 --- a/blazor/listview/getting-started-webapp.md +++ b/blazor/listview/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Lists` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Lists` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Lists -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor ListView 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md index 1e9f2b8096..58aca3716f 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -41,28 +41,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps ` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps ` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Maps -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 script resources @@ -81,6 +131,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen Add the Syncfusion® Blazor Maps 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/media-query/getting-started-webapp.md b/blazor/media-query/getting-started-webapp.md index 9e1c1400dc..0cc654f14f 100644 --- a/blazor/media-query/getting-started-webapp.md +++ b/blazor/media-query/getting-started-webapp.md @@ -42,27 +42,77 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -86,6 +136,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Media Query 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/mention/getting-started-webapp.md b/blazor/mention/getting-started-webapp.md index 011035fb51..b1aac4b3e9 100644 --- a/blazor/mention/getting-started-webapp.md +++ b/blazor/mention/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,24 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Mention 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: +| 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. + +{% tabs %} +{% highlight razor %} + +@* desired render mode define here *@ +@rendermode InteractiveAuto + +{% endhighlight %} +{% endtabs %} + {% tabs %} {% highlight razor %} diff --git a/blazor/menu-bar/getting-started-webapp.md b/blazor/menu-bar/getting-started-webapp.md index 133445b4a5..e102c07909 100644 --- a/blazor/menu-bar/getting-started-webapp.md +++ b/blazor/menu-bar/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Menu Bar 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/message/getting-started-webapp.md b/blazor/message/getting-started-webapp.md index 50da728f51..32bbd3aa53 100644 --- a/blazor/message/getting-started-webapp.md +++ b/blazor/message/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Message 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: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/multicolumn-combobox/getting-started-with-web-app.md b/blazor/multicolumn-combobox/getting-started-with-web-app.md index 056bacd265..35932c7504 100644 --- a/blazor/multicolumn-combobox/getting-started-with-web-app.md +++ b/blazor/multicolumn-combobox/getting-started-with-web-app.md @@ -42,24 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace. +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.MultiColumnComboBox -``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. -```cshtml +{% endhighlight %} +{% endtabs %} + +Now, 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. + +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); + +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 @@ -83,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor MultiColumn ComboBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +| 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. + {% tabs %} {% highlight razor %} diff --git a/blazor/multiselect-dropdown/getting-started-webapp.md b/blazor/multiselect-dropdown/getting-started-webapp.md index 3d76fb63c8..898d1d7b13 100644 --- a/blazor/multiselect-dropdown/getting-started-webapp.md +++ b/blazor/multiselect-dropdown/getting-started-webapp.md @@ -42,28 +42,78 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace . +| Interactive Render Mode | Description | +| -- | -- | +| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| +| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -```cshtml +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns -``` +{% endhighlight %} +{% endtabs %} Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If you select an **Interactive render mode** as `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`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. -```cshtml +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -.... +... +... using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... + +{% endhighlight %} +{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} + +... +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +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 @@ -87,6 +137,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor MultiSelect DropDown 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: +| 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. + {% tabs %} {% highlight razor %}