JQuery

Creating Dropdowns And Multi-Select Boxes Using Chosen JQuery Library

In this blog, we will learn how we can make long, difficult to use dropdowns and multi-select boxes to make it more user friendly, using the chosen jQuery library into an MVC Application.

For this, we need a chosen jQuery library. Since chosen is dependent on the  jQuery framework, we also need a jQuery library file.

Chosen jQuery is developed by Harvest.
 
Thus, let’s get started.

We will first create a MVC Web Application, using Visual Studio 2012.

To create a MVC project, open Visual Studio. Under File menu, select New and then select Project. After selecting the project, you will get the popup, as shown below.



As shown in figure 1, please select Web under Visual C# node. After selecting project template, select ASP.NET MVC 4 Web Application. Give appropriate project Name and click OK.



Since this project is for demo purposes I have selected an empty template. You can select, as per your requirement. After selecting an appropriate template, please click OK.

In this article, we will learn how we can make long, difficult to use dropdowns and multi-select boxes to more user friendly using chosen JQuery library into MVC application. For this we need Chosen JQuery library. Since chosen is dependent JQuery framework, we also need JQuery library file. Chosen JQuery is developed by Harvest. So let’s get started. Will first create a MVC Web application using Visual Studio 2012. To create a MVC project, open Visual Studio. Under File menu, select New and then select Project. After selecting project, you will get below popup. As shown in the Figure 1, please select Web under Visual C# node. After selecting Project Template, select ASP.NET MVC 4 Web Application. Give appropriate Project Name and then click OK. Since this project is for demo purpose, I have selected Empty Template. You can select as per your requirement. After selecting appropriate template, please click on OK. Since we had selected Empty project as shown in the Figure 2. We don’t have no view, model and controller files added. So we will first add controller and then view for an action method. To create a controller right click on Controllers folder. In “Add Controller” popup give proper name to controller and click Add. Now under HomeController.cs file you have Index method. To add a view for Index action method, right click on Index action method and click on Add as shown in below figure. For general CSS we have used Bootstrap CSS framework. Now we need Chosen JQuery library to be downloaded. To download Chosen JQuery, we will use NuGet Package Manager. Click on Reference ? Manager NuGet Packages. Search chosen under search box. Click on Install button to install chosen JQuery. Now we need to add reference under view file. To populate dropdown we will add property under ViewBag as shown below. using System; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Web; usingSystem.Web.Mvc; namespaceChosenDemo.Controllers { publicclassHomeController : Controller { // // GET: /Home/ publicActionResult Index() { List<selectlistitem /> Employees = newList<selectlistitem>(); Employees.Add(newSelectListItem() { Text = "Vinay", Value = "1" }); Employees.Add(newSelectListItem() { Text = "Sumeet", Value = "2" }); Employees.Add(newSelectListItem() { Text = "Rohan", Value = "3" }); Employees.Add(newSelectListItem() { Text = "Rupesh", Value = "4" }); Employees.Add(newSelectListItem() { Text = "Siddhesh", Value = "5" }); Employees.Add(newSelectListItem() { Text = "Pranali", Value = "6" }); Employees.Add(newSelectListItem() { Text = "Deepa", Value = "7" }); ViewBag.Employees = newSelectList(Employees, "Value", "Text"); return View(); } } } Since we have not added strongly typed view we will add below code to generate the dropdown html code. The first dropdown is to show you the traditional look and second dropdown will show you chosen look. <divclass="row"> <divclass="col-md-6"> @Html.DropDownList("ddlTradionalEmployee",ViewBag.EmployeesasIEnumerable<selectlistitem>,"--Select--") </div> <divclass="col-md-6"> @Html.DropDownList("ddlChosenEmployee",ViewBag.EmployeesasIEnumerable<selectlistitem>,"--Select--") </div> </div> Now to make the second dropdown chosen dropdown, we need to write to below JavaScript code. Now we will run the application and look how these dropdowns look. Now there are different option while initializing chosen dropdown. You can go to below link and check that out. Chosen Options Now we will look into multi-select box. Below is the code for multi-select. <divclass="row"> <divclass="col-md-6"> @Html.ListBox("lstTradionalEmployee", ViewBag.EmployeesasSelectList, new { style="width:90%" }) </div> <divclass="col-md-6"> @Html.ListBox("lstChosenEmployee",ViewBag.EmployeesasSelectList, new { style="width:90%" }) </div> </div> We need to initialize the chosen multi-select. To do this we will write code under document’s ready function. $("#lstChosenEmployee").chosen(); After running the application, we will get the below output. On Internet Explorer when we have large amount of data, searching an option under dropdown and multi-select would be very slow. To avoid this, we have option “max_shown_results”. This option shows the first specified matching records. For ex. If you specify 40, then it will show first 40 matching records and this will help to boost the performance while searching. I got the above situation, when I was implementing chosen JQuery and I thought its worth to share it. I hope, this article will help you to implement traditional dropdowns/multi-selects to more user-friendly dropdowns/multi-selects.

Since, we selected an empty project, as shown in the Figure 2, we have no view, model and controller files added.

Hence, we will first add the controller and view for an action method.

To create a controller, right click on Controllers folder. In “Add Controller”, popup gives the proper name to controller ,and click Add. Now, under HomeController.cs file, you have an Index method. To add a view for Index action method, right click on Index action method and click on Add, as shown in the figure, given below.



For general CSS, we have used Bootstrap CSS framework. Now, we need to choose jQuery library, which needs to to be downloaded. To download chosen jQuery, we will use NuGet Package Manager.



Click on Reference ? Manager NuGet Packages. Choose search under search box. Click Install button to install chosen jQuery.

Now, we need to add the reference under view file.
  1. <linkhreflinkhref="~/Content/bootstrap.min.css" rel="stylesheet" />  
  2. <linkhreflinkhref="~/Content/chosen.min.css" rel="stylesheet" />  
  3. <scriptsrcscriptsrc="~/Scripts/jquery-1.9.1.min.js">  
  4.     </script>  
  5.     <scriptsrcscriptsrc="~/Scripts/bootstrap.min.js">  
  6.         </script>  
  7.         <scriptsrcscriptsrc="~/Scripts/chosen.jquery.min.js">  
  8.             </script>  
  9.             To populate dropdown we will add property under ViewBag as shown below. using System; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Web; usingSystem.Web.Mvc; namespaceChosenDemo.Controllers { publicclassHomeController : Controller { // // GET: /Home/ publicActionResult Index() { List  
  10.             <SelectListItem> Employees = newList  
  11.                 <SelectListItem>(); Employees.Add(newSelectListItem() { Text = "Vinay", Value = "1" }); Employees.Add(newSelectListItem() { Text = "Sumeet", Value = "2" }); Employees.Add(newSelectListItem() { Text = "Rohan", Value = "3" }); Employees.Add(newSelectListItem() { Text = "Rupesh", Value = "4" }); Employees.Add(newSelectListItem() { Text = "Siddhesh", Value = "5" }); Employees.Add(newSelectListItem() { Text = "Pranali", Value = "6" }); Employees.Add(newSelectListItem() { Text = "Deepa", Value = "7" }); ViewBag.Employees = newSelectList(Employees, "Value", "Text"); return View(); } } }  
Since we have not added strongly typed view, we will add the code, given below to generate the dropdown HTML code.

The first dropdown shows you the traditional look and the second dropdown will show you the chosen look.
  1. <divclassdivclass="row">  
  2.     <divclassdivclass="col-md-6">  
  3.         @Html.DropDownList("ddlTradionalEmployee",ViewBag.EmployeesasIEnumerable  
  4.         <SelectListItem>,"--Select--")  
  5.             </div>  
  6.   
  7.             <divclassdivclass="col-md-6">  
  8.                 @Html.DropDownList("ddlChosenEmployee",ViewBag.EmployeesasIEnumerable  
  9.                 <SelectListItem>,"--Select--")  
  10.                     </div>  
  11.                     </div>  
  12.                     Now to make the second dropdown chosen dropdown, we need to write to below JavaScript code.  
  13.   
  14.                     <scripttypescripttype="text/javascript">  
  15.                         $(document).ready(function () { $("#ddlChosenEmployee").chosen(); });  
  16.                         </script>  
Now, we will run the Application and see how these dropdowns look.



Now, there are different options while initializing chosen dropdown. You can go to the link, given below and check it.

Chosen Options

Now, we will look into multi-select box. The code for multi-select is given below.
  1. <divclassdivclass="row">  
  2.     <divclassdivclass="col-md-6">  
  3.         @Html.ListBox("lstTradionalEmployee", ViewBag.EmployeesasSelectList, new { style="width:90%" })  
  4.         </div>  
  5.         <divclassdivclass="col-md-6">  
  6.             @Html.ListBox("lstChosenEmployee",ViewBag.EmployeesasSelectList, new { style="width:90%" })  
  7.             </div>  
  8.             </div>  
We need to initialize the chosen multi-select. To do this, we will write the code under document’s ready function.

$("#lstChosenEmployee").chosen();

After running the Application, we will get the output, shown below.



On Internet Explorer, when we have a large amount of data, searching an option under dropdown and multi-select would be very slow. To avoid this, we have an option “max_shown_results”. This option shows the first specified matching records.

For example, if you specify 40, it will show first 40 matching records and this will help to boost the performance while searching.

I got the situation, shown above, when I was implementing chosen jQuery and I thought it worthwhile to share it.

I hope this blog will help you to implement the traditional dropdowns/ multi-selects to more user-friendly dropdowns/ multi-selects.
Ebook Download
View all
Learn
View all
Membership not found