How to Create Multi Select dropdownlist with checkbox in Asp.Net Core MVC C#

In this article we learn a step by step process, How to Create Multi Select dropdownlist with checkboxes in Asp.Net Core C#.

Prerequisites

• Download and install .Net Core 6.0 SDK from here
• Download and Install Microsoft Visual Studio 2022 from here

Create an Asp.Net Core Web App

• Open visual studio and click the Create New Project Option
• Select the Template

• Enter the name of the Application

Install NuGet Packages

• Microsoft Entity Framework Core Sql Server.
• Microsoft Entity Framework Core Tools

Configure appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "sqlconnection": "Server=(local)\\MSSQL;Database=Inventory;Trusted_Connection=True;MultipleActiveResultSets=true",
 
  },
  "AllowedHosts": "*"
}

Create Model

Create Model class, viewmodel class and DbContext Class.

//Country.cs

using System.ComponentModel.DataAnnotations;

namespace Asp.netcore_Tutorials.Models
{
    public class Country
    {
        [Key]

        public int countryId { get; set; }
        public string countryName { get; set; }
    }
}

countryModel.cs

using Microsoft.AspNetCore.Mvc.Rendering;

namespace Asp.netcore_Tutorials.Models
{
    public class countryModel
    {

        public int countryId { get; set; }
        public string countryName { get; set; }
        public  List<SelectListItem> Countrys { get; set; }
        public int[] CountryIds { get; set; }


    }
}

CustDbcontext.cs

//CustDbcontext.cs
using Microsoft.EntityFrameworkCore;

namespace Asp.netcore_Tutorials.Models
{
    public class CustDbcontext :DbContext 
    {

          public CustDbcontext(DbContextOptions<CustDbcontext> options):base(options)
        {

        }
 
        public virtual DbSet<Country> Countries { get; set; }
    }
}

Create Interface and Concrete Class

Interface ICustomer.cs

using System.Data;

namespace Asp.netcore_Tutorials.Repository
{
    public interface IInventory
    {
        Task<IEnumerable<Country>> Getcountries(); 

    } 
}

Concrete Class Customerdetail.cs

using Microsoft.AspNetCore.Http;
using System.Data;
using System.Data.OleDb;
using System.Data.SqlClient;
using System.IO;

namespace Asp.netcore_Tutorials.Repository
{
     public class Inventory : IInventory
    {
        private readonly CustDbcontext _IvenContext;

        public Inventory(CustDbcontext custDbcontext)
        {
            _IvenContext = custDbcontext;
        }
        public async Task<IEnumerable<Country>> Getcountries()
        {
            return await _IvenContext.Countries.ToListAsync();
        }
    }
}

Configure Program.cs

using Asp.netcore_Tutorials.Models;
using Asp.netcore_Tutorials.Repository;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using System.Configuration;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();


builder.Services.AddDbContext<CustDbcontext>(conn => conn.UseSqlServer(builder.Configuration.GetConnectionString("sqlconnection")));  
builder.Services.AddScoped<ICustomer,CustomerDetail>();
builder.Services.AddScoped<IInventory, Inventory>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Migration

Add-Migration 'Initial-Create'
Update-Database

Also check my previous Articles Implement JWT Authentication in Asp.Net Core Web API

Create Controller

InventoryController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Asp.netcore_Tutorials.Repository;
using Microsoft.AspNetCore.Mvc.Rendering;
using Asp.netcore_Tutorials.Models;

namespace Asp.netcore_Tutorials.Controllers
{
    public class InventoryController : Controller
    {
        // GET: InventoryController
        private readonly IInventory _Ivencontext;

        public InventoryController(IInventory ivencontext)
        {
            _Ivencontext = ivencontext;
        }
        public ActionResult Index()
        {           
            countryModel country = new countryModel();             
            country.Countrys = _Ivencontext.Getcountries().Result.Select(k => new SelectListItem
            {
                Text = k.countryName,
                Value = Convert.ToString(k.countryId)
            }).ToList(); 
            return View(country);
        }
        [HttpPost]
        public IActionResult Multiselect(countryModel country)
        {
            var countriesid = country.CountryIds;
            var model = _Ivencontext.Getcountries().Result.Where(p => countriesid.Contains(p.countryId));
            return Ok();
        } 
    }
}

Customize View

index.cshtml

  
@*@{
    ViewData["Title"] = "Home Page";
}*@

@model Asp.netcore_Tutorials.Models.countryModel
<html>
    <head>
    <script src="~/js/jquery.js"></script>
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
  
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/js/bootstrap-multiselect.js"></script>
    <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
    </head>
    <body>


    <form asp-controller="Inventory" asp-action="Multiselect" method="post">
    <div class="row">
        <div class="form-group">          
            <div class="col-sm-4">                            
                    @Html.ListBoxFor(model=> model.CountryIds,Model.Countrys, new {@class="form-control",id="Country", multiple="multiple" })
            </div>
        </div> 
    </div>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </form>
   
        <script>
            $(function () {
            $('#Country').multiselect({
                includeSelectAllOption : true,
            });
            });
        </script>
    </body>
</html>