Hi rani,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
ViewBag.Months = new SelectList(PopulateMonths(), "Value", "Text");
return View();
}
[HttpPost]
public IActionResult Index(string month)
{
ViewBag.Message += "Selected Months:\\n" + string.Join("\\n", month.Split(","));
return View();
}
private static List<SelectListItem> PopulateMonths()
{
List<SelectListItem> months = new List<SelectListItem>();
months.Add(new SelectListItem { Value = "January", Text = "January" });
months.Add(new SelectListItem { Value = "February", Text = "February" });
months.Add(new SelectListItem { Value = "March", Text = "March" });
months.Add(new SelectListItem { Value = "April", Text = "April" });
months.Add(new SelectListItem { Value = "May", Text = "May" });
months.Add(new SelectListItem { Value = "June", Text = "June" });
months.Add(new SelectListItem { Value = "July", Text = "July" });
months.Add(new SelectListItem { Value = "August", Text = "August" });
months.Add(new SelectListItem { Value = "September", Text = "September" });
months.Add(new SelectListItem { Value = "October", Text = "October" });
months.Add(new SelectListItem { Value = "November", Text = "November" });
months.Add(new SelectListItem { Value = "December", Text = "December" });
return months;
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<br />
<form asp-action="Index" asp-controller="Home" method="post">
<span>Month: </span>
<select id="ddlMonths" asp-items="ViewBag.Months" class="form-control listbox" multiple>
</select>
<input type="hidden" name="month" />
<input type="submit" value="Submit" />
</form>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@ViewBag.Message");
};
</script>
}
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<style type="text/css">
.multiselect-container > li > a > label.checkbox {
width: 200px;
}
.btn-group > .btn:first-child {
width: 200px;
}
</style>
<script type="text/javascript">
$(function () {
$('#ddlMonths').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
filterPlaceholder: 'Search',
enableCaseInsensitiveFiltering: true,
dropRight: true
}).on("change", function () {
$("input[name=month]").val($(this).val());
});
});
</script>
</body>
</html>
Screenshot
