ASP.NET MVC5: Bootstrap Style Dropdown Plugin
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 plugin Bootstrap Select 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 "BootstrapStyleDropdown".
3) Open the "Views->Shared->_Layout.cshtml" file and replace following code in it i.e.
In the above code, we have simply set our default layout of any page.
4) Create a new file "CountryObj.cs" under Models folder 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.
5) Now, create another new file "Models\DropdownViewModel.cs" under Models folder 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. Notice that I have created a null-able integer property which will capture my selected value from the razor view dropdown control.
6) Create a new "HomeController.cs" controller in "Controllers" folder and replace the following code in it i.e.
In the above code, I have created "LoadData()" , "GetCountryList()" & "Index()" methods. 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 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 type that is acceptable by razor view engine dropdown control. Notice following line of codes in the above code i.e.
In the above lines of code the text value i.e. "Value" & "Text" pass in the "SelectList" constructor are the properties of "SelectListItem" class. We are simply telling "SelectList" class that these two properties contain the dropdown displayed text value and the corresponding id mapping. The third method that is created here is "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.
7) Create a view "Index.cshtml" file under "Views" folder and replace following code in it i.e.
In the above code, I have created a dropdown control without the Bootsrtap style plugin integration.
8) Execute the project and you will see result as shown below without the integration of bootsrtap style plugin.
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 easily.
10) Open the "Index.cshtml" file and replace the following code in it i.e.
In the above code, we have added reference links of Bootstrap Select plugin and set the html ID and classes related to plugin settings.
11) Now, execute the project and you will see bootstrap style dropdown plugin in action as shown below i.e.