Search results

Integrate avatar into ListView in ASP.NET MVC Avatar control

22 Jul 2021 / 1 minute to read

Avatar is integrated into the listview to create contacts applications. The xsmall size avatar is used to match the size of the list item. Letters and images are also used as avatar content.

razor
HomeController.cs
Copied to clipboard
@using Syncfusion.EJ2
<div class="col-lg-12 control-section">

    <div class="sample_container">
        <!-- Listview element -->
        @{ var template = "<div class='listWrapper'>" +
            "${if(avatar!=='')}" +
            "<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>" +
            "${else}" +
            "<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>" +
            "${/if}" +
            "<span class='text'>" +
            "${text} </span> </div>";}
        @Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable<object>)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render()
    </div>
</div>


<style>
    .control-section {
        overflow: auto;
    }

    /* Listview Customization */

    #letterAvatarList {
        max-width: 350px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

        #letterAvatarList .listWrapper {
            width: inherit;
            height: inherit;
            position: relative;
        }

        #letterAvatarList .e-list-header {
            height: 54px;
        }

    .material #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .fabric #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .bootstrap #letterAvatarList .e-list-header .e-text {
        line-height: 13px;
    }

    .highcontrast #letterAvatarList .e-list-header .e-text {
        line-height: 20px;
    }

    #letterAvatarList .e-list-item {
        cursor: pointer;
        height: 50px;
        line-height: 44px;
        border: 0;
    }

    /* Badge Positioning */

    #letterAvatarList .e-badge {
        margin-top: 12px;
    }

    #letterAvatarList .listWrapper .text {
        width: 60%;
        display: inline-block;
        vertical-align: middle;
        margin: 0 50px;
    }

    /* Avatar Positioning */

    #letterAvatarList .listWrapper .e-avatar {
        position: absolute;
        top: calc(100% - 40px);
        font-size: 10px;
        left: 5px;
    }

    /* Avatar Background Customization */

    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {
        background-color: #039BE5;
    }

    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {
        background-color: #E91E63;
    }

    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {
        background-color: #009688;
    }

    /* Avatar images using 'background-image' property */

    .pic01 {
        background-image: url('./pic01.png');
    }

    .pic02 {
        background-image: url('./pic02.png');
    }

    .pic03 {
        background-image: url('./pic03.png');
    }

    .pic04 {
        background-image: url('./pic04.png');
    }
</style>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Avatar
{
    public partial class AvatarController : Controller
    {
        public ActionResult Listview()
        {
            List<object> data = new List<object>();
            data.Add(new { text = "Robert", id = "s_01", avatar= "", pic= "pic04" });
            data.Add(new { text = "Nancy", id = "s_02", avatar= "N", pic= "" });
            data.Add(new { text = "John", id = "s_03", pic= "pic01", avatar= "" });
            data.Add(new { text = "Andrew", id = "s_04", avatar= "A", pic= "" });
            data.Add(new { text = "Michael", id = "s_05", pic= "pic02", avatar= "" });
            data.Add(new { text = "Steven", id = "s_06", pic= "pic03", avatar= "" });
            data.Add(new { text = "Margaret", id = "s_07", avatar= "M", pic= "" });
            ViewBag.dataSource = data;
            return View();
        }
    }

}

Output be like the below.

Avatar ListView