ASP.NET MVC ComboBox - Populating with Data


Populated from database (LINQ to Entities):


Populated from generic collection of custom domain model objects:


Manually populated:
The ComboBox can be populated in various ways:
- LINQ to Entities;
- LINQ to SQL;
- generic collections;
- manually;
- and many other.
View - Aspx

   <% Html.Obout(new ComboBox("ComboBox1")
        {
           Width = 250        
        }); %>
        
    <% Html.Obout(new ComboBox("ComboBox2")
        {
           Width = 250       
        }); %>
        
    <% Html.Obout(new ComboBox("ComboBox3")
        {
           Width = 250         
        }); %>
    
View - Razor

    @Html.Obout(new ComboBox("ComboBox1")
        {
           Width = 250        
        })
        
    @Html.Obout(new ComboBox("ComboBox2")
        {
           Width = 250       
        })
        
    @Html.Obout(new ComboBox("ComboBox3")
        {
           Width = 250         
        })
    
Controller

   public ViewResult PopulateWithData()
    {
        // Populate from database
        NorthwindEntities db = new NorthwindEntities();
        var customers = from c in db.Customers
                        select new
                        {
                            c.CustomerID,
                            c.CompanyName
                        };

        ComboBoxItemList customersList = new ComboBoxItemList(customers.Take(10), "CustomerID", "CompanyName");

        ViewData["ComboBox1"] = customersList;

        // Populate from manually created list
        List items = new List();
        items.Add(new ComboBoxItem() { Value = "1", Text = "Item 1" });
        items.Add(new ComboBoxItem() { Value = "2", Text = "Item 2" });
        items.Add(new ComboBoxItem() { Value = "3", Text = "Item 3" });
        items.Add(new ComboBoxItem() { Value = "4", Text = "Item 4" });
        items.Add(new ComboBoxItem() { Value = "5", Text = "Item 5" });

        ViewData["ComboBox3"] = items;

        // Populate from generic collection of custom objects (Domain Model classes)
        List products = new List();
        products.Add(new Product() { ProductID = 1, ProductName = "Product 1" });
        products.Add(new Product() { ProductID = 2, ProductName = "Product 2" });
        products.Add(new Product() { ProductID = 3, ProductName = "Product 3" });
        products.Add(new Product() { ProductID = 4, ProductName = "Product 4" });
        products.Add(new Product() { ProductID = 5, ProductName = "Product 5" });

        ViewData["ComboBox2"] = new ComboBoxItemList(products, "ProductID", "ProductName");

        return View();
    }
    
obout.com 
obout.com Home 
News 
ASP.NET MVC ComboBox Home   
ASP.NET MVC ComboBox Home 
Examples - 53
Appearance - 1 
Live Styles 
Autocomplete & Filtering - 2 
Autocomplete  
Filtering  
Load on Demand - 7 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Initial Text  
Initial Text on Client-Side  
Load Items on Button Click  
Load Items with MinChars  
Multi-Columns - 4 
Grid-like Multi-Columns  
Grid-like Multi-Columns & Tooltips  
Multiple Rows and Columns  
State Selector  
Items with Icons - 3 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Templates - 3 
Item Templates  
Header Templates  
Populating with Data - 1 
Populate with Data  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item  
Set Selected Items  
Mode - 2 
ComboBox  
TextBox  
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ComboBoxes  
Integration - 3 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
RadioButtons inside ComboBox  
Settings - 8 
AllowCustomText  
AllowEdit  
AutoPostback  
AutoValidate  
Height  
MenuWidth  
OpenOnFocus  
Width  
Server-Side API - 2 
Server-Side Events  
Enable / Disable  
Client-Side API - 8 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items  
Enable / Disable  
Get Selected Item  
Reset Selection  
Select / Deselect All Items  
Move Items  
Documentation - 1 
ChangeLog