New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Menu Custom Attributes Binding

Loading Demo...

EXAMPLE

VIEW SOURCE

Also available for:

Beverages
- Chai
- Chang
- Guaraná Fantástica
- Sasquatch Ale
- Steeleye Stout
- Côte de Blaye
- Chartreuse verte
- Ipoh Coffee
- Laughing Lumberjack Lager
- Outback Lager
- Rhönbräu Klosterbier
- Lakkalikööri
Condiments
- Aniseed Syrup
- Chef Anton's Cajun Seasoning
- Chef Anton's Gumbo Mix
- Grandma's Boysenberry Spread
- Northwoods Cranberry Sauce
- Genen Shouyu
- Gula Malacca
- Sirop d'érable
- Vegie-spread
- Louisiana Fiery Hot Pepper Sauce
- Louisiana Hot Spiced Okra
- Original Frankfurter grüne Soße
Confections
- Pavlova
- Teatime Chocolate Biscuits
- Sir Rodney's Marmalade
- Sir Rodney's Scones
- NuNuCa Nuß-Nougat-Creme
- Gumbär Gummibärchen
- Schoggi Schokolade
- Zaanse koeken
- Chocolade
- Maxilaku
- Valkoinen suklaa
- Tarte au sucre
- Scottish Longbreads
Dairy Products
- Queso Cabrales
- Queso Manchego La Pastora
- Gorgonzola Telino
- Mascarpone Fabioli
- Geitost
- Raclette Courdavault
- Camembert Pierrot
- Gudbrandsdalsost
- Flotemysost
- Mozzarella di Giovanni
Grains/Cereals
- Gustaf's Knäckebröd
- Tunnbröd
- Singaporean Hokkien Fried Mee
- Filo Mix
- Gnocchi di nonna Alice
- Ravioli Angelo
- Wimmers gute Semmelknödel
Meat/Poultry
- Mishi Kobe Niku
- Alice Mutton
- Thüringer Rostbratwurst
- Perth Pasties
- Tourtière
- Pâté chinois
Produce
- Uncle Bob's Organic Dried Pears
- Tofu
- Rössle Sauerkraut
- Manjimup Dried Apples
- Longlife Tofu
Seafood
- Ikura
- Konbu
- Carnarvon Tigers
- Nord-Ost Matjeshering
- Inlagd Sill
- Gravad lax
- Boston Crab Meat
- Jack's New England Clam Chowder
- Rogede sild
- Spegesild
- Escargots de Bourgogne
- Röd Kaviar

Product Details:

<div class="product"> <img src="/aspnet-core/shared/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" /> <div class="product-description"> <h3>#:ProductName#</h3> </div> </div> <div class="productCard"> <h3>#:ProductName#</h3> <p><img src="/aspnet-core/shared/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" /></p> <div class="product-description"> <table> <tr> <th>Price</th> <td>#: kendo.toString(parseFloat(UnitPrice), "c") #</td> </tr> <tr> <th>Units</th> <td>#: UnitsInStock #</td> </tr> <tr> <th>Discontinued</th> <td>#: Discontinued ? 'Yes' : 'No' #</td> </tr> </table> </div> </div> #products-wrapper { width: 80%; display: inline-block; vertical-align: top; border-right: 1px solid rgba(20, 53, 80, 0.137255); } #product-wrapper { height: 100%; margin: 15px 0 0 45px; display: inline-block; } #products { margin-top: 10px; } #myMenu { flex-wrap: wrap; } .product { margin: 20px 5px 0 0; display: inline-block; vertical-align: top; } .product img, .productCard img { width: 110px; height: 110px; } .product h3 { max-width:110px; } .product h3, #product-wrapper h3 { display: inline-block; margin: 0; padding: 3px 5px 0 0; overflow: hidden; line-height: 1.1em; font-size: .9em; font-weight: normal; text-transform: uppercase; color: #999; } #product-wrapper h3 { color: #999; max-width: 110px; } .productCard { margin-top:30px; } .productCard table { margin-top:20px; text-align: left; font-size: .9em; color: #999; }

Description

The Telerik UI for ASP.NET Core Menu enables you to apply model binding to populate its items dynamically from the server.

This demo shows an advanced approach to bind the attributes of the Menu items to fields from the passed Model so that you can apply client-side logic on the item selection.

Additional Apps

This Menu example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core Menu Custom Attributes Binding

Description

Additional Apps

Support & Learning Resources

Additional Resources