ASP.NET MVC ListBox - RadioButtons inside the ListBox

  • ASP.NET Controls


    TreeView

    Grid

    HTML Editor

    ListBox

    Scheduler

    Window

    ASP.NET MVC Controls


    Button

    Checkbox

    Dropdown List

    Image Button

    Radio Button

    Textbox

    Multiline Textbox

    Miscellaneous


    TreeView for Classic ASP

    Site Monitoring
  
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 OboutRadioButton controls inside the ListBox. The end user is able to select only one item from the ListBox. To accomplish this layout, we used a single item in the ListBox, with no value/text, which is customized using an ItemTemplate to contain all the radio buttons.
View

    <% Html.Obout(new ListBox("ListBox1")
    {   
        Width = 500,
        ItemTemplate = (item) =>
        {%>
            <div class="column">
                <h4>ASP.NET Controls</h4>
                <hr />
                
                <% Html.Obout(new OboutRadioButton("OboutRadioButton1")
                {
                    Text = "TreeView",
                    GroupName = "Items",
                    ClientSideEvents = new OboutRadioButtonClientSideEvents() 
                    { 
                        OnCheckedChanged = "onCheckedChanged" 
                    }
                }); %>                
                
                <br />
                
                <% Html.Obout(new OboutRadioButton("OboutRadioButton2")
                {
                    Text = "Grid",
                    GroupName = "Items",
                    ClientSideEvents = new OboutRadioButtonClientSideEvents() 
                    { 
                        OnCheckedChanged = "onCheckedChanged" 
                    }
                }); %>
                ...
    }); %> 

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

    .ob_iLboICBC li, .ob_iLboICBC li div.b
    {
        height: 200px !important;
        color: #2b4c61 !important;
    }
        
    .ob_iLboICBC li.ih, .ob_iLboICBC li.ih div.b, .ob_iLboICBC li.ih i
    {
        background-image: none !important;
    }
        
    .column
    {
        float: left;
        width: 130px;
        margin-right: 15px;
    }
        
    .column h4
    {
        font-size: 10px;
    }
    
    
Controller

    public ViewResult IntegrationRadioButtons(string ListBox1, 
    string ListBox1_SelectedText, string Items)
    {
        List item = new List();
        item.Add(new ListBoxItem() { Selected = true });

        ViewData["ListBox1"] = item;

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

        return View();
    }