How to use Select2 jQuery plugin in ASP.NET CORE

How to use Select2 jQuery plugin in ASP.NET CORE

Select2 is a jQuery based replacement for HTML Select Control. It supports searching, remote data sets, and infinite scrolling of results. It is available in GitHub and is free to use for everyone.

Select2 works by changing the appearance and working of your normal HTML select control to Select2 control.

In this tutorial I will show you 2 important ways to use Select2 in your ASP.NET Core application. These are:

  • 1. How to select multiple options from select control and send them to the Controller by Model Binding.
  • 2. How to Bind the select control from data passed by the Controller.

First understand how to add a Select2 control in your ASP.NET Core View.

Are you learning Database programming then you need to check – Learn ADO.NET by building CRUD features in ASP.NET Core Application

Adding Select2 Control in your View

In your View’s head section add the following scripts:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $(".statesSelect").select2();
    });
</script>

Next add the select control in your View:

<select class="statesSelect" name="states" multiple="multiple">
    <option value="Select" disabled>Select</option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
</select>

You are now set to go. Let us now use it in 2 ways in ASP.NET Core Application.

1. Selecting Multiple Options from Select2

Here I will use Select2 control to select multiple options. So in your View add the model of type string array:

@model string[];

Next, add the following code to your View:

@{
    if (Model != null)
    {
        <p>Your selected values:</p>
        @foreach (string state in Model)
        {
            <p>@state</p>
        }
    }
}

<form method="post" asp-action="Index">
    Select States:
    <select class="statesSelect" name="states" multiple="multiple">
        <option value="Select" disabled>Select</option>
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
    </select>
    <button>Submit</button>
</form>

Explanation: The Model of string[] type will contain the multiple values which the user selects on the select2 control.

With the ‘foreach’ loop I show these multiple values in the view:

@foreach (string state in Model)
{
    <p>@state</p>
}

When the button is clicked then the Index action will be called. Now create the Index action methods in your controller:

public IActionResult Index()
{
    return View();
}

[HttpPost]
public IActionResult Index(string[] states)
{
    return View(states);
}

Notice that the HttpPost type Index action has the parameter of string array and name as ‘states’. When the button is clicked then this parameter will get the multiple selected values by Model Binding technique.

The Action will return these values that is the ‘states’ parameter value, to the View where they will be displayed.

Check the below Video which illustrates the working procedure:

select2 aspnet core working
Do you know that jQuery has another great plugin called Datatables which can be easily used in your projects – Learn jQuery DataTables in 2 minutes

Bind the Select2 control from Controller

You can also bind the Select2 control from dynamic values. Here I will send the values of select2 control from the Controller.

So change the Index Action method to:

public IActionResult Index()
{
    List<SelectListItem> data = new List<SelectListItem>() {
        new SelectListItem{Text="Alaska",Value="AL"},
        new SelectListItem{Text="Hawaii",Value="HI"}
    };
    ViewBag.Data = data;

    return View();
}

[HttpPost]
public IActionResult Index(string[] states)
{
    List<SelectListItem> data = new List<SelectListItem>() {
        new SelectListItem{Text="Alaska",Value="AL"},
        new SelectListItem{Text="Hawaii",Value="HI"}
    };
    ViewBag.Data = data;

    return View(states);
}

Notice I am adding the 2 values in List<SelectListItem> type variable and sending this variables value through ViewBag variable.

List<SelectListItem> data = new List<SelectListItem>() {
    new SelectListItem{Text="Alaska",Value="AL"},
    new SelectListItem{Text="Hawaii",Value="HI"}
};

Finally change the select control in the View with:

<select class="statesSelect" name="states" multiple="multiple" asp-items="ViewBag.Data">
</select>

Now the select2 control will have only 2 values in it for selection.

The link to download the full source code of this tutorial is given below:

Download
Conclusion

Select2 is an excellent jQuery plugin to make select controls modern and highly attractive. I strongly advise you to use it in your ASP.NET Core projects.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.

Leave a Reply

Your email address will not be published. Required fields are marked *