Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions blazor/getting-started/blazor-core-hosted-cli.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Blazor ASP.NET Core Hosted App in .NET CLI - Syncfusion Blazor
description: Check out the documentation for getting started with Blazor ASP.NET Core Hosted WebAssembly App and Syncfusion Blazor Components in .NET CLI and much more.
title: Blazor ASP.NET Core Hosted App in .NET CLI | Syncfusion®
description: Check out the documentation for getting started with Blazor ASP.NET Core Hosted WebAssembly App and Blazor Components in .NET CLI and much more.
platform: Blazor
component: Common
documentation: ug
Expand Down Expand Up @@ -40,7 +40,7 @@ This command creates new Blazor WebAssembly App project and places it in a new d

N> If you have installed multiple SDK versions and need any specific framework version (.net6.0/.net7.0) project, then add `-f` flag along with `dotnet new blazorwasm` comment. Refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) for the available options.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
## Install Blazor Calendars and Themes NuGet in the App

Here's an example of how to add **Blazor Calendar** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.

Expand All @@ -54,9 +54,9 @@ dotnet restore
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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> 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<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Blazor Service

Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.

Expand All @@ -67,7 +67,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio

```

Now, Open the **~/Program.cs** file and register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the client web app.
Now, Open the **~/Program.cs** file and register the Blazor Service in the client web app.

{% tabs %}
{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
Expand Down Expand Up @@ -104,9 +104,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Index.razor** file.
Add the Blazor Calendar component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand Down
20 changes: 10 additions & 10 deletions blazor/getting-started/blazor-core-hosted.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Blazor ASP.NET Core Hosted App in Visual Studio - Syncfusion Blazor
description: Check out the documentation for getting started with Blazor ASP.NET Core Hosted WebAssembly App and Syncfusion Blazor Components in Visual Studio.
title: Blazor ASP.NET Core Hosted App in Visual Studio | Syncfusion®
description: Check out the documentation for getting started with Blazor ASP.NET Core Hosted WebAssembly App and Blazor Components in Visual Studio.
platform: Blazor
component: Common
documentation: ug
Expand All @@ -19,9 +19,9 @@ This article provides a step-by-step instructions for building Blazor ASP.NET Co

## Create a Blazor ASP.NET Core Hosted WebAssembly App in Visual Studio

You can create Blazor ASP.NET Core Hosted WebAssembly app using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
You can create Blazor ASP.NET Core Hosted WebAssembly app using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
## Install Blazor Calendars and Themes NuGet in the App

Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.

Expand All @@ -34,9 +34,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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> 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<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Blazor Service

Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.

Expand All @@ -47,7 +47,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio

```

Now, Open the **~/Program.cs** file and register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the client web app.
Now, Open the **~/Program.cs** file and register the Blazor Service in the client web app.

{% tabs %}
{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 10" %}
Expand Down Expand Up @@ -84,9 +84,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Index.razor** file.
Add the Blazor Calendar component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand All @@ -96,7 +96,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar compone
{% endhighlight %}
{% endtabs %}

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in your default web browser.
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Calendar component in your default web browser.

![Blazor Calendar Component](images/core-hosted/browser-output.png)

Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-electron-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Creating a Blazor Desktop App with Electron | Syncfusion
title: Creating a Blazor Desktop App with Electron | Syncfusion®
description: Learn to build a cross-platform desktop app using a Blazor Web App (Server) with Electron integrating Blazor DataGrid.
platform: Blazor
component: Common
Expand Down
18 changes: 9 additions & 9 deletions blazor/getting-started/blazor-server-side-dotnet-cli.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting started - Syncfusion Blazor Server Side App in .NET CLI
description: Check out the documentation for getting started with Syncfusion Blazor Components in Visual Studio using .NET CLI and much more.
title: Getting started with Server Side App in .NET CLI | Syncfusion®
description: Check out the documentation for getting started with Blazor Components in Visual Studio using .NET CLI and much more.
platform: Blazor
component: Common
documentation: ug
---

# Getting Started with Blazor Server Side App in .NET CLI

This article provides a step-by-step instructions for building Blazor Server App with `Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Component` using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet).
This article provides a step-by-step instructions for building Blazor Server App with `Blazor Component` using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet).

## Prerequisites

Expand Down Expand Up @@ -40,7 +40,7 @@ This command creates new Blazor app project and places it in a new directory cal

N> If you have installed multiple SDK versions and need any specific framework version (net6.0/net7.0) project, then add `-f` flag along with `dotnet new blazorserver` comment. Refer [here](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for the available options.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
## Install Blazor Calendars and Themes NuGet in the App

Here's an example of how to add **Blazor Calendar** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.

Expand All @@ -54,9 +54,9 @@ dotnet restore
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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> 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<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Blazor Service

Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.

Expand All @@ -67,7 +67,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio

```

Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App.
Now, register the Blazor Service in the **~/Program.cs** file of your Blazor Server App.

{% tabs %}
{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
Expand Down Expand Up @@ -105,9 +105,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Index.razor** file.
Add the Blazor Calendar component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand Down
18 changes: 9 additions & 9 deletions blazor/getting-started/blazor-server-side-mac.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with Syncfusion Blazor Server Side App in VS for Mac
description: Check out the documentation for getting started with Syncfusion Blazor Components in Visual Studio for Mac and much more.
title: Getting started with Server Side App in VS for Mac | Syncfusion®
description: Check out the documentation for getting started with Blazor Components in Visual Studio for Mac and much more.
platform: Blazor
component: Common
documentation: ug
Expand All @@ -23,13 +23,13 @@ You can create a **Blazor Server App** using Visual Studio for mac in the follow

* [Create a project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=macos)

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages in the App
## Install Blazor packages in the App

Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).

N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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> 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<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Blazor Service

Open **~/_Imports.razor** file and import the following namespace.

Expand All @@ -39,7 +39,7 @@ Open **~/_Imports.razor** file and import the following namespace.
@using Syncfusion.Blazor.Calendars

```
Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App.
Now, register the Blazor Service in the **~/Program.cs** file of your Blazor Server App.

{% tabs %}
{% highlight C# tabtitle="Blazor Server App" hl_lines="1 5" %}
Expand Down Expand Up @@ -70,9 +70,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Index.razor** file.
Add the Blazor Calendar component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand All @@ -82,7 +82,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar compone
{% endhighlight %}
{% endtabs %}

* <kbd>⌘</kbd>+<kbd>F5</kbd> to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component will be rendered in the default web browser.
* <kbd>⌘</kbd>+<kbd>F5</kbd> to run the app. Then, the Blazor Calendar component will be rendered in the default web browser.

![Blazor Calendar Component](images/mac-output.png)

Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-server-side-visual-studio.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting started with Syncfusion Blazor Server App in Visual Studio
title: Getting started with Server App in Visual Studio | Syncfusion®
description: Check out the documentation for getting started with Blazor Components in Visual Studio and much more.
platform: Blazor
component: Common
Expand Down
Loading