---
title: "Tech Tutorial: Select2 with ASP.NET MVC"
description: In this blog, the author writes about Select2, a useful jQuery plugin available for developers. The blog also details steps to create a simple application in ASP.NET MVC using Select2.
image: https://blog.e-zest.com/hubfs/blog-files/dropdown1.png
---

[![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/)

- [WORK](https://www.e-zest.com/our-work)
- [SERVICES](https://www.e-zest.com/our-services) 
    - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services)
    - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services)
    - [Digital Commerce](https://www.e-zest.com/digital-commerce-services)
    - [Digital Operations](https://www.e-zest.com/digital-operations)
    - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services)
    - [Digital Experience Design](https://www.e-zest.com/digital-experience-design)
- [INSIGHTS](https://blog.e-zest.com/)
- [CAREERS](https://www.e-zest.com/careers)
- [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services)
- [GENERATIVE AI](https://www.e-zest.com/generative-ai)
- [Healthcare](https://healthcare.e-zest.com)
- [Contact Us](https://www.e-zest.com/contact-us)

- ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg)

  [BLOGS](https://blog.e-zest.com)
  
  #### Elevating Product Engineering with AI and ML

  As technology evolves and customer choices broaden, there is an increasing ...

  [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml)
- ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg)

  [NEWS](https://blog.e-zest.com/news)
  
  #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024

  We are delighted to announce that e-Zest – An Accion Labs Company has been ...

  [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024)
- ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png)

  [CSR](https://blog.e-zest.com/csr)
  
  #### e-Zest Solutions supports Digital Pune Mission

  **Pune, India:** e-Zest Solutions, a leading digital technology innovation ...

  [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission)

- [Work](https://www.e-zest.com/our-work)
- [Services](https://www.e-zest.com/our-services)
- [Insights](https://blog.e-zest.com)
- [Careers](https://www.e-zest.com/careers)
- [Enterprise Data](https://www.e-zest.com/enterprise-data-services)
- [Generative AI](https://www.e-zest.com/generative-ai)
- [Innovations](https://www.e-zest.com/innovations)
- [Healthcare](https://healthcare.e-zest.com)
- [About](https://www.e-zest.com/about-us)
- [Contact](https://www.e-zest.com/contact-us)

- [Blog](https://blog.e-zest.com/)
- [News](https://blog.e-zest.com/news)
- [CSR](https://blog.e-zest.com/csr)

- [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/)
- [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest)
- [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638)
- [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/)
- [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate)

[![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc#top)

Hit enter to search or ESC to close

Insights

e-Zest members share technology ideas to foster digital transformation.

- [Blog](https://blog.e-zest.com)
- [News](https://blog.e-zest.com/news)
- [Podcasts](https://www.e-zest.com/podcasts)
- [Healthcare](https://blog.e-zest.com/healthcare)
- [CSR](https://blog.e-zest.com/csr)
- [Whitepaper](https://blog.e-zest.com/whitepaper)
- [Playbook](https://blog.e-zest.com/playbook)
- [Media Kit](https://www.e-zest.com/media-kit)

# Tech Tutorial: Select2 with ASP.NET MVC

[Yogesh Kulkarni](https://blog.e-zest.com/author/yogesh-kulkarni)  Nov 19, 2015

[ASP.NET](https://blog.e-zest.com/topic/asp-net) [jQuery](https://blog.e-zest.com/topic/jquery) [Technology](https://blog.e-zest.com/topic/technology)

- <https://www.linkedin.com/shareArticle?mini=true&url=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc&title=&summary=&source=>
- <https://twitter.com/intent/tweet?source=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc&text=Tech%20Tutorial:%20Select2%20with%20ASP.NET%20MVC>
- <https://www.facebook.com/sharer/sharer.php?u=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc>
- <https://www.instagram.com/ezestsolutions/?u=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc>

- **Why Select2:** 
    - Using this jQuery plugin for dropdown lists, you can implement features such as option grouping, searching, infinite scrolling, tagging, remote data sets and other highly used features.
    - To use select2 in web projects, you just have to include JavaScript and CSS files of Select2 in your website.
    - Current version of select2 is 4.0.0. You can easily include these files by installation of NuGet package ‘Select2.js’ from NuGet package manager. You can see examples of Select2 [here](https://select2.github.io/examples.html).
- **Steps of Implementation:**

 1\. Create a blank ASP.NET MVC project, and install NuGet packages Select2.js, jQuery and jQuery Unobtrusive.  
2\. Add one controller with the name ‘HomeController’ and add view for default method ‘Index’.  
3\. Create new class in Models folder ‘IndexViewModel.cs as shown below:

`public class IndexViewModel`

`{`

`   [Required(ErrorMessage="Please select any option")]`

`   public string OptionId { get; set; }`

`}`

 4\. Bind ‘Index.cshtml’ view with IndexViewModelClass as model, by adding the following line in Index view:

`@model Select2InMvcProject.Models.IndexViewModel`

5\. In ‘Index.cshtml’, include the css and js files below:

`<link href="~/Content/css/select2.css" rel="stylesheet" />`

`<script src="~/Scripts/jquery-2.1.4.js"></script>`

`<script src="~/Scripts/select2.js"></script>`

`<script src="~/Scripts/jquery.validate.js"></script>`

`<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>`

6\. Write the following code in the Index view for creation of select list:

`@using (Html.BeginForm())`

`{`

`   <br /><br />`

`   @Html.DropDownListFor(n => n.OptionId, Enumerable.Empty<SelectListItem>(), new { @id = "txtOptionId", @style = "width:300px;" })`

`//Created selectlist with empty enumerable of SelectListItem and given //id as “txtOptionId”`

`   @Html.ValidationMessageFor(n => n.OptionId)`

`//Adds span of validation error message`

`   <br /><br />`

`<button type="submit">Submit</button>`

`   <br /><br />`

`}`

7\. For applying Select2 to the dropdown list created above, fetching data from server side and for infinite scroll, use the jQuery code below in Index view:

`<script type="text/javascript">`

`   $(document).ready(function () {`

`       var pageSize = 20;`

`       var optionListUrl = '@Url.Action("GetOptionList", "Home")';`

`//Method which is to be called for populating options in dropdown //dynamically`

`       $('#txtOptionId').select2(`

`       {`

`           ajax: {`

`               delay: 150,`

`               url: optionListUrl,`

`               dataType: 'json',`

` `

`               data: function (params) {`

`                   params.page = params.page || 1;`

`                   return {`

`                       searchTerm: params.term,`

`                       pageSize: pageSize,`

`                       pageNumber: params.page`

`                   };`

`               },`

`               processResults: function (data, params) {`

`                   params.page = params.page || 1;`

`                  return {`

`                       results: data.Results,`

`                       pagination: {`

`                           more: (params.page * pageSize) < data.Total`

`                       }`

`                   };`

`               }`

`           },`

`           placeholder: "-- Select --",`

`           minimumInputLength: 0,`

`           allowClear: true,`

`   });`

`});`

`</script>`

8\. Create new class in Models folder with name ‘Select2OptionModel’ and add the two classes below:

`public class Select2OptionModel`

`{`

`       public string id { get; set; }`

`       public string text { get; set; }`

`}`

`public class Select2PagedResult`

`{`

`       public int Total { get; set; }`

`       public List<Select2OptionModel> Results { get; set; }`

`}`

9\. Create one new folder with name ‘Repository’ in the solution, and add new class in that folder with name ‘Select2Repository. The functions in this class are mentioned below:

`public class Select2Repository`

`   {`

`       IQueryable<Select2OptionModel> AllOptionsList;`

`public Select2Repository()`

`{`

`           AllOptionsList = GetSelect2Options();`

`}`

`IQueryable<Select2OptionModel> GetSelect2Options()`

`                  {`

`                                     string cacheKey = "Select2Options";`

` `

`                                     //check cache`

`                                     if (HttpContext.Current.Cache[cacheKey] != null)`

`                                     {`

`return (IQueryable<Select2OptionModel>)HttpContext.Current.Cache[cacheKey];`

`                                     }`

` `

`                                     var optionList = new List<Select2OptionModel>();`

`                                     var optionText = "Option Number ";`

`                                     for (int i = 1; i < 1000; i++)`

`                                     {`

`                                     optionList.Add(new Select2OptionModel`

`                                     {`

`                                               id = i.ToString(),`

`                                               text = optionText + i`

`                                     });`

`                                   }`

` `

`                                     var result = optionList.AsQueryable();`

` `

`                                     //cache results`

`                                     HttpContext.Current.Cache[cacheKey] = result;`

` `

`                                     return result;`

`}`

` `

`List<Select2OptionModel> GetPagedListOptions(string searchTerm, int pageSize, int pageNumber, out int totalSearchRecords)`

`                  {`

`                                     var allSearchedResults = GetAllSearchResults(searchTerm);`

`                                     totalSearchRecords = allSearchedResults.Count;`

`return allSearchedResults.Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();`

`                  }`

` `

`                  List<Select2OptionModel> GetAllSearchResults(string searchTerm)`

`                  {`

`                                     var resultList = new List<Select2OptionModel>();`

`                                      if (!string.IsNullOrEmpty(searchTerm))`

`resultList = AllOptionsList.Where(n => n.text.ToLower().Contains(searchTerm.ToLower())).ToList();`

`                                     else`

`                                     resultList = AllOptionsList.ToList();`

`                                     return resultList;`

`                  }`

` `

`                  public Select2PagedResult GetSelect2PagedResult(string searchTerm, int pageSize, int pageNumber)`

`                  {`

`                                     var select2pagedResult = new Select2PagedResult();`

`                                     var totalResults = 0;`

`                                     select2pagedResult.Results = GetPagedListOptions(searchTerm,`

`pageSize, pageNumber, out totalResults);`

`                                     select2pagedResult.Total = totalResults;`

`                                     return select2pagedResult;`

`}`

`}`

` `

` `

1. In HomeController class, create new method as shown below:

`public JsonResult GetOptionList(string searchTerm, int pageSize, int pageNumber)`

`{`

`     var select2Repository = new Select2Repository();`

`     var result = select2Repository.GetSelect2PagedResult(searchTerm, pageSize, pageNumber);`

`     return Json(result, JsonRequestBehavior.AllowGet);`

`}`

11\. Once you are done with coding, you can build and run the project. The output will be shown as below:

``Fig. 1: Select2 Dropdown list

![dropdown2.png](https://blog.e-zest.com/hubfs/blog-files/dropdown2.png "dropdown2.png")Fig. 2: Search Results of Select2 Dropdown

**Summary:**

Congratulations! You have now completed a simple application in ASP.NET MVC using Select2. The infinite scrolling feature has also been implemented with server side options population.

Select2 is very useful for dropdown lists with large datasets. You can use it to populate options from a large database table such as those containing records which go into lakhs.

*References:*

<https://select2.github.io/examples.html%20>*[https://select2.github.io/examples.html](https://select2.github.io/examples.html)*

*[![Download The Demo Project Here](https://no-cache.hubspot.com/cta/default/744339/2beb8af8-f945-488c-bb08-39c7512d79f8.png)](https://cta-redirect.hubspot.com/cta/redirect/744339/2beb8af8-f945-488c-bb08-39c7512d79f8)*

 

- <https://twitter.com/intent/tweet?source=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc&text=Tech%20Tutorial:%20Select2%20with%20ASP.NET%20MVC>
- <https://www.facebook.com/sharer/sharer.php?u=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc>
- <https://www.linkedin.com/shareArticle?mini=true&url=https://blog.e-zest.com/tech-tutorial-select2-with-asp.net-mvc&title=&summary=&source=>

### Similar Blog

[![ASP.NET Core App using EF Core and SQLite database](https://blog.e-zest.com/hubfs/Basics%20of%20Stored%20Procedure%20in%20SQL%20Server%20Management%20Studio-191118.png) ASP.NET Core App using EF Core and SQLite database **INTRODUCTION**The tutorial covers a basic example of how to build a simple API in ASP.NET Core using Entity Framework Core and ... By Md Shahzad Adil Jun 19, 2018](https://blog.e-zest.com/asp.net-core-app-using-ef-core-and-sqlite-database)

[![Techniques for code-based navigation in ASP.Net](https://blog.e-zest.com/hubfs/The%20best%20techniques%20for%20code-based%20navigation%20in%20ASP.Net%20.jpg) Techniques for code-based navigation in ASP.Net In a world of desktop applications, where you build programs with multiple forms, you almost always end up calling one form from ... By Aarti Shinde Nov 17, 2017](https://blog.e-zest.com/techniques-for-code-based-navigation-in-asp.net)

[How to improve the performance of the application in ASP .Net **Introduction** By Swapna Patne Aug 25, 2014](https://blog.e-zest.com/how-to-improve-the-performance-of-the-application-in-asp/)

[How to Retrieve Active Directory Information for Authentication in ASP.NET **Introduction** By Swapna Patne Jan 14, 2013](https://blog.e-zest.com/how-to-retrieve-active-directory-information-for-authentication-in-asp-net/)

## Helping Organizations Thrive in the Digital Age

[Contact Us](https://www.e-zest.com/contact-us)

- [About](https://www.e-zest.com/about-us)
- [Services](https://www.e-zest.com/our-services)
- [Work](https://www.e-zest.com/our-work)
- [Insights](https://blog.e-zest.com/)
- [Healthcare](https://healthcare.e-zest.com/)
- [Accion Labs](https://www.accionlabs.com/)

- <https://www.linkedin.com/company/e-zest-solutions/>
- <https://twitter.com/ezest>
- <https://www.facebook.com/eZest/>
- <https://www.instagram.com/ezestsolutions/>
- <https://www.youtube.com/user/ezestcorporate>

- Dallas
- Detroit
- Hannover
- Vienna
- London
- Pune

 © 2025 e-Zest Solutions

- [Privacy Policy](https://www.e-zest.com/privacypolicy)
- [Cookie Policy](https://www.e-zest.com/cookie-policy)

 Contact us

 Contact us

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.