Getting Started with ASP.NET Core Avatar Control

20 Feb 20251 minute to read

This section explains about how to include ASP.NET Core Avatar control in your ASP.NET Core application using Visual Studio.

Prerequisites

System requirements for ASP.NET Core controls

Create ASP.NET Core web application with Razor pages

Add stylesheet

Here, the desired theme is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/28.2.3/fluent.css" />
</head>

NOTE

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls.

Add ASP.NET Core Avatar control

Now, add the Syncfusion® ASP.NET Core Avatar tag helper in ~/Pages/Index.cshtml page.

<div id='element'>
    <span class="e-avatar e-avatar-xlarge"></span>
    <span class="e-avatar e-avatar-large"></span>
    <span class="e-avatar"></span>
    <span class="e-avatar e-avatar-small"></span>
    <span class="e-avatar e-avatar-xsmall"></span>
</div>

<style>
#element {
    display: block;
    width: 300px;
    margin: 130px auto;
    border-radius: 3px;
    justify-content: center;
}

.e-avatar {
    background-image: url(@Url.Content("https://ej2.syncfusion.com/aspnetcore/css/avatar/images/pic01.png"));
    margin: 2px;
}
</style>

ASP.NET Core Avatar Control

NOTE

View Sample in GitHub.

See also