In this article, we will learn how to use Select2 jQuery plugin in ASP.NET Core. We will build a prototype application that can demonstrate various usages of this plugin. The Variants that we will cover are Simple Static Select, AJAX Select, AJAX Multi Select, Custom HTML in Select2. You can find the source code of the entire implementation here. Let’s begin.

Table of Contents

• What is Select2?
• What we will build?
• Getting Started with Select2 jQuery plugin in ASP.NET Core
• Scaffolding Customer Entity
• Building a Search API Endpoint
• Importing Select2 jQuery plugin via Libman
• Simple Select with Static Values
• Select using AJAX Call to API
• Multiple Select
• Advanced Select with Custom HTML
• Summary

What is Select2?

Select2 is a powerful JQuery plugin that is designed to add more power to the traditional box that is displayed on the browser. It supports searching, remote data-sets via AJAX, mult-selects, pagination, grouping, custom rendering and so much more. Why use the normal select box when you use this awesome plugin? What we will build? We will be building an ASP.NET Core 3.1 Web Application and use select2 plugin. The variants of the plugin we will be going through are: Simple Static Select – Option will be hardcoded Select2 box with data returned from an AJAX Call that uses our ASP.NET Core WebApi Multi-Select Custom Rendered Options using HTML Here is a quick look on what we will be building in this tutorial. Getting Started with Select2 jQuery plugin in ASP.NET Core Let’s create a new ASP.NET Core 3.1 WebApplication with the Razor Pages Template. We will be creating few extra Pages for a simple CRUD Operation ( using Razor View Scaffoding ) on the Customer Entity, an API endpoint that returns a list of Customers based on the search text, re-use the Index.cshtml and add in all the variants of Select2 Plugin. I will be using Visual Studio 2019 as my IDE. Our Dataaccess layer will be Entity Framework Core with the SQL Server Provider. public class Customer { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string City { get; set; } public byte[] Photo { get; set; } } This will be the Customer Model that we will be using throughout our tutorial. Next, install the required Entity Framework Core packages and connect your application to a database via EFCore. As this part is out of scope for the article, i will skip the steps and reach the point where I have EFCore ready and configured for my application. However, if you are new to EFCore, I have written quite a lot on implementing a simple EFCore Code First Approach. You can read more about it here – Entity Framework Core in ASP.NET Core 3.1 – Getting Started . Alternatively you could just use any Data Access Technology here like Dapper or even a direct SQLConnection. The Ultimate aim is to build an API that can return list of customers. Even some static values would do, but it’s always better to connect to a database as you can learn quite a lot on the way and also see how it performs in a more practical world.

#asp.net core