ASP.NET MVC5: Bootstrap Style Multi Select Dropdown Plugin
Multiple selection is important part of dropdown UI component as it improves user interactivity with the website in order to allow user to make his/her choice first and then send the request to the server for batch processing instead of again and again sending request to the server for same choice selection. One of the cool thing about Bootstrap CSS framework is that it provides a very rich and interactive built-in plugins, which are easy to use and integrate in any server side technology.
Today, I shall be demonstrating integration of the Bootsrtap CSS style dropdown with 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:
- Knowledge of ASP.NET MVC5.
- Knowledge of HTML.
- Knowledge of Bootstrap.
- Knowledge of Jquery.
- Knowledge of C# Programming.
1) Create a new MVC web project and name it "MultiSelectDropDown".
3) Open the "Views->Shared->_Layout.cshtml" file and replace following code in it i.e.
In the above code, I have simply created a basic default layout page and linked the require libraries into it.
4) Create a new "Helper_Code\Objects\CountryObj.cs" file and replace the following code in it i.e.
In the above code, I have simply created an object class which will map my sample list data in order to populate the dropdown list.
5) Now, create another new "Models\MultiSelectDropDownViewModel.cs" file and replace the following code in it i.e.
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 dropdown control and country object type list property which will display my multiple selection choice in a table after processing on server via asp.net mvc5 platform.
6) Create a new "Controllers\MultiSelectDropDownController.cs" file and replace the following code in it i.e.
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 that what have we added here. The first method that is created here is "LoadData()" method i.e.
In the above method, I am simply loading my sample country list data extract from the ".txt" file into in-memory list of type "CountryObj".
The second method that is created here is "GetCountryList()" method i.e.
In the above method, I have converted my data list into the type that is acceptable by razor view engine dropdown control.
Notice the following lines of codes in the above code i.e.
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.
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.
In the above code, I have populated & mapped the selected countries list into my model and the pass the model back to the view.
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 require value from the dropdown list. I have also set the multiple property as true which will enable the dropdown selection multiple and I have also set the text format property as count which will display the selection count for multi-select choice on dropdown plugin.
8) Now, create a view "Views\MultiSelectDropDown\Index.cshtml" file and replace the following code in it i.e.
In the above code, I have created the multi-select dropdown control with Bootsrtap style plugin integration. I have also created the display list which will display the list of multiple countries as the user makes multiple selection choice via bootstrap style dropdown 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.
9) Now, execute the project and you will be able to see the bootstrap style multi select dropdown plugin in action as shown below i.e.