List view How to use href action link with id

[vivek gupta]

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

[Selvamani Sankarappan]

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:

[cshtml]

@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:

[cshtml]

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

 

[script]

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:

http://www.syncfusion.com/downloads/support/forum/123763/ze/splitterMVC_(2)1900200127

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

http://help.syncfusion.com/js/api/ejlistview

Regards,

Selvamani S

[Emil]

Hi,

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?

below

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

            @foreach (var item in Model)

            {

                <li>

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

                </li>

            }

        </ul>

[Selvamani Sankarappan]

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:

   

[cshtml]   

@Html.EJ().ListView("listview").ShowHeader(true).FieldSettings(f => f.Text("texts").NavigateUrl("navigate")).DataSource(Model)   

   

[cs]   

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");   

        }   

  

   

2. 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:

   

[cshtml]   

   

@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:   

 

https://help.syncfusion.com/api/js/ejlistview#members:fieldsettings   

   

If not, please explain about your scenario.   

   

Refer to the following sample:   

 

http://www.syncfusion.com/downloads/support/forum/123763/ze/listviewsample_(2)-522793137   

   

If the above solution does not meet your requirement, kindly revert with more details to provide an appropriate solution at the earliest.   

   

Regards,   

   

Selvamani S.