ASP.NET MVC 5 - Bootstrap Style Dropdown Plugin (2024)

ASP.NET MVC 5 - Bootstrap Style Dropdown Plugin (1)

One of the cool things about theBootstrap CSS framework is that it provides very rich and interactive built-in plugins, which are easy to use and integrate in any Server side technology.

Today, I shall be demonstrating anintegration of Bootstrap CSS style dropdown plugin Bootstrap which needs to be selectedinto ASP.NET MVC5 platform.

Following are some prerequisites before you proceed 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 given below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise. I am using Country table data extract from Adventure Works Sample database.

Let's begin now.

Step 1Create a new MVC Web project and name it asBootstrapStyleDropdown.

Step 2Now, downloadBootstrap Select. Plugin and place the respective JavaScript & CSS files into Scripts & Content->style folders.

Step 3Open the Views->Shared->_Layout.cshtmlfile and replace the code given below in it i.e.

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8"/>
  5. <metaname="viewport"content="width=device-width,initial-scale=1.0">
  6. <title>@ViewBag.Title</title>
  7. @Styles.Render("~/Content/css")
  8. @Scripts.Render("~/bundles/modernizr")
  10. <!--FontAwesome-->
  11. <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
  12. </head>
  13. <body>
  14. <divclass="navbarnavbar-inversenavbar-fixed-top">
  15. <divclass="container">
  16. <divclass="navbar-header">
  17. <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">
  18. <spanclass="icon-bar"></span>
  19. <spanclass="icon-bar"></span>
  20. <spanclass="icon-bar"></span>
  21. </button>
  22. </div>
  23. </div>
  24. </div>
  25. <divclass="containerbody-content">
  26. @RenderBody()
  27. <hr/>
  28. <footer>
  29. <center>
  30. <p><strong>Copyright©@DateTime.Now.Year-<ahref="http://www.asmak9.com/">Asma'sBlog</a>.</strong>Allrightsreserved.</p>
  31. </center>
  32. </footer>
  33. </div>
  35. @Scripts.Render("~/bundles/jquery")
  36. @Scripts.Render("~/bundles/bootstrap")
  39. @RenderSection("scripts",required:false)
  40. </body>
  41. </html>

In the code given above, we have simply set our default layout of any page.

See Also
What is the Latest Version of Bootstrap ? - GeeksforGeeksASP.NET MVC - BootstrapTop Front-End and Back-End ASP .NET FrameworksASP.NET Core vs ASP.NET MVC: Which .NET framework is better for you?

Step 4

Create a new file CountryObj.cs under Models folder and replace the code given below in it i.e.

  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  6. namespaceBootstrapStyleDropdown.Models
  7. {
  8. publicclassCountryObj
  9. {
  10. publicintCountry_Id{get;set;}
  11. publicstringCountry_Name{get;set;}
  12. }
  13. }

In the code given above, I have simply created an object class which will map my sample list data.

Step 5

Now, create another new file under Models folder and replace the code given below in it i.e

  1. usingSystem.Collections.Generic;
  2. usingSystem.ComponentModel.DataAnnotations;
  4. namespaceBootstrapStyleDropdown.Models
  5. {
  6. publicclassDropdownViewModel
  7. {
  8. [Display(Name="Choosecountry")]
  9. publicint?SelectedCountryId{get;set;}
  10. }
  11. }

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.

Step 6

Create a new "HomeController.cs" controller in "Controllers" folder and replace the following code in it i.e.

  1. //-----------------------------------------------------------------------
  2. //<copyrightfile="HomeController.cs"company="None">
  3. //Copyright(c)Allowtodistributethiscode.
  4. //</copyright>
  5. //<author>AsmaKhalid</author>
  6. //-----------------------------------------------------------------------
  8. namespaceBootstrapStyleDropdown.Controllers
  9. {
  10. usingSystem;
  11. usingSystem.Collections.Generic;
  12. usingSystem.IO;
  13. usingSystem.Linq;
  14. usingSystem.Reflection;
  15. usingSystem.Web;
  16. usingSystem.Web.Mvc;
  17. usingModels;
  19. ///<summary>
  20. ///HomeControllerclass.
  21. ///</summary>
  22. publicclassHomeController:Controller
  23. {
  24. #regionIndexmethod
  26. ///<summary>
  27. ///GET:Indexmethod.
  28. ///</summary>
  29. ///<returns>Returns-indexviewpage</returns>
  30. publicActionResultIndex()
  31. {
  32. //Initialization.
  33. DropdownViewModelmodel=newDropdownViewModel();
  35. //Settings.
  36. model.SelectedCountryId=0;
  38. //Loadingdropdownlists.
  39. this.ViewBag.CountryList=this.GetCountryList();
  41. //Info.
  42. returnthis.View(model);
  43. }
  45. #endregion
  47. #regionHelpers
  49. #regionLoadData
  51. ///<summary>
  52. ///Loaddatamethod.
  53. ///</summary>
  54. ///<returns>Returns-Data</returns>
  55. privateList<CountryObj>LoadData()
  56. {
  57. //Initialization.
  58. List<CountryObj>lst=newList<CountryObj>();
  60. try
  61. {
  62. //Initialization.
  63. stringline=string.Empty;
  64. stringsrcFilePath="content/files/country_list.txt";
  65. varrootPath=Path.GetDirectoryName(Assembly.GetExecutingAssembly().CodeBase);
  66. varfullPath=Path.Combine(rootPath,srcFilePath);
  67. stringfilePath=newUri(fullPath).LocalPath;
  68. StreamReadersr=newStreamReader(newFileStream(filePath,FileMode.Open,FileAccess.Read));
  70. //Readfile.
  71. while((line=sr.ReadLine())!=null)
  72. {
  73. //Initialization.
  74. CountryObjinfoObj=newCountryObj();
  75. string[]info=line.Split(',');
  77. //Setting.
  78. infoObj.Country_Id=Convert.ToInt32(info[0].ToString());
  79. infoObj.Country_Name=info[1].ToString();
  81. //Adding.
  82. lst.Add(infoObj);
  83. }
  85. //Closing.
  86. sr.Dispose();
  87. sr.Close();
  88. }
  89. catch(Exceptionex)
  90. {
  91. //info.
  92. Console.Write(ex);
  93. }
  95. //info.
  96. returnlst;
  97. }
  99. #endregion
  101. #regionGetrolesmethod.
  103. ///<summary>
  104. ///Getcountrymethod.
  105. ///</summary>
  106. ///<returns>Returncountryfordropdownlist.</returns>
  107. privateIEnumerable<SelectListItem>GetCountryList()
  108. {
  109. //Initialization.
  110. SelectListlstobj=null;
  112. try
  113. {
  114. //Loading.
  115. varlist=this.LoadData()
  116. .Select(p=>
  117. newSelectListItem
  118. {
  119. Value=p.Country_Id.ToString(),
  120. Text=p.Country_Name
  121. });
  123. //Setting.
  124. lstobj=newSelectList(list,"Value","Text");
  125. }
  126. catch(Exceptionex)
  127. {
  128. //Info
  129. throwex;
  130. }
  132. //info.
  133. returnlstobj;
  134. }
  136. #endregion
  138. #endregion
  139. }
  140. }

In the code given above, 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 created here is LoadData() method i.e.

  1. #regionLoadData
  3. ///<summary>
  4. ///Loaddatamethod.
  5. ///</summary>
  6. ///<returns>Returns-Data</returns>
  7. privateList<CountryObj>LoadData()
  8. {
  9. //Initialization.
  10. List<CountryObj>lst=newList<CountryObj>();
  12. try
  13. {
  14. //Initialization.
  15. stringline=string.Empty;
  16. stringsrcFilePath="content/files/country_list.txt";
  17. varrootPath=Path.GetDirectoryName(Assembly.GetExecutingAssembly().CodeBase);
  18. varfullPath=Path.Combine(rootPath,srcFilePath);
  19. stringfilePath=newUri(fullPath).LocalPath;
  20. StreamReadersr=newStreamReader(newFileStream(filePath,FileMode.Open,FileAccess.Read));
  22. //Readfile.
  23. while((line=sr.ReadLine())!=null)
  24. {
  25. //Initialization.
  26. CountryObjinfoObj=newCountryObj();
  27. string[]info=line.Split(',');
  29. //Setting.
  30. infoObj.Country_Id=Convert.ToInt32(info[0].ToString());
  31. infoObj.Country_Name=info[1].ToString();
  33. //Adding.
  34. lst.Add(infoObj);
  35. }
  37. //Closing.
  38. sr.Dispose();
  39. sr.Close();
  40. }
  41. catch(Exceptionex)
  42. {
  43. //info.
  44. Console.Write(ex);
  45. }
  47. //info.
  48. returnlst;
  49. }
  51. #endregion
See Also
Integration Into an Existing Project | ASP.NET Bootstrap Controls

In the method given above, 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.

  1. #regionGetcountrymethod.
  3. ///<summary>
  4. ///Getcountrymethod.
  5. ///</summary>
  6. ///<returns>Returncountryfordropdownlist.</returns>
  7. privateIEnumerable<SelectListItem>GetCountryList()
  8. {
  9. //Initialization.
  10. SelectListlstobj=null;
  12. try
  13. {
  14. //Loading.
  15. varlist=this.LoadData()
  16. .Select(p=>
  17. newSelectListItem
  18. {
  19. Value=p.Country_Id.ToString(),
  20. Text=p.Country_Name
  21. });
  23. //Setting.
  24. lstobj=newSelectList(list,"Value","Text");
  25. }
  26. catch(Exceptionex)
  27. {
  28. //Info
  29. throwex;
  30. }
  32. //info.
  33. returnlstobj;
  34. }
  36. #endregion

In the method given above, I have converted my data list into type, which is acceptable by razor view engine dropdown control. Notice the lines of code in the code given above.

  1. varlist=this.LoadData()
  2. .Select(p=>
  3. newSelectListItem
  4. {
  5. Value=p.Country_Id.ToString(),
  6. Text=p.Country_Name
  7. });
  9. //Setting.
  10. lstobj=newSelectList(list,"Value","Text");

In the lines of code, the text value i.e. Value & Text is passed in the SelectList constructor are the properties of SelectListItem class. We are simply telling SelectList class that these two properties contains the dropdown, which displays the text value and the corresponding id mapping.

The third method, which is created here is Index() method i.e.

  1. #regionIndexmethod
  3. ///<summary>
  4. ///GET:Indexmethod.
  5. ///</summary>
  6. ///<returns>Returns-indexviewpage</returns>
  7. publicActionResultIndex()
  8. {
  9. //Initialization.
  10. DropdownViewModelmodel=newDropdownViewModel();
  12. //Settings.
  13. model.SelectedCountryId=0;
  15. //Loadingdropdownlists.
  16. this.ViewBag.CountryList=this.GetCountryList();
  18. //Info.
  19. returnthis.View(model);
  20. }
  22. #endregion

In the code given above, I have mapped the dropdown list data into a view bag property, which will be used in razor view control.

Step 7

Create a view Index.cshtml file under Views folder and replace the code given below in it i.e.

  1. @modelBootstrapStyleDropdown.Models.DropdownViewModel
  2. @{
  3. ViewBag.Title="BootstrapStyleDropdown";
  4. }
  6. <h2>@ViewBag.Title.</h2>
  8. <section>
  9. <divclass="wellbs-component">
  10. <br/>
  12. <divclass="row">
  13. <divclass="col-xs-4col-xs-push-0">
  14. <divclass="form-group">
  15. @Html.DropDownListFor(m=>m.SelectedCountryId,this.ViewBag.CountryListasSelectList,new{@class="form-control"})
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </section>

In the code given above, we have created our dropdown control without Bootsrtap style plugin integration.

Step 8

Execute the project and you will see theresult, as shown below with the integration of bootstrap style plugin integration.

ASP.NET MVC 5 - Bootstrap Style Dropdown Plugin (2)

Step 9

Now, let's integrate bootstrap style dropdown plugin bootstrap select. Create an new JavaScript "script-bootstrap-select.js" under "Scripts" folder and replace the code given below in it.

  1. $(document).ready(function()
  2. {
  3. //EnableLiveSearch.
  4. $('#CountryList').attr('data-live-search',true);
  6. $('.selectCountry').selectpicker(
  7. {
  8. width:'100%',
  9. title:'-[ChooseCountry]-',
  10. style:'btn-warning',
  11. size:6
  12. });
  13. });

In the code given above, 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.

Step 10

Open Index.cshtml file and replace the code given below in it i.e.

  1. @modelBootstrapStyleDropdown.Models.DropdownViewModel
  2. @{
  3. ViewBag.Title="BootstrapStyleDropdown";
  4. }
  6. <h2>@ViewBag.Title.</h2>
  8. <section>
  9. <divclass="wellbs-component">
  10. <br/>
  12. <divclass="row">
  13. <divclass="col-xs-4col-xs-push-0">
  14. <divclass="form-group">
  15. @Html.DropDownListFor(m=>m.SelectedCountryId,this.ViewBag.CountryListasSelectList,new{id="CountryList",@class="selectCountryshow-tickform-control"})
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </section>
  22. @sectionScripts
  23. {
  24. @*Scripts*@
  25. @Scripts.Render("~/bundles/bootstrap-select")
  27. @*Styles*@
  28. @Styles.Render("~/Content/Bootstrap-Select/css")
  29. }

In the code given above, we have added reference links of Bootstrap Select plugin and set HTML ID and classes related to plugin settings.

Step 11

Now, execute the project and you will see bootstrap style dropdown plugin in an action, as shown below i.e.

ASP.NET MVC 5 - Bootstrap Style Dropdown Plugin (3)
Conclusion

In this article, you learned about Bootstrap Select" dropdown plugin. You also learned about the integration of the bootstrap style plugin with ASP.NET MVC5 platform. In addition to it, you havelearned about the creation of list data which is compatible with razor view engine.

ASP.NET MVC 5 - Bootstrap Style Dropdown Plugin (2024)
Top Articles
74% Data Breaches Are Due to Human Error
Understanding Double VPN: How Does It Work?
Omega Pizza-Roast Beef -Seafood Middleton Menu
Funny Roblox Id Codes 2023
Pollen Count Los Altos
Lifebridge Healthstream
Jeremy Corbell Twitter
Unlocking the Enigmatic Tonicamille: A Journey from Small Town to Social Media Stardom
Merlot Aero Crew Portal
Ncaaf Reference
Premier Boating Center Conroe
Craigslist Pets Longview Tx
Does Breckie Hill Have An Only Fans – Repeat Replay
Gayla Glenn Harris County Texas Update
Pinellas Fire Active Calls
Selfservice Bright Lending
Azur Lane High Efficiency Combat Logistics Plan
Buying Cars from Craigslist: Tips for a Safe and Smart Purchase
Teekay Vop
Happy Homebodies Breakup
Low Tide In Twilight Ch 52
Kroger Feed Login
Black Lion Backpack And Glider Voucher
Craftybase Coupon
Tracking every 2024 Trade Deadline deal
Where to eat: the 50 best restaurants in Freiburg im Breisgau
2021 Tesla Model 3 Standard Range Pl electric for sale - Portland, OR - craigslist
Best Restaurants Ventnor
Kacey King Ranch
Vlocity Clm
Iban's staff
Pill 44615 Orange
Build-A-Team: Putting together the best Cathedral basketball team
Buhsd Studentvue
Collier Urgent Care Park Shore
The disadvantages of patient portals
Is The Nun Based On a True Story?
Gary Lezak Annual Salary
Ferguson Employee Pipeline
Verizon Outage Cuyahoga Falls Ohio
Entry of the Globbots - 20th Century Electro​-​Synthesis, Avant Garde & Experimental Music 02;31,​07 - Volume II, by Various
O'reilly's El Dorado Kansas
Trivago Anaheim California
Courtney Roberson Rob Dyrdek
Www Craigslist Com Atlanta Ga
Lawrence E. Moon Funeral Home | Flint, Michigan
How to Connect Jabra Earbuds to an iPhone | Decortweaks
Ephesians 4 Niv
53 Atms Near Me
28 Mm Zwart Spaanplaat Gemelamineerd (U999 ST9 Matte | RAL9005) Op Maat | Zagen Op Mm + ABS Kantenband
Latest Posts
Do I need an appraisal for a HELOC? | Figure
What's the Difference Between Gross Income vs Net Income?
Article information

Author: Velia Krajcik

Last Updated:

Views: 5874

Rating: 4.3 / 5 (54 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Velia Krajcik

Birthday: 1996-07-27

Address: 520 Balistreri Mount, South Armand, OR 60528

Phone: +466880739437

Job: Future Retail Associate

Hobby: Polo, Scouting, Worldbuilding, Cosplaying, Photography, Rowing, Nordic skating

Introduction: My name is Velia Krajcik, I am a handsome, clean, lucky, gleaming, magnificent, proud, glorious person who loves writing and wants to share my knowledge and understanding with you.