ASP.NET MVC ListBox - Item Templates

  • Alfreds Futterkiste Alfreds Futterkiste / Germany ALFKI
  • Antonio Moreno Taquería Antonio Moreno Taquería / Mexico ANATR
  • Berglunds snabbköp Berglunds snabbköp / Sweden ANTON
  • Around the Horn Around the Horn / UK AROUT
  • Berglunds snabbköp Berglunds snabbköp / Sweden BERGS
  • Blauer See Delikatessen Blauer See Delikatessen / Germany BLAUS
  • Blondesddsl père et fils Blondesddsl père et fils / France BLONP
  • Bólido Comidas preparadas Bólido Comidas preparadas / Spain BOLID
  • Bon app' Bon app' / France BONAP
  • Bottom-Dollar Markets Bottom-Dollar Markets / Canada BOTTM
The items of the ListBox can be customized using templates. You can embed any content inside an item template, including HTML markup and ASP.NET MVC controls (any control from the Obout MVC Suite may be added to a template).

In order to set up an item template, use the ItemTemplate property of the ListBox. You can display any data field in the item template, by using the ListBoxItem.DataItem object.
View - Aspx

    <% Html.Obout(new ListBox("ListBox1")
    {
        ItemTemplate = new OboutMvcTemplate<ListBoxItem>((item) =>
            {%>
                <span class="template-name"><%= ((oboutSuite.Customer)item.DataItem).CompanyName %></span>
                /
                <span class="template-country">
                    <%= ((oboutSuite.Customer)item.DataItem).Country %>
                    <img src="/Content/img/flag_<%= ((oboutSuite.Customer)item.DataItem).Country %>.png" alt="" />
                </span>
            <%})
        }); %>
    
View - Razor

    @Html.Obout(new ListBox("ListBox1")
    {
        ItemTemplate = new OboutMvcTemplate<ListBoxItem>(
                @:<span class="template-name">@(((oboutSuite.Customer)item.DataItem).CompanyName)</span>
                /
                <span class="template-country">
                    @(((oboutSuite.Customer)item.DataItem).Country)
                    <img src="/Content/img/flag_@(((oboutSuite.Customer)item.DataItem).Country).png" alt="" />
                </span>
            )
        })
    
CSS
 
    .template-name
    {
        text-decoration: underline;
    }
        
    .template-country
    {
        font-style: italic;
    }