In this article I will explain with an example, how to bind (populate) Multiple Select (Multi-Select) DropDownList with CheckBoxes from database using jQuery in ASP.Net Core Razor Pages.
The Multiple Select (Multi-Select) DropDownList with CheckBoxes will be implemented using jQuery Bootstrap Multi-Select plugin.
Download Bootstrap and jQuery Bootstrap Multi-Select Plugin
The download locations are as follows.
Bootstrap
jQuery BoosStrap Multi-Select Plugin
You will need to download the plugin files from the following location.
The complete documentation can be read on the following page.
Database
I have made use of the following table Fruits with the schema as follows.
![ASP.Net Core Razor Pages: Multiple Select (Multi-Select) DropDownList with CheckBoxes]()
I have already inserted few records in the table.
![ASP.Net Core Razor Pages: Multiple Select (Multi-Select) DropDownList with CheckBoxes]()
Note: You can download the database table SQL by clicking the download link below.
Model
The Model class consists of the following two properties.
The property FruitId is decorated with the following Data Annotation attributes:
Key – It is used to apply the Primary Key constraint to the Column.
using System.ComponentModel.DataAnnotations;
public class FruitModel
{
[Key]
public int FruitId { get; set; }
public string FruitName { get; set; }
}
Database Context
Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
using Microsoft.EntityFrameworkCore;
namespace CheckBox_DropDownList_Razor_Core
{
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<FruitModel> Fruits { get; set; }
}
}
Namespaces
You will need to import the following namespaces.
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
Razor PageModel (Code-Behind)
The PageModel consists of following two Handler methods.
Handler method for handling GET operation
Inside this Handler method, the PopulateFruits method is called and assigned to the public property Fruits.
Inside the PopulateFruits method, the records from the Fruits table are fetched using Entity Framework and copied into generic list of SelectListItem class object.
Finally, the public property Fruits is returned to the Razor Page.
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
When the Form is submitted, the FruitId of selected Fruits are captured in the FrutIds parameter.
Then, a loop is executed over the FrutIds and the selected Fruit is fetched using Lambda expression.
Finally, the selected Fruit names are set into a ViewData object which will be later displayed in Razor Page using JavaScript Alert Message Box.
public class IndexModel : PageModel
{
private DBCtx Context { get; }
public IndexModel(DBCtx _context)
{
this.Context = _context;
}
public List<SelectListItem> Fruits { get; set; }
public void OnGet()
{
this.Fruits = this.PopulateFruits();
}
public void OnPostSubmit(string[] fruitIds)
{
this.Fruits = this.PopulateFruits();
if (fruitIds != null)
{
ViewData["Message"] = "Selected Fruits:";
foreach (string fruitId in fruitIds)
{
SelectListItem selectedFruit = this.Fruits.Find(p => p.Value == fruitId);
selectedFruit.Selected = true;
ViewData["Message"] += "\\n" + selectedFruit.Text;
}
}
}
private List<SelectListItem> PopulateFruits()
{
List<SelectListItem> fruitsList = (from p in this.Context.Fruits
select new SelectListItem
{
Text = p.FruitName,
Value = p.FruitId.ToString()
}).ToList();
return fruitsList;
}
}
Razor Page (HTML)
Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML Form.
The HTML Form consists of a HTML Select (DropDownList), and a Submit Button.
The Model property Fruits has been assigned to the HTML Select (DropDownList) element using the asp-items Tag Helpers attribute.
The multiple attribute of the HTML Select (DropDownList) element is set which enables multiple selections.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
Bootstrap Multiselect jQuery Plugin implementation
First, the jQuery and the JS and CSS files of the Bootstrap plugin and the jQuery Bootstrap Multi-Select plugin are inherited.
Inside the jQuery document ready event handler, the jQuery Bootstrap Multi-Select plugin is applied to the HTML Select (DropDownList) element.
Form Submission
When the Submit Button is clicked, the Form gets submitted and the values of the selected Fruits are sent to the PageModel.
Finally, the multiple selected Fruit names are displayed using JavaScript Alert Message Box.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model CheckBox_DropDownList_Razor_Core.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post">
Fruits:
<br /><br />
<select name="FruitIds" asp-items="Model.Fruits" multiple="multiple" class="listbox"></select>
<br /><br />
<input type="submit" value="Submit" asp-page-handler="Submit" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.listbox').multiselect({
includeSelectAllOption: true
});
});
</script>
@if (ViewData["Message"] != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@ViewData["Message"]");
};
</script>
}
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Multiple Select (Multi-Select) DropDownList with CheckBoxes]()
Downloads
