Render ListView with hyper-link navigation

11 Feb 20252 minutes to read

We can use anchor tag along with href attribute in our ListView template property for navigation.

var anchor_template = "<a target='_blank' href='${url}'>${name}</a>";

In the below sample, we have rendered ListView with search engines URL.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;

@{
    var anchor_template = "<a target='_blank' href='${url}'>${name}</a>";
}

<ejs-listview id="element" dataSource="(IEnumerable<object>)ViewBag.dataSource" template="@anchor_template" headerTitle="Search engines" showHeader="true">
</ejs-listview>

<style>
    #element {
        display: block;
        max-width: 350px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    #element a {
        text-decoration: none;
    }

    #element .e-list-header {
        background: rgb(2, 120, 215);
        color: white;
        font-size: 19px;
        font-weight: 500;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
            List<object> listdata = new List<object>();
            listdata.Add(new { name = "Google", url = "https://www.google.com" });
            listdata.Add(new { name = "Bing", url = "https://www.bing.com" });
            listdata.Add(new { name = "Yahoo", url = "https://www.yahoo.com" });
            listdata.Add(new { name = "Ask.com", url = "https://www.ask.com" });
            listdata.Add(new { name = "AOL.com", url = "https://www.aol.com"});
            ViewBag.dataSource = listdata;
            return View();
        }       
    }
}