ListBox
Item Template
This sample shows how to use ItemTemplateId to specify custom content in ListBox.
Features
PlayStation 3
3
Wii U
2
XBOX ONE
2
Wii U
1
PlayStation 3
2
PlayStation 3
1
Wii U
3
PlayStation 4
2
PlayStation 3
4
XBOX ONE
4
PlayStation Vita
2
PlayStation Vita
2
XBOX ONE
3
Wii U
4
PlayStation Vita
3
XBOX ONE
4
PlayStation 3
3
XBOX ONE
2
PlayStation Vita
1
PlayStation Vita
4
Wii U
2
Wii U
4
PlayStation Vita
2
PlayStation Vita
2
XBOX ONE
1
PlayStation Vita
4
PlayStation 3
4
PlayStation 4
1
PlayStation 3
1
Wii U
3
XBOX ONE
1
PlayStation Vita
4
Wii U
3
PlayStation 4
2
PlayStation Vita
3
PlayStation 3
3
PlayStation 3
3
PlayStation 4
2
Wii U
2
Wii U
3
PlayStation 4
1
PlayStation Vita
3
PlayStation 3
1
Wii U
1
PlayStation 4
2
XBOX ONE
1
PlayStation 4
4
PlayStation 4
2
Wii U
2
PlayStation 3
4
PlayStation 4
1
Wii U
3
PlayStation 3
3
PlayStation 4
3
XBOX ONE
4
PlayStation Vita
3
PlayStation 4
4
PlayStation 3
2
Wii U
4
PlayStation Vita
2
PlayStation 3
1
PlayStation 3
4
PlayStation 4
1
PlayStation 4
3
XBOX ONE
4
PlayStation 3
2
PlayStation Vita
3
PlayStation Vita
3
PlayStation 3
1
Wii U
2
XBOX ONE
3
Wii U
1
Wii U
1
Wii U
2
PlayStation 4
1
Wii U
2
Wii U
4
PlayStation Vita
1
Wii U
1
XBOX ONE
4
XBOX ONE
2
PlayStation 3
3
XBOX ONE
4
Wii U
2
XBOX ONE
2
PlayStation Vita
4
XBOX ONE
2
PlayStation Vita
4
PlayStation 3
2
XBOX ONE
2
Wii U
2
PlayStation Vita
1
PlayStation Vita
4
XBOX ONE
3
PlayStation 4
4
Wii U
1
PlayStation 4
1
Wii U
1
PlayStation 4
4
XBOX ONE
1
Description
This sample shows how to use ItemTemplateId to specify custom content in ListBox.
You can put C1 MVC controls in a template.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class ListBoxController : Controller { public ActionResult ItemTemplate() { var list = MvcExplorer.Models.CustomerOrder.GetOrderData(100).ToList(); return View(list); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | @model List< CustomerOrder > @section Styles{ < style > .badge { color: white; background-color: darkred; border-radius: 10px; padding: 1px 10px; } .label { color: black; background-color: orange; border-radius: 10px; padding: 1px 10px; } </ style > } <script id="template1" type="text/template"> < span > < span class = "label" >{{Product}}</ span > < span class = "badge" >{{Count}}</ span > </ span > </script> <script id="template2" type="text/template"> < span > @Html .C1().InputNumber().TemplateBind( "Value" , "Count" ).Min(0).Max(10).Step(1).ToTemplate() </ span > </script> < div > < label > @Html .Raw(Resources.ListBox.ItemTemplate_CustomHTML)</ label > @ (Html.C1().ListBox() .Bind(Model) .ItemTemplateId( "template1" ) .Width(300).Height(250) ) </ div > < div > < label > @Html .Raw(Resources.ListBox.ItemTemplate_C1MVCControls)</ label > @ (Html.C1().ListBox() .Bind(Model) .ItemTemplateId( "template2" ) .Width(300).Height(250) ) </ div > @section Description{ < p > @Html .Raw(Resources.ListBox.ItemTemplate_Text0)</ p > < p > @Html .Raw(Resources.ListBox.ItemTemplate_Text1)</ p > } |