How to Create MultiSelect dropdown with checkboxes in Asp.NET MVC

Question

I would like to use the asp.net mvc multiselect dropdown with checkbox. How can I add checkboxes in the simplest way ? I am using bootstrap v3

@Html.ListBoxFor(m => Model.DepDashTaskLists[i].BusinessRuleAnswers, new MultiSelectList(slh.GetRegistrationAnswerLookup(Model.DepDashTaskLists[i].BusinessRuleQuestion1), "Value", "Text", Model.DepDashTaskLists[i].BusinessRuleAnswers), new { @class = "form-control", @id = "RuleQuestionListBoxAnswer_" + @Model.DepDashTaskLists[i].TaskId, @rows = "2", @columns = "40" })

Please check this link github.com/davidstutz/bootstrap-multiselect and this link might be helpful for you c-sharpcorner.com/article/… — jishan siddique
– jishan siddique, Commented Jan 4, 2021 at 3:50

croxy · Accepted Answer · 2022-11-16 15:24:46Z

3

Here is a sample, base on @jishan siddique suggestion. You can visit the link to refer more: http://davidstutz.github.io/bootstrap-multiselect/

Model

public class ProductViewModel
{
    public List<SelectListItem> Products { get; set; }
    public int[] ProductIds { get; set; }
}

Controller

public IActionResult Index()
{           
    var model = new ProductViewModel()
    {
        Products = GetProducts()
    };            
    return View(model);
}

[HttpPost]
public ActionResult Index(ProductViewModel product)
{                
    return View(product);
}

private List<SelectListItem> GetProducts()
{
    var data = new List<SelectListItem>()
    {
        new SelectListItem()
        {
            Value = "1", Text = "Tomato"
        },
        new SelectListItem()
        {
            Value = "2", Text = "Orange"
        },
        new SelectListItem()
        {
            Value = "3", Text = "Potato"
        }
    };
    return data;
}

Views

@model CiberProject.ViewModels.ProductViewModel
@{
    ViewData["Title"] = "Home Page";    
}

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.Label("Products:")
    <br />
    <br />
    @Html.ListBoxFor(m => m.ProductIds, Model.Products, new { @class = "listbox" })
    <br />
    <br />
    <input type="submit" value="Submit" />
}

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

edited Nov 16, 2022 at 15:24

croxy

4,1789 gold badges33 silver badges50 bronze badges

answered Jan 4, 2021 at 4:39

Tomato32

2,2531 gold badge12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Curious-programmer Over a year ago

I am getting an error System.Web.Mvc.HttpAntiForgeryException: 'The required anti-forgery form field "__RequestVerificationToken" is not present.'

Curious-programmer Over a year ago

I am also getting an error Uncaught TypeError: $(...).multiselect is not a function.

Tomato32 Over a year ago

@Curious-programmer: You don't use _Layout for this form?

Tomato32 Over a year ago

@Curious-programmer: Add @Html.AntiForgeryToken() inside Form. If you need, I will edit my answer, my friend.

Curious-programmer Over a year ago

Appreciate the help, I have added one related question stackoverflow.com/questions/65569599/…

Dhrumil shah · Accepted Answer · 2021-01-04 11:16:15Z

1 First of all load the jQuery and Bootstrap framework into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2 After this, include the Bootstrap multiselect's CSS and JavaScript file to your page.

<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="css/bootstrap-multiselect.css">

<!-- Bootstrap Multiselect JS -->
<script data-main="dist/js/" src="js/require.min.js"></script>

3 Now create HTML select element with your list of options with a unique id. Just like below.

<select id="mySelect" multiple="multiple">
<option value="Option one">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>
<option value="Option four">Option four</option>
<option value="Option five">Option five</option>
<option value="Option six">Option six</option>
</select>

4 And Finally call the plugin to active the multiselect.

<script>
require(['bootstrap-multiselect'], function(purchase){
$('#mySelect').multiselect();
});
</script>

You can visit the link to refer more: https://www.codehim.com/demo/bootstrap-multiselect-dropdown/

Collectives™ on Stack Overflow

How to Create MultiSelect dropdown with checkboxes in Asp.NET MVC

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related