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
Network Handoff: The Ultimate Guide
Find Answers | iRobot
Ups Customer Center Locations
Woodward Avenue (M-1) - Automotive Heritage Trail - National Scenic Byway Foundation
Bj 사슴이 분수
Week 2 Defense (DEF) Streamers, Starters & Rankings: 2024 Fantasy Tiers, Rankings
Hotels Near 500 W Sunshine St Springfield Mo 65807
Hardly Antonyms
Corporate Homepage | Publix Super Markets
Tiraj Bòlèt Florida Soir
Knaben Pirate Download
2016 Hyundai Sonata Price, Value, Depreciation & Reviews | Kelley Blue Book
Aspen.sprout Forum
Busty Bruce Lee
Peraton Sso
Teenleaks Discord
Dr Adj Redist Cadv Prin Amex Charge
Bj Alex Mangabuddy
Video shows two planes collide while taxiing at airport | CNN
Craigslist In Visalia California
Unity - Manual: Scene view navigation
St. Petersburg, FL - Bombay. Meet Malia a Pet for Adoption - AdoptaPet.com
Accident On The 210 Freeway Today
Trivago Myrtle Beach Hotels
Barista Breast Expansion
Dell 22 FHD-Computermonitor – E2222H | Dell Deutschland
Mawal Gameroom Download
Ofw Pinoy Channel Su
Grandstand 13 Fenway
Craigslist Free Stuff San Gabriel Valley
Nail Salon Open On Monday Near Me
JD Power's top airlines in 2024, ranked - The Points Guy
Σινεμά - Τι Ταινίες Παίζουν οι Κινηματογράφοι Σήμερα - Πρόγραμμα 2024 | iathens.gr
Workday Latech Edu
Senior Houses For Sale Near Me
Montrose Colorado Sheriff's Department
Craigslist Lakeside Az
Ishow Speed Dick Leak
Hellgirl000
Invalleerkracht [Gratis] voorbeelden van sollicitatiebrieven & expert tips
Emulating Web Browser in a Dedicated Intermediary Box
התחבר/י או הירשם/הירשמי כדי לראות.
Honkai Star Rail Aha Stuffed Toy
Victoria Vesce Playboy
Stitch And Angel Tattoo Black And White
Accident On 40 East Today
How to Find Mugshots: 11 Steps (with Pictures) - wikiHow
Myhrkohls.con
Deviantart Rwby
Gelato 47 Allbud
Invitation Quinceanera Espanol
Latest Posts
LendingTree Personal Loans Review 2024
The Best Place to Invest in Property in the World: 2024 List
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.