BootstrapMultiSelect.MVC 1.2.0

.NET 8.0

dotnet add package BootstrapMultiSelect.MVC --version 1.2.0

NuGet\Install-Package BootstrapMultiSelect.MVC -Version 1.2.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="BootstrapMultiSelect.MVC" Version="1.2.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="BootstrapMultiSelect.MVC" Version="1.2.0" />
                    

                            Directory.Packages.props

<PackageReference Include="BootstrapMultiSelect.MVC" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add BootstrapMultiSelect.MVC --version 1.2.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: BootstrapMultiSelect.MVC, 1.2.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package BootstrapMultiSelect.MVC@1.2.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=BootstrapMultiSelect.MVC&version=1.2.0
                    

                            Install as a Cake Addin

#tool nuget:?package=BootstrapMultiSelect.MVC&version=1.2.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BootstrapMultiSelect.MVC

A .NET Core MVC library providing TagHelper and HtmlHelper extensions for the Bootstrap MultiSelect jQuery plugin.

Installation

Install the package via NuGet:

dotnet add package BootstrapMultiSelect.MVC

Or via Package Manager Console:

Install-Package BootstrapMultiSelect.MVC

How It Works - Static Web Assets

After installation, all CSS and JavaScript files are automatically available via ASP.NET Core's Static Web Assets feature.

Important: Files are NOT physically copied to your wwwroot folder. They are:

✅ Served directly from the NuGet package cache during development
✅ Available immediately at ~/lib/bootstrap-multiselect/ URLs
✅ Automatically included in publish output
✅ Removed automatically when you uninstall the package

This is the same behavior as Bootstrap, jQuery, and other standard NuGet packages.

Usage in Your Application

Simply add the script and style references in your _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="~/lib/bootstrap-multiselect/css/bootstrap-multiselect.min.css" />
</head>
<body>
    
    
    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    
    
    <script src="~/lib/bootstrap-multiselect/js/bootstrap-multiselect.min.js"></script>
    
    
    <script src="~/lib/bootstrap-multiselect/langs/jquery-bootstrap-multiselect.it.min.js"></script>
</body>
</html>

That's it! The files are available immediately - no build required, no manual copying needed.

Troubleshooting

Files not found (404)?

Verify package is installed: dotnet list package
Ensure app.UseStaticFiles() is in your Program.cs
Restart your application
Check the URL path is correct: ~/lib/bootstrap-multiselect/...

Note: You will NOT see a wwwroot/lib/bootstrap-multiselect folder in your project - this is normal and correct!

Localization

The library supports multiple languages through lang files. Available languages:

en - English (default, built-in)
it - Italian
es - Spanish
fr - French
de - German
pt - Portuguese

Global Localization

To set a language globally for all multiselect instances, you must use the lang property:


<script src="~/lib/bootstrap-multiselect/js/bootstrap-multiselect.min.js"></script>


<script src="~/lib/bootstrap-multiselect/langs/jquery-bootstrap-multiselect.it.min.js"></script>


<script>
    $.fn.bootstrapMultiSelect.lang = 'it';
</script>

Now all multiselect instances will use Italian text automatically.

Note: Loading the language file provides the translations, but you still need to set $.fn.bootstrapMultiSelect.lang = 'it' to apply them globally.

Dynamic Locale Based on Culture

In your _Layout.cshtml:

@using System.Globalization
@{
    var culture = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
}

<script src="~/lib/bootstrap-multiselect/js/bootstrap-multiselect.min.js"></script>

@if (culture != "en")
{
    
    <script src="~/lib/bootstrap-multiselect/langs/jquery-bootstrap-multiselect.@(culture).min.js"></script>

    
    <script>
        $.fn.bootstrapMultiSelect.lang = '@(culture)';
    </script>
}

Per-Instance Language

You can override the global language for specific instances:

Tag Helper:

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             lang="it"
             placeholder="Seleziona elementi..." />

HTML Helper:

@Html.MultiSelectFor(m => m.SelectedItems, Model.AvailableItems, new MultiSelectConfig
{
    Lang = "it",
    Placeholder = "Seleziona elementi..."
})

Priority Order

When determining which text to display:

Explicit properties (e.g., placeholder="Custom text")
Language file (e.g., Italian language)
Default English (built-in)

Available Language Files

Language files are automatically available via Static Web Assets at: ~/lib/bootstrap-multiselect/langs/

jquery-bootstrap-multiselect.it.min.js - Italian
jquery-bootstrap-multiselect.es.min.js - Spanish
jquery-bootstrap-multiselect.fr.min.js - French
jquery-bootstrap-multiselect.de.min.js - German
jquery-bootstrap-multiselect.pt.min.js - Portuguese

Usage

Tag Helper

Add the tag helper to your _ViewImports.cshtml:

@addTagHelper *, BootstrapMultiSelect.MVC

Then use in your views:

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             placeholder="Select items..."
             max-selection="3"
             theme="primary"
             search="true"
             select-all="true" />

Tag Helper Attributes

Attribute	Type	Default	Description
`asp-for`	ModelExpression	(required)	The model property to bind
`asp-items`	IEnumerable<SelectListItem>	(required)	The items to display
`placeholder`	string	"Select items..."	Placeholder text
`max-selection`	int	0	Maximum items (0 = unlimited)
`select-all`	bool	true	Show select all buttons
`search`	bool	true	Enable search
`width`	string	"100%"	Dropdown width
`theme`	string	"primary"	Bootstrap theme
`close-on-select`	bool	false	Close on select
`button-class`	string	null	Custom button class
`search-placeholder`	string	"Search..."	Search placeholder
`select-all-text`	string	"Select All"	Select all button text
`deselect-all-text`	string	"Deselect All"	Deselect all button text
`no-results-text`	string	"No results found"	No results message
`max-height`	string	"300px"	Max dropdown height
`items-selected-text`	string	"items selected"	Text for multiple selection count
`lang`	string	null	Language code (e.g., "it", "es", "fr")
`enable-pagination`	bool	false	Enable pagination for long lists
`items-per-page`	int	10	Number of items per page
`pagination-position`	string	"bottom"	Pagination position ("top", "bottom", "both")
`pagination-prev-text`	string	"Previous"	Previous button text
`pagination-next-text`	string	"Next"	Next button text
`pagination-info-text`	string	"Page {current} of {total}"	Pagination info template

HTML Helper

Add the namespace to your view or _ViewImports.cshtml:

@using BootstrapMultiSelect.MVC.HtmlHelpers
@using BootstrapMultiSelect.MVC.Models

Then use in your views:

@Html.MultiSelectFor(m => m.SelectedItems, Model.AvailableItems, new MultiSelectConfig
{
    Placeholder = "Select items...",
    MaxSelection = 3,
    Theme = "primary",
    Search = true,
    SelectAll = true
})

Or without model binding:

@Html.MultiSelect("selectedItems", Model.AvailableItems, new MultiSelectConfig
{
    Placeholder = "Choose items...",
    Theme = "success"
})

Examples

Basic Example

Model:

public class MyViewModel
{
    public List<string> SelectedItems { get; set; } = new List<string>();
    public List<SelectListItem> AvailableItems { get; set; }
}

Controller:

public IActionResult Index()
{
    var model = new MyViewModel
    {
        AvailableItems = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "Item 1" },
            new SelectListItem { Value = "2", Text = "Item 2" },
            new SelectListItem { Value = "3", Text = "Item 3" },
            new SelectListItem { Value = "4", Text = "Item 4" }
        }
    };
    return View(model);
}

View (Tag Helper):

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             placeholder="Select items..."
             theme="primary" />

View (HTML Helper):

@Html.MultiSelectFor(m => m.SelectedItems, Model.AvailableItems, new MultiSelectConfig
{
    Placeholder = "Select items...",
    Theme = "primary"
})

With Pre-selected Items

var model = new MyViewModel
{
    SelectedItems = new List<string> { "1", "3" }, // Pre-select items 1 and 3
    AvailableItems = new List<SelectListItem>
    {
        new SelectListItem { Value = "1", Text = "Item 1" },
        new SelectListItem { Value = "2", Text = "Item 2" },
        new SelectListItem { Value = "3", Text = "Item 3" }
    }
};

With Disabled Options

var model = new MyViewModel
{
    AvailableItems = new List<SelectListItem>
    {
        new SelectListItem { Value = "1", Text = "Item 1" },
        new SelectListItem { Value = "2", Text = "Item 2 (Disabled)", Disabled = true },
        new SelectListItem { Value = "3", Text = "Item 3" }
    }
};

With OptGroups

var model = new MyViewModel
{
    AvailableItems = new List<SelectListItem>
    {
        new SelectListItem { Value = "html", Text = "HTML", Group = "Frontend" },
        new SelectListItem { Value = "css", Text = "CSS", Group = "Frontend" },
        new SelectListItem { Value = "js", Text = "JavaScript", Group = "Frontend" },
        new SelectListItem { Value = "csharp", Text = "C#", Group = "Backend" },
        new SelectListItem { Value = "python", Text = "Python", Group = "Backend" }
    }
};

With Maximum Selection Limit

Tag Helper:

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             max-selection="3"
             placeholder="Select up to 3 items..." />

HTML Helper:

@Html.MultiSelectFor(m => m.SelectedItems, Model.AvailableItems, new MultiSelectConfig
{
    MaxSelection = 3,
    Placeholder = "Select up to 3 items..."
})

With Pagination

Tag Helper:

<multiselect asp-for="SelectedCities" 
             asp-items="ViewBag.Cities"
             placeholder="Select cities..."
             enable-search="true"
             enable-pagination="true"
             items-per-page="8"
             pagination-position="bottom" />

HTML Helper:

@Html.MultiSelectFor(m => m.SelectedCities, ViewBag.Cities, new MultiSelectConfig
{
    Placeholder = "Select cities...",
    EnableSearch = true,
    EnablePagination = true,
    ItemsPerPage = 8,
    PaginationPosition = "bottom"
})

Custom Styling

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             theme="success"
             button-class="btn-success"
             width="300px"
             max-height="200px" />

With Localization

Tag Helper (Italian):

<multiselect asp-for="SelectedItems" 
             asp-items="Model.AvailableItems"
             lang="it" />

HTML Helper (Spanish):

@Html.MultiSelectFor(m => m.SelectedItems, Model.AvailableItems, new MultiSelectConfig
{
    Lang = "es"
})

Global Language in Layout:


<script src="~/lib/bootstrap-multiselect/js/bootstrap-multiselect.min.js"></script>
<script src="~/lib/bootstrap-multiselect/langs/jquery-bootstrap-multiselect.it.min.js"></script>

Dynamic Language Based on User Culture:

@using System.Globalization
@{
    var culture = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
}

<script src="~/lib/bootstrap-multiselect/js/bootstrap-multiselect.min.js"></script>

@if (culture != "en")
{
    
    <script src="~/lib/bootstrap-multiselect/langs/jquery-bootstrap-multiselect.@(culture).min.js"></script>
}

License

MIT License

👤 Author

Paolo Gaetano

GitHub: @gpaol
Repository: bootstrap-multiselect

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

See CONTRIBUTING.md for detailed guidelines.

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- No dependencies.
net9.0
- No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
1.2.0	228	11/6/2025
1.1.0	212	11/4/2025

See CHANGELOG.md for release notes

BootstrapMultiSelect.MVC 1.2.0

BootstrapMultiSelect.MVC

Installation

How It Works - Static Web Assets

Usage in Your Application

Troubleshooting

Localization

Global Localization

Dynamic Locale Based on Culture

Per-Instance Language

Priority Order

Available Language Files

Usage

Tag Helper

Tag Helper Attributes

HTML Helper

Examples

Basic Example

With Pre-selected Items

With Disabled Options

With OptGroups

With Maximum Selection Limit

With Pagination

Custom Styling

With Localization

License

👤 Author

🤝 Contributing

net8.0

net9.0

NuGet packages

GitHub repositories