We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

List view How to use href action link with id

List view How to use rel='nofollow' href action link with id

3 Replies

SS Selvamani Sankarappan Syncfusion Team April 20, 2016 10:31 AM UTC

Hi Vivek,

Thanks for Contacting Syncfusion Support,

We have analyzed your query and we can load another page using our existing “FieldSettings” property, then map the NavigateUrl based on the model field’s name. Please refer the following code example:


@Html.EJ().ListView("listview").ShowHeader(true).FieldSettings(f=> f.Text("texts").PrimaryKey("PrimaryKeys").NavigateUrl("rel='nofollow' href")).DataSource(Model)

And in another way, we can achieve your requirement using existing clientSideEvent “mouseUp” in ListView component. Then can navigate another page by clicking the ListView items. Please refer the following code example:


@Html.EJ().ListView("listview").ShowHeader(true).FieldSettings(f => f.Text("texts").PrimaryKey("PrimaryKeys")).ClientSideEvents(s=>s.MouseUp("action")).DataSource(Model)



function action(args) {

        location.rel='nofollow' href = '@Url.Action("About","Home")';


We have prepared the sample based on this. Please get the sample from the following location:


To know about the list of properties, methods, and events available in ejListView component please refer the following link:



Selvamani S

EM Emil November 1, 2017 04:49 PM UTC


I dont understand your sample how do you achieve  below, in your first sample, NavigateUrl does what? where are the parameters? 2nd example doesnt have PK paramenter. how do we use it?


   <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">

            @foreach (var item in Model)



                    @Html.ActionLink(Item .name, "Details", new { id = item.id })




SS Selvamani Sankarappan Syncfusion Team November 2, 2017 11:48 AM UTC

Hi Emil,   
Thanks for contacting Syncfusion Support.   
Query 1: I dont understand your sample how do you achieve below, in your first sample, NavigateUrl does what?   
In that sample, we have explained for navigating another page while clicking the list items. We can navigate to another page by the following two ways:   
  1. NavigateUrl field – We can give the direct URL using NavigateUrl and can pass the parameters. Refer to the following code example:
@Html.EJ().ListView("listview").ShowHeader(true).FieldSettings(f => f.Text("texts").NavigateUrl("navigate")).DataSource(Model)   
public static List<ListData> setListDataSource()   
            listTempSource.Add(new ListData { texts = "Responsive Dashboard",navigate="../ListView/navigate?par=2" });   
            listTempSource.Add(new ListData { texts = "Excel Filter with focus and hit enter" });   
            return listTempSource;   
public ActionResult navigate(string par)//get the passing parameter   
            return PartialView("navigate");   
  1. MouseUp event – We can give the URL in mouseUp client-side event. You can pass the parameter while clicking the list items to navigate another page. Refer to the following code example:
@Html.EJ().ListView("listview1").ShowHeader(true).FieldSettings(f => f.Text("texts")).ClientSideEvents(e=>e.MouseUp("click")).DataSource(Model)   
function click(args) {   
        var tripId = 3;   
        location.rel='nofollow' href = '../Home/About?tripId=' + tripId;   
Query 2: 2nd example doesn’t have PK parameter. how do we use it?   
Are you meant PK as PrimaryKey or any other parameter? If its PrimaryKey, then you can map the primary keys to the list items from the model values. Refer to the following link:   
If not, please explain about your scenario.   
Refer to the following sample:   
If the above solution does not meet your requirement, kindly revert with more details to provide an appropriate solution at the earliest.   
Selvamani S.   

Live Chat Icon For mobile
Up arrow icon