From dc3c317d192ebe8b3d3b2226094ce3819801ffa0 Mon Sep 17 00:00:00 2001 From: kathiravan4982 Date: Fri, 4 Sep 2026 02:00:26 +0530 Subject: [PATCH] 857417: Fixed the issues in the Blazor Skeleton Getting Started UG. --- blazor-toc.html | 3 +- blazor/skeleton/getting-started-webapp.md | 17 +- .../getting-started-with-server-app.md | 259 ++++++++++++++++++ blazor/skeleton/getting-started.md | 17 +- 4 files changed, 284 insertions(+), 12 deletions(-) create mode 100644 blazor/skeleton/getting-started-with-server-app.md diff --git a/blazor-toc.html b/blazor-toc.html index 023711801e..6fc2b0fe19 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -4523,8 +4523,9 @@
  • Shapes
    • diff --git a/blazor/skeleton/getting-started-webapp.md b/blazor/skeleton/getting-started-webapp.md index 6c12d30425..403b4468a7 100644 --- a/blazor/skeleton/getting-started-webapp.md +++ b/blazor/skeleton/getting-started-webapp.md @@ -17,7 +17,7 @@ This section briefly explains how to include the [Blazor Skeleton](https://www.s {% tabcontent Visual Studio %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs#blazor-project-templates-and-template-options) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -35,7 +35,7 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc#blazor-project-templates-and-template-options), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} @@ -57,7 +57,7 @@ cd BlazorWebApp.Client {% endtabcontents %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs#interactivity-location) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). ## Install the required Blazor packages @@ -173,6 +173,8 @@ N> If the interactivity location is set to `Per page/component` in the Web App, @rendermode InteractiveAuto +@using Syncfusion.Blazor.Notifications +
    @@ -234,6 +236,8 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notification {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Notifications +
    @@ -255,6 +259,7 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notification ## See also -1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -3. [Getting Started with Blazor Skeleton Shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes) +1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +4. [Getting Started with Blazor Skeleton Shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes) diff --git a/blazor/skeleton/getting-started-with-server-app.md b/blazor/skeleton/getting-started-with-server-app.md new file mode 100644 index 0000000000..6d1d12eab9 --- /dev/null +++ b/blazor/skeleton/getting-started-with-server-app.md @@ -0,0 +1,259 @@ +--- +layout: post +title: Getting Started with Blazor Skeleton | Syncfusion +description: Learn how to get started with the Syncfusion Blazor Skeleton in a Blazor Server app with installation and setup steps. +platform: Blazor +control: Skeleton +documentation: ug +--- + +# Getting Started with Blazor Skeleton + +This section briefly explains how to include the [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs#blazor-project-templates-and-template-options) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Run the following command to create a new Blazor Server App. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc#blazor-project-templates-and-template-options) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Run the following command to create a new Blazor Server App. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs#interactivity-location) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor packages + +Install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Notifications` and `Syncfusion.Blazor.Themes`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} + +Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +## Add import namespaces + +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. + +{% tabs %} +{% highlight csharp tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Notifications + +{% endhighlight %} +{% endtabs %} + +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. + +{% tabs %} +{% highlight C# tabtitle="Program.cs" %} + +builder.Services.AddSyncfusionBlazor(); + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + + + +{% endhighlight %} +{% endtabs %} + +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Skeleton functionality. + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + + + +{% endhighlight %} +{% endtabs %} + +## Add Blazor Skeleton component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) component inside the razor file. + +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@rendermode InteractiveServer + +@using Syncfusion.Blazor.Notifications + +
    + + +{% endhighlight %} +{% endtabs %} + +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRtmXhVZBkBWnp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Skeleton Component](./images/blazor-skeleton-component.webp)" %} + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Skeleton). + +## Blazor Skeleton Shapes + +The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html#Syncfusion_Blazor_Notifications_SfSkeleton_Shape) property can be used to display skeleton in different shapes like circle, square, rectangle and text. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Notifications + +
    + + +

    + +

    + +
    + + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBHjcZBLjrnkNoX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Skeleton Component](./images/blazor-skeleton-shape-sample.webp)" %} + +## See also + +1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +4. [Getting Started with Blazor Skeleton Shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes) diff --git a/blazor/skeleton/getting-started.md b/blazor/skeleton/getting-started.md index 8f61d1a6ee..442d230447 100644 --- a/blazor/skeleton/getting-started.md +++ b/blazor/skeleton/getting-started.md @@ -17,7 +17,7 @@ This section briefly explains how to add the [Blazor Skeleton](https://www.syncf {% tabcontent Visual Studio %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs#blazor-project-templates-and-template-options) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -34,7 +34,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc#blazor-project-templates-and-template-options), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} @@ -165,6 +165,8 @@ Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor* {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Notifications +
    @@ -213,6 +215,8 @@ dotnet run {% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRtmXhVZBkBWnp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Skeleton Component](./images/blazor-skeleton-component.webp)" %} +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Skeleton). + ## Blazor Skeleton shapes The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html#Syncfusion_Blazor_Notifications_SfSkeleton_Shape) property can be used to display skeleton in different shapes like circle, square, rectangle and text. @@ -220,6 +224,8 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notification {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Notifications +
    @@ -241,6 +247,7 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notification ## See also -1. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -3. [Getting Started with Blazor Skeleton Shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes) +1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +4. [Getting Started with Blazor Skeleton Shapes](https://blazor.syncfusion.com/documentation/skeleton/shapes)