Post
Ask Question

ASP.NET MVC 5 - Bootstrap Style Multi Select Dropdown Plugin

Multiple-selection is an important part of drop-down UI component as it improves the user interactivity with the website in order to allow the user to make his/her choice first and then send the request to the server for batch processing instead of again and again sending a request to the server for same choice selection. One of the cool things about the Bootstrap CSS framework is that it provides very rich and interactive built-in plugins which are easy to use and integrate with any server-side technology.

Today, I shall be demonstrating the integration of the Bootstrap CSS style drop-down with the enabling of multi-selection choice by using Bootstrap Select plugin into ASP.NET MVC5 platform.


Prerequisites

Following are some prerequisites before you proceed any further in this tutorial.

  1. Knowledge of ASP.NET MVC5.
  2. Knowledge of HTML.
  3. Knowledge of JavaScript.
  4. Knowledge of Bootstrap.
  5. Knowledge of Jquery.
  6. Knowledge of C# Programming.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise. I am using Country table data extract from the Adventure Works Sample Database.

Let's begin now.

Step 1

Create a new MVC web project and name it "MultiSelectDropDown".

Step 2

Now, download the "Bootstrap Select" plug-in and place the respective JavaScript & CSS files into "Scripts" & "Content->style" folders.

Step 3

Open the "Views->Shared->_Layout.cshtml" file and replace following code in it.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>@ViewBag.Title</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9.   
  10.     <!-- Font Awesome -->  
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
  12.   
  13. </head>  
  14. <body>  
  15.     <div class="navbar navbar-inverse navbar-fixed-top">  
  16.         <div class="container">  
  17.             <div class="navbar-header">  
  18.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  19.                     <span class="icon-bar"></span>  
  20.                     <span class="icon-bar"></span>  
  21.                     <span class="icon-bar"></span>  
  22.                 </button>  
  23.             </div>  
  24.         </div>  
  25.     </div>  
  26.     <div class="container body-content">  
  27.         @RenderBody()  
  28.         <hr />  
  29.         <footer>  
  30.             <center>  
  31.                 <p><strong>Copyright © @DateTime.Now.Year - <a href="http://wwww.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>  
  32.             </center>  
  33.         </footer>  
  34.     </div>  
  35.   
  36.     @*Scripts*@  
  37.     @Scripts.Render("~/bundles/jquery")  
  38.   
  39.     @Scripts.Render("~/bundles/jqueryval")  
  40.     @Scripts.Render("~/bundles/bootstrap")  
  41.   
  42.     @RenderSection("scripts", required: false)  
  43. </body>  
  44. </html> 

In the above code, I have simply created a basic default layout page and linked the require libraries into it.

Step 4

Create a new "Helper_Code\Objects\CountryObj.cs" file and replace the following code in it.

  1. //-----------------------------------------------------------------------  
  2. // <copyright file="CountryObj.cs" company="None">  
  3. //     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.  
  4. // </copyright>  
  5. // <author>Asma Khalid</author>  
  6. //-----------------------------------------------------------------------  
  7.   
  8. namespace SaveMultiSelectDropDown.Helper_Code.Objects  
  9. {  
  10.     using System;  
  11.     using System.Collections.Generic;  
  12.     using System.Linq;  
  13.     using System.Web;  
  14.   
  15.     /// <summary>  
  16.     /// Country object class.  
  17.     /// </summary>  
  18.     public class CountryObj  
  19.     {  
  20.         #region Properties  
  21.   
  22.         /// <summary>  
  23.         /// Gets or sets country ID property.  
  24.         /// </summary>  
  25.         public int Country_Id { get; set; }  
  26.   
  27.         /// <summary>  
  28.         /// Gets or sets country name property.  
  29.         /// </summary>  
  30.         public string Country_Name { get; set; }  
  31.  
  32.         #endregion  
  33.     }  
  34. } 

In the above code, I have simply created an object class which will map my sample list data in order to populate the drop-down list.

Step 5

Now, create another new "Models\MultiSelectDropDownViewModel.cs" file and replace the following code in it.

  1. //-----------------------------------------------------------------------  
  2. // <copyright file="MultiSelectDropDownViewModel.cs" company="None">  
  3. //     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.  
  4. // </copyright>  
  5. // <author>Asma Khalid</author>  
  6. //-----------------------------------------------------------------------  
  7.   
  8. namespace SaveMultiSelectDropDown.Models  
  9. {  
  10.     using System.Collections.Generic;  
  11.     using System.ComponentModel.DataAnnotations;  
  12.     using System.Web;  
  13.     using Helper_Code.Objects;  
  14.   
  15.     /// <summary>  
  16.     /// Multi select drop down view model class.  
  17.     /// </summary>  
  18.     public class MultiSelectDropDownViewModel  
  19.     {  
  20.         #region Properties  
  21.   
  22.         /// <summary>  
  23.         /// Gets or sets choose multiple countries property.  
  24.         /// </summary>  
  25.         [Required]  
  26.         [Display(Name = "Choose Multiple Countries")]  
  27.         public List<int> SelectedMultiCountryId { get; set; }  
  28.   
  29.         /// <summary>  
  30.         /// Gets or sets selected countries property.  
  31.         /// </summary>  
  32.         public List<CountryObj> SelectedCountryLst { get; set; }  
  33.  
  34.         #endregion  
  35.     }  
  36. } 

In the above code, I have created my view model which I will attach with my view. Here, I have created integer type list property which will capture my multiple selection values from the Razor View drop-down control and country object type list property which will display my multiple-selection choice in a table after processing on the server via ASP.NET MVC5 platform.

Step 6

Create a new "Controllers\MultiSelectDropDownController.cs" file and replace the following code in it.

  1. //-----------------------------------------------------------------------  
  2. // <copyright file="MultiSelectDropDownController.cs" company="None">  
  3. //     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.  
  4. // </copyright>  
  5. // <author>Asma Khalid</author>  
  6. //-----------------------------------------------------------------------  
  7.   
  8. namespace SaveMultiSelectDropDown.Controllers  
  9. {  
  10.     using System;  
  11.     using System.Collections.Generic;  
  12.     using System.IO;  
  13.     using System.Linq;  
  14.     using System.Reflection;  
  15.     using System.Web;  
  16.     using System.Web.Mvc;  
  17.     using Helper_Code.Objects;  
  18.     using Models;  
  19.   
  20.     /// <summary>  
  21.     /// Multi select drop down controller class.  
  22.     /// </summary>  
  23.     public class MultiSelectDropDownController : Controller  
  24.     {      
  25.         #region Index view method.  
  26.  
  27.         #region Get: /MultiSelectDropDown/Index method.  
  28.   
  29.         /// <summary>  
  30.         /// Get: /MultiSelectDropDown/Index method.  
  31.         /// </summary>          
  32.         /// <returns>Return index view</returns>  
  33.         public ActionResult Index()  
  34.         {  
  35.             // Initialization.  
  36.             MultiSelectDropDownViewModel model = new MultiSelectDropDownViewModel { SelectedMultiCountryId = new List<int>(), SelectedCountryLst = new List<CountryObj>() };  
  37.   
  38.             try  
  39.             {  
  40.                 // Loading drop down lists.  
  41.                 this.ViewBag.CountryList = this.GetCountryList();  
  42.             }  
  43.             catch (Exception ex)  
  44.             {  
  45.                 // Info  
  46.                 Console.Write(ex);  
  47.             }  
  48.   
  49.             // Info.  
  50.             return this.View(model);  
  51.         }  
  52.  
  53.         #endregion  
  54.  
  55.         #region POST: /MultiSelectDropDown/Index  
  56.   
  57.         /// <summary>  
  58.         /// POST: /MultiSelectDropDown/Index  
  59.         /// </summary>  
  60.         /// <param name="model">Model parameter</param>  
  61.         /// <returns>Return - Response information</returns>  
  62.         [HttpPost]  
  63.         [AllowAnonymous]  
  64.         [ValidateAntiForgeryToken]  
  65.         public ActionResult Index(MultiSelectDropDownViewModel model)  
  66.         {  
  67.             // Initialization.  
  68.             string filePath = string.Empty;  
  69.             string fileContentType = string.Empty;  
  70.   
  71.             try  
  72.             {  
  73.                 // Verification  
  74.                 if (ModelState.IsValid)  
  75.                 {  
  76.                     // Initialization.  
  77.                     List<CountryObj> countryList = this.LoadData();  
  78.   
  79.                     // Selected countries list.  
  80.                     model.SelectedCountryLst = countryList.Where(p => model.SelectedMultiCountryId.Contains(p.Country_Id)).Select(q => q).ToList();  
  81.                 }  
  82.   
  83.                 // Loading drop down lists.  
  84.                 this.ViewBag.CountryList = this.GetCountryList();  
  85.             }  
  86.             catch (Exception ex)  
  87.             {  
  88.                 // Info  
  89.                 Console.Write(ex);  
  90.             }  
  91.   
  92.             // Info  
  93.             return this.View(model);  
  94.         }  
  95.  
  96.         #endregion  
  97.  
  98.         #endregion          
  99.  
  100.         #region Helpers  
  101.  
  102.         #region Load Data  
  103.   
  104.         /// <summary>  
  105.         /// Load data method.  
  106.         /// </summary>  
  107.         /// <returns>Returns - Data</returns>  
  108.         private List<CountryObj> LoadData()  
  109.         {  
  110.             // Initialization.  
  111.             List<CountryObj> lst = new List<CountryObj>();  
  112.   
  113.             try  
  114.             {  
  115.                 // Initialization.  
  116.                 string line = string.Empty;  
  117.                 string rootFolderPath = this.Server.MapPath("~/Content/files/");  
  118.                 string fileName = "country_list.txt";  
  119.                 string fullPath = rootFolderPath + fileName;  
  120.                 string srcFilePath = new Uri(fullPath).LocalPath;  
  121.                 StreamReader sr = new StreamReader(new FileStream(srcFilePath, FileMode.Open, FileAccess.Read));  
  122.   
  123.                 // Read file.  
  124.                 while ((line = sr.ReadLine()) != null)  
  125.                 {  
  126.                     // Initialization.  
  127.                     CountryObj infoObj = new CountryObj();  
  128.                     string[] info = line.Split(',');  
  129.   
  130.                     // Setting.  
  131.                     infoObj.Country_Id = Convert.ToInt32(info[0].ToString());  
  132.                     infoObj.Country_Name = info[1].ToString();  
  133.   
  134.                     // Adding.  
  135.                     lst.Add(infoObj);  
  136.                 }  
  137.   
  138.                 // Closing.  
  139.                 sr.Dispose();  
  140.                 sr.Close();  
  141.             }  
  142.             catch (Exception ex)  
  143.             {  
  144.                 // info.  
  145.                 Console.Write(ex);  
  146.             }  
  147.   
  148.             // info.  
  149.             return lst;  
  150.         }  
  151.  
  152.         #endregion  
  153.  
  154.         #region Get country method.  
  155.   
  156.         /// <summary>  
  157.         /// Get country method.  
  158.         /// </summary>  
  159.         /// <returns>Return country for drop down list.</returns>  
  160.         private IEnumerable<SelectListItem> GetCountryList()  
  161.         {  
  162.             // Initialization.  
  163.             SelectList lstobj = null;  
  164.   
  165.             try  
  166.             {  
  167.                 // Loading.  
  168.                 var list = this.LoadData()  
  169.                                   .Select(p =>  
  170.                                             new SelectListItem  
  171.                                             {  
  172.                                                 Value = p.Country_Id.ToString(),  
  173.                                                 Text = p.Country_Name  
  174.                                             });  
  175.   
  176.                 // Setting.  
  177.                 lstobj = new SelectList(list, "Value", "Text");  
  178.             }  
  179.             catch (Exception ex)  
  180.             {  
  181.                 // Info  
  182.                 throw ex;  
  183.             }  
  184.   
  185.             // info.  
  186.             return lstobj;  
  187.         }  
  188.  
  189.         #endregion  
  190.  
  191.         #endregion  
  192.     }  
  193. } 

In the above code, I have created "LoadData(...)" and "GetCountryList(...)" helper methods which will help in country data loading from .txt file. I have also created GET & POST "Index(...)" methods for request & response purpose.

Let's break down each method and try to understand what have we added here. The first method that is created here is "LoadData()" method i.e.

  1. #region Load Data  
  2.   
  3. /// <summary>  
  4. /// Load data method.  
  5. /// </summary>  
  6. /// <returns>Returns - Data</returns>  
  7. private List<CountryObj> LoadData()  
  8. {  
  9.     // Initialization.  
  10.     List<CountryObj> lst = new List<CountryObj>();  
  11.   
  12.     try  
  13.     {  
  14.         // Initialization.  
  15.         string line = string.Empty;  
  16.         string rootFolderPath = this.Server.MapPath("~/Content/files/");  
  17.         string fileName = "country_list.txt";  
  18.         string fullPath = rootFolderPath + fileName;  
  19.         string srcFilePath = new Uri(fullPath).LocalPath;  
  20.         StreamReader sr = new StreamReader(new FileStream(srcFilePath, FileMode.Open, FileAccess.Read));  
  21.   
  22.         // Read file.  
  23.         while ((line = sr.ReadLine()) != null)  
  24.         {  
  25.             // Initialization.  
  26.             CountryObj infoObj = new CountryObj();  
  27.             string[] info = line.Split(',');  
  28.   
  29.             // Setting.  
  30.             infoObj.Country_Id = Convert.ToInt32(info[0].ToString());  
  31.             infoObj.Country_Name = info[1].ToString();  
  32.   
  33.             // Adding.  
  34.             lst.Add(infoObj);  
  35.         }  
  36.   
  37.         // Closing.  
  38.         sr.Dispose();  
  39.         sr.Close();  
  40.     }  
  41.     catch (Exception ex)  
  42.     {  
  43.         // info.  
  44.         Console.Write(ex);  
  45.     }  
  46.   
  47.     // info.  
  48.     return lst;  
  49. }  
  50.  
  51. #endregion 

In the above method, I am simply loading my sample country list data extract from the ".txt" file into an in-memory list of type "CountryObj".

The second method that is created here is "GetCountryList()" method.

  1. #region Get country method.  
  2.   
  3.         /// <summary>  
  4.         /// Get country method.  
  5.         /// </summary>  
  6.         /// <returns>Return country for drop down list.</returns>  
  7.         private IEnumerable<SelectListItem> GetCountryList()  
  8.         {  
  9.             // Initialization.  
  10.             SelectList lstobj = null;  
  11.   
  12.             try  
  13.             {  
  14.                 // Loading.  
  15.                 var list = this.LoadData()  
  16.                                   .Select(p =>  
  17.                                             new SelectListItem  
  18.                                             {  
  19.                                                 Value = p.Country_Id.ToString(),  
  20.                                                 Text = p.Country_Name  
  21.                                             });  
  22.   
  23.                 // Setting.  
  24.                 lstobj = new SelectList(list, "Value", "Text");  
  25.             }  
  26.             catch (Exception ex)  
  27.             {  
  28.                 // Info  
  29.                 throw ex;  
  30.             }  
  31.   
  32.             // info.  
  33.             return lstobj;  
  34.         }  
  35.  
  36.         #endregion 

In the above method, I have converted my data list into the type that is acceptable by the Razor View Engine drop-down control.

Notice the following lines of codes in the above code.

  1. // Loading.  
  2.  var list = this.LoadData()  
  3.                    .Select(p =>  
  4.                              new SelectListItem  
  5.                              {  
  6.                                  Value = p.Country_Id.ToString(),  
  7.                                  Text = p.Country_Name  
  8.                              });  
  9.   
  10.  // Setting.  
  11.  lstobj = new SelectList(list, "Value", "Text"); 

In the above lines of code, the text values i.e. "Value" & "Text" pass in the "SelectList" constructor are the properties of "SelectListItem" class. I am simply telling "SelectList" class that these two properties contain the dropdown display text value and the corresponding id value mapping.

The third method that is created here is GET "Index()" method i.e.

  1. #region Get: /MultiSelectDropDown/Index method.  
  2.   
  3.         /// <summary>  
  4.         /// Get: /MultiSelectDropDown/Index method.  
  5.         /// </summary>          
  6.         /// <returns>Return index view</returns>  
  7.         public ActionResult Index()  
  8.         {  
  9.             // Initialization.  
  10.             MultiSelectDropDownViewModel model = new MultiSelectDropDownViewModel { SelectedMultiCountryId = new List<int>(), SelectedCountryLst = new List<CountryObj>() };  
  11.   
  12.             try  
  13.             {  
  14.                 // Loading drop down lists.  
  15.                 this.ViewBag.CountryList = this.GetCountryList();  
  16.             }  
  17.             catch (Exception ex)  
  18.             {  
  19.                 // Info  
  20.                 Console.Write(ex);  
  21.             }  
  22.   
  23.             // Info.  
  24.             return this.View(model);  
  25.         }  
  26.  
  27.         #endregion 

In the above code, I have mapped the dropdown list data into a view bag property, which will be used in Razor View control and done some basic initialization of my attached view model to the UI view.

The forth and the final created method is POST "Index(...)" method i.e.

  1. #region POST: /MultiSelectDropDown/Index  
  2.   
  3.         /// <summary>  
  4.         /// POST: /MultiSelectDropDown/Index  
  5.         /// </summary>  
  6.         /// <param name="model">Model parameter</param>  
  7.         /// <returns>Return - Response information</returns>  
  8.         [HttpPost]  
  9.         [AllowAnonymous]  
  10.         [ValidateAntiForgeryToken]  
  11.         public ActionResult Index(MultiSelectDropDownViewModel model)  
  12.         {  
  13.             // Initialization.  
  14.             string filePath = string.Empty;  
  15.             string fileContentType = string.Empty;  
  16.   
  17.             try  
  18.             {  
  19.                 // Verification  
  20.                 if (ModelState.IsValid)  
  21.                 {  
  22.                     // Initialization.  
  23.                     List<CountryObj> countryList = this.LoadData();  
  24.   
  25.                     // Selected countries list.  
  26.                     model.SelectedCountryLst = countryList.Where(p => model.SelectedMultiCountryId.Contains(p.Country_Id)).Select(q => q).ToList();  
  27.                 }  
  28.   
  29.                 // Loading drop down lists.  
  30.                 this.ViewBag.CountryList = this.GetCountryList();  
  31.             }  
  32.             catch (Exception ex)  
  33.             {  
  34.                 // Info  
  35.                 Console.Write(ex);  
  36.             }  
  37.   
  38.             // Info  
  39.             return this.View(model);  
  40.         }  
  41.  
  42.         #endregion 

In the above code, I have populated & mapped the selected countries list into my model and then pass the Model back to the View.

Step 7

To, integrate the bootstrap style dropdown plugin bootsrtap-select. Create an new JavaScript "Scripts\script-bootstrap-select.js" file and replace the following code in it. i.e.

  1. $(document).ready(function ()   
  2. {  
  3.     // Enable Live Search.  
  4.     $('#CountryList').attr('data-live-search', true);  
  5.   
  6.     //// Enable multiple select.  
  7.     $('#CountryList').attr('multiple', true);  
  8.     $('#CountryList').attr('data-selected-text-format', 'count');  
  9.   
  10.     $('.selectCountry').selectpicker(  
  11.     {  
  12.         width: '100%',  
  13.         title: '- [Choose Multiple Countries] -',  
  14.         style: 'btn-warning',  
  15.         size: 6,  
  16.         iconBase: 'fa',  
  17.         tickIcon: 'fa-check'  
  18.     });  
  19. });   

In the above code, I have called "slectpicker()" method of the bootstrap-select plugin with the basic settings. Before calling this method I have also set the live search property of the plugin, so, the end-user can search for the required value from the dropdown list. I have also set the multiple property as true which will enable the drop-down selection multiple and I have also set the text format property as count which will display the selection count for multi-select choice on the dropdown plugin.

Step 8

Now, create a view "Views\MultiSelectDropDown\Index.cshtml" file and replace the following code in it i.e.

  1. @using SaveMultiSelectDropDown.Models  
  2.   
  3. @model SaveMultiSelectDropDown.Models.MultiSelectDropDownViewModel  
  4.   
  5. @{  
  6.     ViewBag.Title = "ASP.NET MVC5: Multi Select Dropdown List";  
  7. }  
  8.   
  9.   
  10. <div class="row">  
  11.     <div class="panel-heading">  
  12.         <div class="col-md-8">  
  13.             <h3>  
  14.                 <i class="fa fa-tags"></i>  
  15.                 <span>ASP.NET MVC5: Multi Select Dropdown List</span>  
  16.             </h3>  
  17.         </div>  
  18.     </div>  
  19. </div>  
  20.   
  21. <br />  
  22.   
  23. <div class="row">  
  24.     <div class="col-md-6 col-md-push-2">  
  25.         <section>  
  26.             @using (Html.BeginForm("Index", "MultiSelectDropDown", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form" }))  
  27.             {  
  28.                 @Html.AntiForgeryToken()  
  29.   
  30.                 <div class="well bs-component">  
  31.                     <br />  
  32.   
  33.                     <div class="row">  
  34.                         <div class="col-md-6 col-md-push-2">  
  35.                             <div class="form-group">  
  36.                                 <div class="input-group">  
  37.                                     <span class="input-group-addon icon-custom"><i class="fa fa-flag"></i></span>  
  38.                                     @Html.ListBoxFor(m => m.SelectedMultiCountryId, this.ViewBag.CountryList as SelectList, new { id = "CountryList", @class = "selectCountry show-tick form-control input-md" })                                      
  39.                                 </div>  
  40.                             </div>  
  41.                         </div>  
  42.   
  43.                         <div class="col-md-6 col-md-push-2">  
  44.                             <div class="form-group">  
  45.                                 <input type="submit" class="btn btn-danger" value="Select" />  
  46.                             </div>  
  47.                         </div>  
  48.                     </div>  
  49.                 </div>  
  50.             }  
  51.         </section>  
  52.     </div>  
  53. </div>  
  54.   
  55. <hr />  
  56.   
  57. <div class="row">  
  58.     <div class="col-md-offset-4 col-md-8">  
  59.         <h3>List of Selected Countries </h3>  
  60.     </div>  
  61. </div>  
  62.   
  63. <hr />  
  64.   
  65. @if (Model.SelectedCountryLst != null &&  
  66.      Model.SelectedCountryLst.Count > 0)  
  67. {  
  68.     <div class="row">  
  69.         <div class="col-md-offset-1 col-md-8">  
  70.             <section>  
  71.                 <table class="table table-bordered table-striped">  
  72.                     <thead>  
  73.                         <tr>  
  74.                             <th style="text-align: center;">Sr.</th>  
  75.                             <th style="text-align: center;">Country Name</th>  
  76.                         </tr>  
  77.                     </thead>  
  78.   
  79.                     <tbody>  
  80.                         @for (int i = 0; i < Model.SelectedCountryLst.Count; i++)  
  81.                         {  
  82.                             <tr>  
  83.                                 <td style="text-align: center;">@(i + 1)</td>  
  84.                                 <td style="text-align: center;">@Model.SelectedCountryLst[i].Country_Name</td>  
  85.                             </tr>  
  86.                         }  
  87.                     </tbody>  
  88.                 </table>  
  89.             </section>  
  90.         </div>  
  91.     </div>  
  92. }  
  93.   
  94. @section Scripts  
  95. {  
  96.     @*Scripts*@  
  97.     @Scripts.Render("~/bundles/bootstrap-select")  
  98.   
  99.     @*Styles*@  
  100.     @Styles.Render("~/Content/Bootstrap-Select/css")  
  101. } 

In the above code, I have created the multi-select drop-down control with Bootstrap style plugin integration. I have also created the display list which will display the list of multiple countries as the user makes multiple selection choices via bootstrap style drop-down plugin and finally, I have also linked the require reference libraries for bootstrap style plugin.

The below lines of code have enabled the multiple-selection in bootstrap style dropdown Razor View UI component. Notice here that instead of using traditional razor view drop-down list UI component, I am using razor view List box UI component simply because I am making my dropdown plugin a multi-selection choice UI component.

  1. <div class="input-group">  
  2.     <span class="input-group-addon icon-custom"><i class="fa fa-flag"></i></span>  
  3.     @Html.ListBoxFor(m => m.SelectedMultiCountryId, this.ViewBag.CountryList as SelectList, new { id = "CountryList", @class = "selectCountry show-tick form-control input-md" })                                      
  4. </div> 

Step 9

Now, execute the project and you will be able to see the bootstrap style multi-select dropdown plugin in action, as shown below.





Conclusion

In this article, you will learn about multiple selection via "Bootstrap Select" dropdown plugin. You will also learn about the integration of the bootstrap style plugin with ASP.NET MVC5 platform. You will also learn in this article about the creation of list data which is compatible with razor view engine. You will also learn to load data from text file and you will learn to utilize the multiple-select choice via the Bootstrap Select drop-down plugin.


Similar Articles