ASP.NET MVC ListBox - State Selector

  • AlabamaAlabama
  • AlaskaAlaska
  • ArizonaArizona
  • ArkansasArkansas
  • CaliforniaCalifornia
  • ColoradoColorado
  • ConnecticutConnecticut
  • DelawareDelaware
  • FloridaFlorida
  • GeorgiaGeorgia
  • HawaiiHawaii
  • IdahoIdaho
  • IllinoisIllinois
  • IndianaIndiana
  • IowaIowa
  • KansasKansas
  • KentuckyKentucky
  • LouisianaLouisiana
  • MaineMaine
  • MarylandMaryland
  • MassachusettsMassachusetts
  • MichiganMichigan
  • MinnesotaMinnesota
  • MississippiMississippi
  • MissouriMissouri
  • MontanaMontana
  • NebraskaNebraska
  • NevadaNevada
  • New HampshireNew Hampshire
  • New JerseyNew Jersey
  • New MexicoNew Mexico
  • New YorkNew York
  • North CarolinaNorth Carolina
  • North DakotaNorth Dakota
  • OhioOhio
  • OklahomaOklahoma
  • OregonOregon
  • PennsylvaniaPennsylvania
  • Rhode IslandRhode Island
  • South CarolinaSouth Carolina
  • South DakotaSouth Dakota
  • TennesseeTennessee
  • TexasTexas
  • UtahUtah
  • VermontVermont
  • VirginiaVirginia
  • WashingtonWashington
  • West VirginiaWest Virginia
  • WisconsinWisconsin
  • WyomingWyoming


  • ALAL
  • AKAK
  • AZAZ
  • ARAR
  • CACA
  • COCO
  • CTCT
  • DEDE
  • FLFL
  • GAGA
  • HIHI
  • IDID
  • ILIL
  • ININ
  • IAIA
  • KSKS
  • KYKY
  • LALA
  • MEME
  • MDMD
  • MAMA
  • MIMI
  • MNMN
  • MSMS
  • MOMO
  • MTMT
  • NENE
  • NVNV
  • NHNH
  • NJNJ
  • NMNM
  • NYNY
  • NCNC
  • NDND
  • OHOH
  • OKOK
  • OROR
  • PAPA
  • RIRI
  • SCSC
  • SDSD
  • TNTN
  • TXTX
  • UTUT
  • VTVT
  • VAVA
  • WAWA
  • WVWV
  • WIWI
  • WYWY
By arranging the items of the ListBox on multiple rows and columns you can create a powerful widget that allows your end users to easily select a U.S. state. This will allow your users to locate a state much faster, without being needed to scroll through a long list with states.
View - Aspx
 
    <% Html.Obout(new ListBox("ListBox1") 
    {                
        CssSettings = new ListBoxCssSettings() { ItemsContainer="ob_iLboIC long-states" }
    }); %>
    
View - Razor
 
    @Html.Obout(new ListBox("ListBox1") 
    {                
        CssSettings = new ListBoxCssSettings() { ItemsContainer="ob_iLboIC long-states" }
    })
    
CSS
 
    .long-states .ob_iLboICBC li
    {
        float: left;
        width: 105px;
    }
        
    .short-states .ob_iLboICBC li
    {
        float: left;
        width: 35px;
    }
        
    /* For IE6 */
    * HTML .long-states .ob_iLboICBC li
    {
        -width: 95px;
    }
        
    * HTML .short-states .ob_iLboICBC li
    {
        -width: 25px;
    }
        
    * HTML .ob_iLboICBC li i
    {
        -visibility: hidden;
    }