ASP.NET MVC ListBox - Items with ASP.NET CheckBox controls

  • Ajax Page
    Ajax Page
    1
  • Button
    Button
    2
  • Calendar
    Calendar
    3
  • Checkbox
    Checkbox
    4
  • Color Picker
    Color Picker
    5
  • Combobox
    Combobox
    6
  • Easy Menu
    Easy Menu
    7
  • File Upload
    File Upload
    9
  • Flyout
    Flyout
    10
  • Grid
    Grid
    11
  • HTML Editor
    HTML Editor
    8
  • Image Zoom
    Image Zoom
    12
  • Radio Button
    Radio Button
    13
  • Scheduler
    Scheduler
    14
  • Show
    Show
    15
  
Order
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.

This example showcases the use of standard CheckBox controls inside the items. The end user is able to select any number of items by clicking on them or by checking the checkboxes.
View

    <% Html.Obout(new ListBox("ListBox1")
    {   
        SelectionMode = ListBoxSelectionMode.Multiple, 
        ItemTemplate = (item) =>
        {%>
            <div class="item">
                <input type="checkbox" name="CheckBox1" />
                <div class="label">
                    <img src='<%= item.ImageUrl.Replace("~", "") %>' alt='' />
                    <%= item.Text %>
                </div>
            </div>
        <%}
    }); %> 

    <% Html.Obout(new OboutButton("OboutButton1")
    {
        Text = "Order"
    }); %>
    
    
CSS

    .item
    {
        position: relative;
        width: 100%;
    }
        
    .label
    {
        position: absolute;
        top: 0px;
        left: 25px;
    }
    
    
Controller

    public ViewResult IntegrationCheckBoxes(string ListBox1, 
    string ListBox1_SelectedText)
        {
            ViewData["ListBox1"] = GetStaticCountries();

            if (!string.IsNullOrEmpty(ListBox1_SelectedText))
            {
                ViewData["OrderDetails"] = "<br /><br /><b>The following controls 
                have been ordered:</b> " + ListBox1_SelectedText.Replace(",", ", ");
            }

            return View();
        }