Render ListView with hyper-link navigation

17 Feb 20222 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.

CSHTML

@{
    var anchor_template = "<a target='_blank' href='${url}'>${name}</a>";
}
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
<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>

List.cs

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();
        }       
    }
}