From 2886379b94ccbad2ac6833de25a2ab82e3f29d1a Mon Sep 17 00:00:00 2001 From: kathiravan4982 Date: Thu, 3 Sep 2026 16:06:37 +0530 Subject: [PATCH] 856184: Fixed the issues in the Blazor Avatar Getting Started UG. --- blazor-toc.html | 3 + .../avatar/getting-started-with-server-app.md | 208 ++++++++++++++++++ blazor/avatar/getting-started-with-web-app.md | 7 +- blazor/avatar/getting-started.md | 7 +- 4 files changed, 220 insertions(+), 5 deletions(-) create mode 100644 blazor/avatar/getting-started-with-server-app.md diff --git a/blazor-toc.html b/blazor-toc.html index 90a8c620b1..cf7b442f65 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3359,6 +3359,9 @@
  • Blazor Web App
    • +
  • + Blazor Server App +
  • Blazor WASM App
    • diff --git a/blazor/avatar/getting-started-with-server-app.md b/blazor/avatar/getting-started-with-server-app.md new file mode 100644 index 0000000000..db83be6ebe --- /dev/null +++ b/blazor/avatar/getting-started-with-server-app.md @@ -0,0 +1,208 @@ +--- +layout: post +title: Getting Started with Blazor Avatar in Blazor Server App | Syncfusion® +description: Learn how to add the Syncfusion Blazor Avatar control to a Blazor Server App, with setup steps, an example, and customization options. +platform: Blazor +component: Avatar +documentation: ug +--- + +# Getting Started with Blazor Avatar in Blazor Server App + +This section briefly explains how to include the [Blazor Avatar](https://www.syncfusion.com/blazor-components/blazor-avatar) 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** by using the **Blazor Web App** template in 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). + +{% 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) 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) 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 package + +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. 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 package (`Syncfusion.Blazor.Themes`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} + +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.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.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +## Add stylesheet resource + +The theme stylesheet 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 %} + +## Add Blazor Avatar component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Avatar](https://www.syncfusion.com/blazor-components/blazor-avatar) 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 + +@* xSmall Avatar *@ +
    + +@* Small Avatar *@ +
    + +@* Avatar *@ +
    + +@* Large Avatar *@ +
    + +@* xLarge Avatar *@ +
    + + + +{% endhighlight %} +{% endtabs %} + +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Avatar](https://www.syncfusion.com/blazor-components/blazor-avatar) 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/LDLdtRWafjILAhFx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.webp)" %} + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar). + +## 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) diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 2932b59426..8a61e6efba 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -201,9 +201,10 @@ dotnet run {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLdtRWafjILAhFx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.webp)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar). ## See also -1. [Getting Started with Blazor WebAssembly Standalone 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) \ No newline at end of file +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) \ No newline at end of file diff --git a/blazor/avatar/getting-started.md b/blazor/avatar/getting-started.md index d10f81b0e4..857983e787 100644 --- a/blazor/avatar/getting-started.md +++ b/blazor/avatar/getting-started.md @@ -195,7 +195,10 @@ dotnet run {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLdtRWafjILAhFx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.webp)" %} +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar). + ## 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) \ No newline at end of file +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) \ No newline at end of file