find and solve || findandsolve.com
Please wait.....

Multiselect Dropdownlist in ASP.NET Core-.NET 5

Download source code from here
Multiselect Dropdownlist in ASP.NET Core-.NET 5

I will explain how to select multiple values in the dropdown list including the checkbox in .NET 5 MVC C# and also address to select multiple items in the dropdownlist using JS and CSS. In the article, I will demonstrate the CheckBox in ASP.NET Core MultiSelect Dropdown control. To implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in .NET, we will need to make use of checkbox control and apply the jQuery Bootstrap Multi-Select Plugin to it.

Create a New Application in visual studio 2019

  1. Open your visual studio in 2019
  2. After that click on Create a New Project
  3. Select  .NET Core Web Application and then Next
  4. Provide a Project name and confirm or change the Location. Select Create
  5. Select the latest version of ASP.NET Core in the drop-down (.NET Core 5.0)and then select Web Application
  6. Under Authentication, select Change and set the authentication to Individual User Accounts, and then select OK


I am going to create two view model MultiDropDownListViewModel.cs and PostSelectedViewModel.cs

MultiDropDownListViewModel.cs : Add data list in this ViewModel and pass this ViewModel in my index.cshtml razor view page.

PostSelectedViewModel.cs: When I will click on the Save button the selected values are posted in my HomeController throw by this ViewModel.

Now create MultiDropDownListViewModel.cs under the Models folder and past this code as given below.
  public class MultiDropDownListViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<SelectListItem> ItemList { get; set; }
    }

SelectListItem need to add namespaceusing Microsoft.AspNetCore.Mvc.Rendering  so put this namespace in your MultiDropDownListViewModel class.

Create ViewModel PostSelectedViewModel.cs under the Models folder and past this code as given below.

  public class PostSelectedViewModel
    {         public int [] SelectedIds { get; set; }
    }

PostSelectedViewModel.cs passing the value of a select from view to HomeController

Next,Open HomeController.cs and past this code as given below

      public IActionResult Index()
        {
            var data = new List<MultiDropDownListViewModel> {
            new MultiDropDownListViewModel { Id=1, Name="Bill"},
            new MultiDropDownListViewModel { Id=2, Name="John"},
            new MultiDropDownListViewModel { Id=3, Name="Doug"},
            new MultiDropDownListViewModel { Id=4, Name="Sugan" },
            new MultiDropDownListViewModel { Id=5, Name="Selina"},
            new MultiDropDownListViewModel { Id=6, Name="Sylvia"},
            new MultiDropDownListViewModel { Id=7, Name="Ubina" }
            };
            MultiDropDownListViewModel model = new();
             model.ItemList = data.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }).ToList();
            return View(model);
        }

data: I have added the list of values in the data variable.

model.ItemList: Pass the list of values in the model.ItemList and pass model.ItemList in an index.cshtml view page.


Open your Index.cshtml page and past this code in your index.cshtml razor view page
@model MultiSelectAspNet.Models.MultiDropDownListViewModel
@{
    ViewData["Title"] = "Home Page";
 }
<link href="~/multiselect/example-styles.css" rel="stylesheet" />
<div class="container">
    <div class="card">
        <div class="card-text text-center">
            <h1>Multi Dropdownlist example</h1>
        </div>
        <form asp-controller="Home" asp-action="PostSelectedValues">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <select id="dropDownList-example" name="SelectedIds"
                                asp-items="@Model.ItemList" multiple class="form-control"></select>
                    </div>
                </div>
            </div>
            <input type="submit" value="Save" class="btn btn-primary" />
        </form>
    </div>
</div>
@section Scripts{
    <script src="~/multiselect/jquery.multi-select.js"></script>
    <script>
        $(document).ready(function () {
            $('#dropDownList-example').multiSelect();
        });
    </script>
}

Required css link in your view page: <link href="~/multiselect/example-styles.css" rel="stylesheet" />:

and 

Required js link in your view page: <script src="~/multiselect/jquery.multi-select.js"></script>


Post Selected Value in HomeController

Again open your HomeController.cs and past this code like as given below

        [HttpPost]
        public IActionResult PostSelectedValues(PostSelectedViewModel model)
        {
            return View();
        }

Output



Mahira  khanna

Mahira khanna

I have the skills you need for you company blog, website, or other content materials

If findandsolve.com felt valuable to you, feel free to share it.

Comments



Report Response