Search results

Render ListView with hyper link navigation in ASP.NET MVC ListView control

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.

razor
list.cs
@{
    var anchor_template = "<a target='_blank' href='${url}'>${name}</a>";
}
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
@Html.EJS().ListView("element").DataSource((IEnumerable<object>)ViewBag.dataSource).Template(anchor_template).HeaderTitle("Search engines").ShowHeader(true).Render()

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