How to apply url, htmlAttribute,imageUrl ,linkAttribute for Menu Items in ASP.NET MVC Menu?
You can customize the Menu items using properties like “url”, “htmlAttribute”, “imageUrl”, “linkAttribute”. These properties are defined inside the field object of the Menu control.
The uses of these properties are shown in the following table.
Table 1: Properties
Property | Use |
fields.htmlAttribute | Specifies the html attributes to “li” item list. |
fields.url | Specifies the url to the anchor tag in menu item list. |
fields.linkAttribute | Adds custom attributes to the anchor tag of the menu items. |
fields.imageUrl | Specifies the image URL to “img” tag inside item list |
You can see the details in setting the above mentioned properties with data source as follows.
Setting htmlAttribute for each Menu item
Using “htmlAttribute” property, you can add HTML attributes, like styles, title to the <li> tag of the corresponding Menu item. To define the “htmlAttribute” in the data source, refer the following code.
C#
//here we set title and style attribute and its value using “htmlAttribute” { pid = 3, mtext = "Group C", parent = null, htmlAttribute = new HtmlAttribute() { title = "Group C" } } { pid = 4, mtext = "Group D", parent = null, htmlAttribute = new HtmlAttribute() { style = "background-color:yellow;" } }
In above code, “htmlAttribute” gets the object of “HtmlAttribute”, the custom class. Inside “HtmlAttribute” class, you can declare any properties like style, title or whatever you used as an attribute in the <li> tag.
Passing URL for Menu and setting attributes for Anchor tag using linkAttribute
The URL property is used to set the URL for the anchor tag, in the <li> tag of Menu item. This URL property can receive any value, in string type and the “linkAttribute” property is used to set the attributes of anchor tag element. It receives the object of “LinkAttribute” class, that is, the custom class. Inside “LinkAttribute” class you can declare any properties, like target, href, whatever is used as an attribute in the anchor tag.
C#
//setting anchor tag attributes and URL { pid = 2, mtext = "Group B", parent = null, URL = "http://www.google.com", linkAttribute = new LinkAttribute() { target = "_blank" } }
Setting imageUrl for Menu item
The “imageURL” property specifies the URL of the image, and the corresponding image is added to the relevant Menu item. Here the “imageURL” property can receive any value, of string type.
C#
{ pid = 1, mtext = "Group A", parent = null, imageURL = "http://www.w3schools.com/images/fblike.gif" }
In the “fields” property, you have to map the name of all the attributes that are specified in the data source. For example, the attribute “htmlAttribute”, specified in the data source, is mapped like ‘HtmlAttribute("htmlAttribute")’.
CSHTML
@Html.EJ().Menu("menujson").MenuFields(f => f.Datasource((IEnumerable<MenuSample.Models.MenuJson>)ViewBag.datasource).Id("pid").Text("mtext").ParentId("parent").HtmlAttribute("htmlAttribute").LinkAttribute("linkAttribute").Url("URL").ImageUrl("imageURL"))
Based on this, a sample was prepared and you can find the sample under the following location.
https://www.syncfusion.com/downloads/support/directtrac/132673/MenuSample-985751916.zip