Multi-Select Dropdown With Checkboxes Using jQuery In MVC

Introduction

 

This article is about creating a multi-select dropdown with checkboxes in MVC by using Jquery on Countries sample data. This kind of scenario is used on applications such as on insurance domain. When a customer needed to be provided with travel or health Insurance from the origin to the destination country or if the person is traveling to multiple destinations. 

 

Here, I’ll try to explain the process involved in creating MultiSelect Dropdown with checkboxes.

 

To understand, knowledge of SQL, MVC, EntityFramework, LINQ, and Jquery is needed.

 

Steps in Creating the Application

1. Create an SQL Database with Table using the mentioned Dbscript.
2. Using Visual Studio Create an MVC Web Application
3. To the Models Folder, Add ADO.NET Entity Data Model by selecting Database First Approach with appropriate connections select the database and table for creating the edmx file.
4. Add a Controller with the required action method needed for this scenario.
5. Generate a View for Create Action Method or Just create the View manually and Add the code to it.
6. Add required script files in the View, which are needed for MultiSelect Dropdown so that the checkboxes will be shown along with the Dropdown.
7. If there is any trouble in creating Views or the data is shown irrelevant on the screen, just rebuild the solution and re-run the application.

Creating an SQL Database

 

We create a Database named as MultiselectDropdown with a Table CountriesList and Insert the countries list into it.

CREATE DATABASE [MultiselectDropdown]
Go
USE [MultiselectDropdown]
CREATE TABLE [dbo].[CountriesList](
[Id] int Identity(1,1)    NOT NULL,
[Country_Code] varchar(2) NOT NULL,
[DestinationCountry] nvarchar(100) NOT NULL,
PRIMARY KEY (Id)
)
INSERT INTO [dbo].[CountriesList] VALUES ( 'AF', 'Afghanistan');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AL', 'Albania');

INSERT INTO [dbo].[CountriesList] VALUES ( 'DZ', 'Algeria');
INSERT INTO [dbo].[CountriesList] VALUES ( 'DS', 'American Samoa');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AD', 'Andorra');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AO', 'Angola');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AI', 'Anguilla');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AQ', 'Antarctica');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AG', 'Antigua and Barbuda');
INSERT INTO [dbo].[CountriesList] VALUES ( 'AR', 'Argentina');

Creating an Edmx File with the help of ADO.NET Entity Data Model

Adding a Controller and Creating an Action Method

using System.Linq;
using System.Web.Mvc;
using MultiSelectDropdown.Models;

namespace MultiSelectDropdown.Controllers
{
    public class InsuranceCertificateController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Create()
        {
            using (MultiselectDropdownEntities db = new MultiselectDropdownEntities())
            {
                var result = (from CountriesList in db.CountriesLists select CountriesList).ToList();
                if(result!=null)
                {
                    ViewBag.myCountries = result.Select(x => new SelectListItem { Text = x.DestinationCountry, Value = x.Id.ToString() });
                }
            }
            return View();
        }
    }
}

Adding View

 

Right-click on "Create" Action Method,  select Add View and name it as "Create" and add the required code which is needed for MultiSelect Dropdown with Checkboxes.

@model MultiSelectDropdown.Models.InsuranceCertificate

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()
                        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
    <h4>InsuranceCertificate</h4>
    <hr />

    <div class="form-group">
        @Html.LabelFor(model => model.DestinationCountry, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">

            <input type="button" id="btnmyCountries" value="Get Selected Countries" />  /*id="btnmyCountries" is taken from JQuery Click Function which is written at the end of this View*/

            <div>
                <select id="myCountries" multiple="multiple" required=required name="myCountries"> /*id = "myCountries" is taken from JQuery Function multiselect which is written at the end of this View*/
                    @if (ViewBag.myCountries != null)   @*ViewBag.myCountries is taken from Controller Create Action Method*@
                    {
                        foreach (var item in ViewBag.myCountries)
                        {
                            if (item.Text != null)
                            {
                                <option value="@item.Value">
                                    @item.Text
                                </option>
                            }
                        }
                    }
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <head runat="server">
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/bootstrap-multiselect.js"></script>
        <link href="~/Content/bootstrap-multiselect.css" rel="stylesheet" />
        <script type="text/javascript">


        $(function () {
            $('#myCountries').multiselect({
                includeSelectAllOption: true,         /*To enable the Select all Option*/
                selectAllValue: 'multiselect-all',     /*The value used for the select all option can be configured using the selectAllValue*/
                enableFiltering: true,   /*A filter input will be added to dynamically filter all the options*/
                enableCaseInsensitiveFiltering: true,  /*To enable Case Insenstitive Filtering (Upper and Lower Case Letters)*/
                maxHeight: '300',
                buttonWidth: '235',
            });
        });

        $("#btnmyCountries").click(function () {
            var selected = $("#myCountries option:selected");    /*Current Selected Value*/
            var message = "";
            var arrSelected = [];      /*Array to store multiple values in stack*/
            selected.each(function () {
                arrSelected.push($(this).val());    /*Stack the Value*/
                message += $(this).text() + " " + $(this).val() + "\n";
            });
            alert(message);
            });
        </script>
    </head>

Adding required Script files to the view

 

It is mandatory to add script files to the "Create" View and files like jquery-3.3.1.min.js, bootstrap.js, bootstrap.min.js, bootstrap.min.css are added by default while creating a project by selecting a Project Template as an MVC Project. The remaining files like bootstrap-multiselect.js, bootstrap-multiselect.css, to be downloaded and added to the project and include a reference in the View. Without these two files, we get the output without checkboxes like below,

 

 

The multi-select bootstrap files are taken from this link where bootstrap-multiselect.js is available in dist -> js and bootstrap-multiselect.css is available in dist -> css folders. By adding these two files to the project and reference to the View, we can achieve the intended output like below.

 

In the output "Get Selected Countries" is the button to retrieve the selected countries, after selecting the countries if we click on the button we get the output as shown below.

 

 

Note

If you are not using "multiple" attribute in the View inside <select id="myCountries"multiple="multiple"required=required name="myCountries"> You'll get the output as Radio button like below.

 

Always be sure to include the "multiple" attribute with the "select" so that we get the output with Checkboxes.  

 

 

You can do various workarounds by following the instructions on this link with the help of bootstrap-multiselect.

 

Conclusion

 

In this article, we learned to get the details from the database and to populate the Countries data on Dropdown MultiSelect-Checkboxes by using the Create Action Method with the help of Linq and the View which is coded using JQuery with the help of multi-select bootstrap.

 

Happy Coding!