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

  • Question

  • User1694748171 posted

    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>  

    Wednesday, March 3, 2021 8:22 PM

Answers

  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 4, 2021 3:03 AM
  • User475983607 posted

    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.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 4, 2021 7:04 PM

All replies

  • User475983607 posted

    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>
    }
    

    Wednesday, March 3, 2021 10:01 PM
  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 4, 2021 3:03 AM
  • User1694748171 posted

    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

    Thursday, March 4, 2021 3:01 PM
  • User475983607 posted

    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).

    Thursday, March 4, 2021 3:03 PM
  • User1694748171 posted

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

    Thursday, March 4, 2021 3:17 PM
  • User475983607 posted

    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.

    Thursday, March 4, 2021 3:30 PM
  • User1694748171 posted

    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 

    Thursday, March 4, 2021 3:51 PM
  • User475983607 posted

    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>

    Thursday, March 4, 2021 4:05 PM
  • User1694748171 posted

    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>
    }

    Thursday, March 4, 2021 4:21 PM
  • User1694748171 posted

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

    Thursday, March 4, 2021 4:22 PM
  • User475983607 posted

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

    Thursday, March 4, 2021 4:23 PM
  • User475983607 posted

    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>
    

    Thursday, March 4, 2021 4:25 PM
  • User1694748171 posted

    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 

    Thursday, March 4, 2021 4:43 PM
  • User475983607 posted

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

    Thursday, March 4, 2021 6:47 PM
  • User475983607 posted

    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.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 4, 2021 7:04 PM
  • User1694748171 posted

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

    Thursday, March 4, 2021 7:24 PM