Multiple Selection in ASP.NET MVC ListBox

12 Jan 202210 minutes to read

ListBox widget allows you to select multiple values from the list Items using AllowMultiSelection property. You can select multiple list items along with Control key and Shift key press. To select multiple values we need to set AllowMultiSelection value to true.

Configuring multiple selection

The following steps explain you the configuration of the AllowMultiSelection for a ListBox.

  1. Add the below code in your view page to render the ListBox

     <div id="control">

     <h5 class="ctrllabel">

         Select a skill

     </h5>

     @{List<int> indexList = new List<int>();



     indexList.Add(0);



     indexList.Add(3);



     }       @Html.EJ().ListBox("listBoxSample").Width("240").Datasource((IEnumerable<SkillSet>)ViewBag.datasource).ListBoxFields(df => df.Text("text")).SelectedItemList(indexList).AllowMultiSelection(true)

 </div>

  2. Output for ListBox control that provides multiple selection is as follows.

    ASPNETMVC ListBox AllowMultiple Selection

Multiple selection through index

You can select the list of items from the ListBox using selectedItemList property. Its data type is array. To achieve this, you need to set true to AllowMultiSelection property in ListBox.

The following steps explains you the configuration of SelectedItemList property in ListBox

  1. Add the below code in your view page to render the ListBox with allow multiple selection enabled.

    		
 // Add the following code in View page to configure ListBox widget
 <div id="control">
     <h5 class="ctrllabel"> 
         Select a skill  
     </h5> 
     @{List<int> indexList = new List<int>();
     indexList.Add(1);
     indexList.Add(4); 
     }  
     @Html.EJ().ListBox("listBoxSample").Width("240").Datasource((IEnumerable<SkillSet>)ViewBag.datasource).ListBoxFields(df
     => df.Text("text")).SelectedIndices(indexList).AllowMultiSelection(true)
 </div>
       
 // Add the following code to add list items in the controller page 
 public class SkillSet   
 {
     public string text { get; set; }
 }
 public ActionResult Index() 
 { 
     List<SkillSet> skill = new List<SkillSet>();
     skill.Add(new SkillSet { text = "ASP.NET" });
     skill.Add(new SkillSet { text = "ActionScript" });
     skill.Add(new SkillSet { text = "Basic" }); 
     skill.Add(new SkillSet { text = "C++" });  
     skill.Add(new SkillSet { text = "C#" }); 
     skill.Add(new SkillSet { text = "dBase" }); 
     skill.Add(new SkillSet { text = "Delphi" });
     skill.Add(new SkillSet { text = "ESPOL" }); 
     skill.Add(new SkillSet { text = "F#" });   
     skill.Add(new SkillSet { text = "FoxPro" }); 
     skill.Add(new SkillSet { text = "Java" });  
     skill.Add(new SkillSet { text = "J#" });   
     skill.Add(new SkillSet { text = "Lisp" }); 
     skill.Add(new SkillSet { text = "Logo" });  
     skill.Add(new SkillSet { text = "PHP" }); 
     ViewBag.datasource = skill;   
     return View();      
 }

  2. Output of the above steps.

ASPNETMVC ListBox Multiple Selection

Checkbox Support

Show Checkbox

You can enable the checkbox in the ListBox with this property. The data type of ShowCheckbox value is Boolean type. It maintains multiple selection and gets the checked items on its ListBox client side events.

Defining the Checkbox support

The following steps explains you the configuration of checkbox options in ListBox.

  1. Add the below code in your view page to render the ListBox with checkbox

     // Add the following code in View page to configure ListBox widget

 <div id="control">

     <h5 class="ctrllabel">

         Select a skill

     </h5>    @Html.EJ().ListBox("listBoxSample").Width("240").Datasource((IEnumerable<ug_listbox.controllers.SkillSet>)ViewBag.datasource).ListBoxFields(df => df.Text("text")).ShowCheckbox(true)

 </div>
     // Add the following code to add list items in the controller page

 public class SkillSet

 {

     public string text { get; set; }

 }

 public ActionResult Index()

 {

     List<SkillSet> skill = new List<SkillSet>();

     skill.Add(new SkillSet { text = "ASP.NET" });

     skill.Add(new SkillSet { text = "ActionScript" });

     skill.Add(new SkillSet { text = "Basic" });

     skill.Add(new SkillSet { text = "C++" });

     skill.Add(new SkillSet { text = "C#" });

     skill.Add(new SkillSet { text = "dBase" });

     skill.Add(new SkillSet { text = "Delphi" });

     skill.Add(new SkillSet { text = "ESPOL" });

     skill.Add(new SkillSet { text = "F#" });

     skill.Add(new SkillSet { text = "FoxPro" });

     skill.Add(new SkillSet { text = "Java" });

     skill.Add(new SkillSet { text = "J#" });

     skill.Add(new SkillSet { text = "Lisp" });

     skill.Add(new SkillSet { text = "Logo" });

     skill.Add(new SkillSet { text = "PHP" });

     ViewBag.datasource = skill;

     return View();

 }

  2. Output of the above steps.

ASPNETMVC ListBox Checkbox

Check All

You can check all the check box in the list by using this property. The data type of CheckAll is Boolean type. To achieve this, set ShowCheckbox property as true.

The following steps explains you the configuration of checkbox options in ListBox.

  1. Add the below code in your view page to render the ListBox with all items checked initially.

    		
 // Add the following code in View page to configure ListBox widget
 <div id="control">
     <h5 class="ctrllabel">
         Select a skill 
     </h5>  
     @Html.EJ().ListBox("listBoxSample").Width("240").Datasource((IEnumerable<ug_listbox.controllers.SkillSet>)ViewBag.datasource).ListBoxFields(df =>
     df.Text("text")) .ShowCheckbox(true).CheckAll(true)
 </div>
       
 // Add the following code to add list items in the controller page
 public class SkillSet
 {  
     public string text { get; set; } 
 }   
 public ActionResult Index()
 {  
     List<SkillSet> skill = new List<SkillSet>();  
     skill.Add(new SkillSet { text = "ASP.NET" });
     skill.Add(new SkillSet { text = "ActionScript" });
     skill.Add(new SkillSet { text = "Basic" });
     skill.Add(new SkillSet { text = "C++" });  
     skill.Add(new SkillSet { text = "C#" }); 
     skill.Add(new SkillSet { text = "dBase" }); 
     skill.Add(new SkillSet { text = "Delphi" });
     skill.Add(new SkillSet { text = "ESPOL" }); 
     skill.Add(new SkillSet { text = "F#" });  
     skill.Add(new SkillSet { text = "FoxPro" }); 
     skill.Add(new SkillSet { text = "Java" }); 
     skill.Add(new SkillSet { text = "J#" });   
     skill.Add(new SkillSet { text = "Lisp" }); 
     skill.Add(new SkillSet { text = "Logo" }); 
     skill.Add(new SkillSet { text = "PHP" }); 
     ViewBag.datasource = skill;    
     return View();
 }

  2. Output of the above steps.

ASPNETMVC ListBox Check All

Uncheck All

You can uncheck all the check box in the list by using this property. The data type of UncheckAll is Boolean type. To achieve this, set ShowCheckbox property as true.