Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in ASP.Net MVC Razor

Reply

luay20032003

Member

35 Points

Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in ASP.Ne...

Mar 03, 2021 08:22 PM|luay20032003|LINK

I tried to used bootstrap4 dropdownlist with check box to allowed user pic email from ListBoxFor when he/she click on the ListBoxFor. I found many articles show only when click on the button and then show the dropdown menu with check box, what I have is ListBoxFor and I want every time when user click on the text area on listboxfor it will show dropdowm menu for list of users email. like: DashboardCode Multiselect JQuery Plugin for Bootstrap 4.

my approach :

my controller

     public ActionResult Index(EmailViewModel model)
        {
            ModelState.Clear();
            var ProctorList = (from U in db2.A2
                               join P in db2.A2on U.UserId equals P.Proctor_User_Id
                               where U.Email != null
                                 select new AdminRoleViewModel
                               {
                                   ProctorEmail = A1.Email,
                                   ProctorUserId = A2.Proctor_User_Id.ToString(),
                                   ProctorId = A2.ProctorId
                               }).ToList();

            ViewBag.ProcEmail = ProctorList;
             model.EmailList = new  MultiSelectList(ProctorList, "ProctorId", "ProctorEmail");
            return View(model);
        }

my view

@model BoatSafetyExam.ViewModels.EmailViewModel

@{
    ViewBag.Title = 
    Layout = "~/Views/Shared/_AdminMasterLayout.cshtml";
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title> </title>

    <!-- Bootstrap core CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="~/Content/simple-sidebar.css" rel="stylesheet" />
    @* Using MultiSelect *@
   
  
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

</head>


<body style="padding-top:90px;">
    <div class="active">
        @Html.Partial("_NavBar")
    </div>
    <div class="d-flex " id="wrapper">
        @Html.Partial("SidemenuBar")

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

           
            <hr />
            <div class="indent1 container" style="padding-right:30px;">
 
                <div class="row">
                    @Html.LabelFor(model => model.Email_To, htmlAttributes: new { @class = "col-md-4", @style = "font-weight:bold; " })
                    <div class="col-md-8">
                        @Html.ListBoxFor(model => model.Email_To, Model.EmailList, new { htmlAttributes = new { @class = "listbox" } })
                        @Html.ValidationMessageFor(model => model.Email_To, "", new { @class = "text-danger" })
                    </div>
                    <input type="submit" value="Submit" />
                </div>
                <br />
              
        }
    </div>

</body>

</html>

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.bundle.js"></script>

<script type="text/javascript">
    $(function () {
        $('.listbox').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 03, 2021 10:01 PM|mgebhard|LINK

The code you shared has a few potential issue but it is incomplete and I'm not sure what the actual issue is.

Anyway, below is a working and tested example. Note: my site uses HTTPS so I have to change the JS and CSS file references to use HTTPS. Be sure you use standard debugging tools like the browser's dev tools.

    public class EmailViewModel
    {
        public List<int> ProctorIds { get; set; }
        public MultiSelectList EmailList { get; set; }
    }

    public class Proctor
    {
        public int ProctorId { get; set; }
        public string ProctorEmail { get; set; }
    }

    public class BootstrapController : Controller
    {
        private readonly IEnumerable<Proctor> list;
        public BootstrapController()
        {
            list = new List<Proctor>()
            {
                new Proctor() {ProctorId=1, ProctorEmail="ProctorEmail1@mail.com"},
                new Proctor() {ProctorId=2, ProctorEmail="ProctorEmail2@mail.com"},
                new Proctor() {ProctorId=3, ProctorEmail="ProctorEmail3@mail.com"}
            };
        }
        [HttpGet]
        public IActionResult Index()
        {
            EmailViewModel vm = new EmailViewModel()
            {
                EmailList = new MultiSelectList(list, "ProctorId", "ProctorEmail")
            };
            return View(vm);
        }

        [HttpPost]
        public IActionResult Index(List<int> ProctorIds)
        {
            return Json(new { ProctorIds = ProctorIds });
        }
    }

@model MvcDemo.Controllers.EmailViewModel

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<h4>EmailViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                @Html.ListBoxFor(model => model.ProctorIds, Model.EmailList, new { @class = "listbox" })
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    
<script>
    $('.listbox').multiselect({
        includeSelectAllOption: true
    });
</script>
}

Reply

Jerry Cai

Participant

1110 Points

371 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:03 AM|Jerry Cai|LINK

Hi, luay20032003

Do you want the form like this? You can check this brief demo:

<select name="states" id="example" class="form-control" multiple="multiple" style="display: none;">
    <option value="1">123@zz.com</option>
    <option value="2">1234@zz.com</option>
    <option value="3">12345@zz.com</option>
    <option value="4">zxc@myf.com</option>   
</select>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="~/Content/BsMultiSelect.js"></script>
    <script>
        $("select").bsMultiSelect({
            cssPatch: {
                choices: { columnCount: '3' },
            }
        });</script>   
}

Result:

Here is the tutorial link, more details in it:

https://www.jqueryscript.net/form/Bootstrap-4-Multi-Select-BsMultiSelect.html

Best Regards,

Jerry Cai

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:01 PM|luay20032003|LINK

I used your code and it show only dropdown without check box for each email. I used browser dev tool and it said Failed to load resource: the server responded with a status of 404 (Not Found) BsMultiSelect.js

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:03 PM|mgebhard|LINK

luay20032003
I used your code and it show only dropdown without check box for each email.

Then you did something wrong. Share your code if you want the community to find the bug(s).

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:17 PM|luay20032003|LINK

I used your code and I can't see the checkbox ?

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:30 PM|mgebhard|LINK

luay20032003
I used your code and I can't see the checkbox ?

I tested my code and it shows checkboxes perfectly. Again, you are doing something wrong. Share code that reproduces this issue if you want community debugging support.

I recommend performing basic troubleshooting to find where you made a mistake. Open the browsers dev tools (F12) and look for error in the console and network tab. This only takes a few seconds to look for errors.

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 03:51 PM|luay20032003|LINK

this is my controller

using BoatSafetyExam.Models;
using BoatSafetyExam.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BoatSafetyExam.ViewModels;
 
using System.Web.Mvc;
using Microsoft.AspNetCore.Mvc;

namespace BoatSafetyExam.Controllers
{
 
    public class EmailController : Controller
    {
        private EmailContext db1 = new EmailContext();
        private BoatExamSafetyContext db2 = new BoatExamSafetyContext();
        // GET: Email
        private static string emailFrom = "";
        private static string emailUser = "";
        private static string emailPass = "";
        private static string emailHost = "";
        //public ActionResult Index(EmailViewModel model)
        //{
        //    ModelState.Clear();
        //    var ProctorList = (from U in db2.Exam_Users
        //                       join P in db2.Exam_Proctor on U.UserId equals P.Proctor_User_Id
        //                       where U.Email != null
        //                         select new AdminRoleViewModel
        //                       {
        //                           ProctorEmail = U.Email,
        //                           ProctorUserId = P.Proctor_User_Id.ToString(),
        //                           ProctorId = P.ProctorId
        //                       }).ToList();

        //    ViewBag.ProcEmail = ProctorList;
        //     model.EmailList = new  MultiSelectList(ProctorList, "ProctorId", "ProctorEmail");
        //    return View(model);
        //}
        private readonly IEnumerable<Proctor> list;
        public EmailController()
        {
            list = new List<Proctor>()
            {
                new Proctor() {ProctorId=1, ProctorEmail="ProctorEmail1@mail.com"},
                new Proctor() {ProctorId=2, ProctorEmail="ProctorEmail2@mail.com"},
                new Proctor() {ProctorId=3, ProctorEmail="ProctorEmail3@mail.com"}
            };
            
        }
        [HttpGet]
        public ActionResult Index()
        {
            EmailViewModel vm = new EmailViewModel()
            {
                EmailList = new MultiSelectList(list, "ProctorId", "ProctorEmail")
            };
            return View(vm);
        }

        [HttpPost]
        public ActionResult Index(List<int> ProctorIds)
        {
            return Json(new { ProctorIds = ProctorIds });
        }

    }
}

this is the view

@model BoatSafetyExam.ViewModels.EmailViewModel

@{
    Layout = "~/Views/Shared/_AdminMasterLayout.cshtml";
}

<h1>Index</h1>

<h4>EmailViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                @Html.ListBoxFor(model => model.ProctorIds, Model.EmailList, new { @class = "listbox" })
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

    <script>
        $('.listbox').multiselect({
            includeSelectAllOption: true
        });
    </script>
}

I check debug tool and I got no error

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:05 PM|mgebhard|LINK

Did you add a reference to the bootstrap-multiselect.css file in the _AdminMasterLayout.cshtml layout page?

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcDemo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:21 PM|luay20032003|LINK

I just added it and same thing

@model BoatSafetyExam.ViewModels.EmailViewModel

@{
    Layout = "~/Views/Shared/_AdminMasterLayout.cshtml";
}
<!-- Stylesheet -->
<!-- jQuery & Bootstrap -->
<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
 
 
<h1>Index</h1>

<h4>EmailViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                @Html.ListBoxFor(model => model.ProctorIds, Model.EmailList, new { @class = "listbox" })
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

    <script>
        $('.listbox').bsMultiselect({
            includeSelectAllOption: true
        });
    </script>
}

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:22 PM|luay20032003|LINK

Browser debug too say Email:53 Uncaught TypeError: $(...).bsMultiSelect is not a function

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:23 PM|mgebhard|LINK

CSS file must be within the <head> section of the layout page not the View. Please read my last post!

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:25 PM|mgebhard|LINK

luay20032003
Browser debug too say Email:53 Uncaught TypeError: $(...).bsMultiSelect is not a function

Seriously??? You said there were no errors. You did not check?

The error indicates you are missing jQuery references and maybe even bootstrap in your custom layout file as well.

My Layout file...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcDemo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcDemo</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="jQuery" asp-action="Index">jQuery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="File" asp-action="Index">File</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="datatable" asp-action="Index">Datatable</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Customers" asp-action="Index">Customers</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Bootstrap" asp-action="Index">Bootstrap</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Form" asp-action="Index">Forms</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - MvcDemo - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 04:43 PM|luay20032003|LINK

I changed to the <head> section layout and it's same

@using System.Configuration

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.dirrty.js"></script>
    <script src="~/Scripts/inputmask.js"></script>
    <link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
     
    
</head>

<body> 

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("scripts", required: false)

    @RenderBody()

</body>
</html>

@model BoatSafetyExam.ViewModels.EmailViewModel

@{
    Layout = "~/Views/Shared/_AdminMasterLayout.cshtml";
}
<!-- Stylesheet -->
<!-- jQuery & Bootstrap -->

 
<h1>Index</h1>

<h4>EmailViewModel</h4>
<hr />
<div class="indent1 row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group" style="padding-left:40px;">
                @Html.ListBoxFor(model => model.ProctorIds, Model.EmailList, new { @class = "listbox" })
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

    <script>
        $('.listbox').bsMultiSelect({
            includeSelectAllOption: true
        });
    </script>
}

in the browser debug tool I got : Email:47 Uncaught TypeError: $(...).bsMultiSelect is not a function

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 06:47 PM|mgebhard|LINK

You are not following the recommendations. Use the layout page that comes with the MVC template. Your custom layout has a lot of errors.

Reply

mgebhard

All-Star

53641 Points

24010 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 07:04 PM|mgebhard|LINK

The following example does not use a layout page and file references are to CDNs. This will fix the issues with your CSS and JS library refences. I'll assume the model being passed is correct.

@model MvcDemo.Controllers.EmailViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <h1>Index</h1>

    <h4>EmailViewModel</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Index">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    @Html.ListBoxFor(model => model.ProctorIds, Model.EmailList, new { @class = "listbox" })
                    <input type="submit" value="Create" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

    <script>
        $('.listbox').multiselect({
            includeSelectAllOption: true
        });
    </script>
</body>
</html>

I think you'll be interested in learning CSS and JS file references. Also, you should use standards patterns and practices found in any MVC tutorial.

Reply

luay20032003

Member

35 Points

163 Posts

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Mar 04, 2021 07:24 PM|luay20032003|LINK

Thank you so much, your last code work perfect to me, I will learn more about CSS and JS references. your smart developer indeed.

Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in ASP.Net MVC Razor[Answered] RSS

16 replies

Shortcuts

Related Links

Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in ASP.Ne...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

luay20032003

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

luay20032003

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

luay20032003

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...

Re: Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in AS...