ASPNet Core Razor Pages Multiple Select MultiSelect DropDownList with CheckBoxes

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 (.Net Core 8) 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

https://getbootstrap.com/

jQuery Bootstrap Multi-Select Plugin

You will need to download the plugin files from the following location.

https://github.com/davidstutz/bootstrap-multiselect/

The complete documentation can be read on the following page.

https://davidstutz.github.io/bootstrap-multiselect/

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.

Note: You can download the database table SQL by clicking the download link below.

Download SQL file

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.

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.

Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages and Entity Framework, please refer my article .Net Core 8: Entity Framework Tutorial in ASP.Net Core Razor Pages.

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 Microsoft.AspNetCore.Mvc.Rendering;

Razor PageModel (Code-Behind)

The PageModel consists of following 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

@using CheckBox_DropDownList_Razor_Core.Models

@model CheckBox_DropDownList_Razor_Core.Pages.IndexModel

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

<form method="post">

Fruits:

<select name="FruitIds" asp-items="Model.Fruits" multiple="multiple" class="listbox"></select>

<input type="submit" value="Submit" asp-page-handler="Submit" />

</form>

$(function () {

$('.listbox').multiselect({

includeSelectAllOption: true

});

</script>

@if (ViewData["Message"] != null)

{

window.onload = function () {

alert("@ViewData["Message"]");

};

</script>

}

</body>

</html>

Screenshot

Downloads

Download Code

ASP.Net Core Razor Pages: Multiple Select (Multi-Select) DropDownList with CheckBoxes

Related