How to Get a Search to Return Multiple Selections from Dropdown on Razor Page

Question

I have a razor page search that has a beginning and ending date range plus a dropdown where the user can select one (or MORE) municipalities. I am obviously missing something in my code setup, but I am not sure what.

The date range works great, but when I add the dropdown for selecting the municipalities, the search only returns the first municipality of the ones selected.

Here is my .cs:

using Referrals.Data;
using Referrals.Model;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;

namespace Referrals.Pages.Reports.AllMunisListing;

public class IndexModel : PageModel
{
    private readonly ApplicationDbContext _db;

    public IndexModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public IEnumerable<Referral> Results { get; set; }

    [BindProperty]
    public List<Municipality> DisplayRefMunis { get; set; }

    [BindProperty]
    public List<string> searchmuni { get; set; }

    public string DateReceivedSort { get; set; }

    public async Task OnGet()
    {
        Results = _db.Referral.ToList();

        await _db.Municipality.Select(a => a.Name).ToListAsync();
        DisplayRefMunis = await _db.Municipality.ToListAsync();
    }

    public async Task<IActionResult> OnPost(DateTime startdate, DateTime enddate, string searchmuni, string sortOrder)
    {
        
        Results = (from x in _db.Referral where (x.DateReceived >= startdate) && (x.DateReceived <= enddate) && x.RefMunicipality.Contains(searchmuni.ToString()) select x).ToList();

        DateReceivedSort = sortOrder == "DateReceived_Asc_Sort" ? "DateReceived_Desc_Sort" : "DateReceived_Asc_Sort";

        switch (sortOrder)
        {
            case "DateReceived_Asc_Sort":
                Results = Results.OrderBy(s => s.DateReceived);
                break;
            case "DateReceived_Desc_Sort":
                Results = Results.OrderByDescending(s => s.DateReceived);
                break;
            default:
                Results = Results.OrderBy(s => s.DateReceived);
                break;
        }

        DisplayRefMunis = await _db.Municipality.ToListAsync();

        TempData["StartDate"] = startdate.ToShortDateString();
        TempData["EndDate"] = enddate.ToShortDateString();
        TempData["SearchMuni"] = searchmuni;
        return Page();
    }
}

And here is the relevant part of my view:

@page
@model Referrals.Pages.Reports.AllMunisListing.IndexModel

<partial name="_Notification" />

<div id="" class="container p-3">


    <br /><br />

    <form asp-page="./Index" method="post">
        <div class="form-actions no-color">
            <p>
                <table id="ReferralTable" class="table table-borderless" style="width:100%">
                    <tr>
                        <td width="100%">
                            Select Beginning Date Received: <input type="date" name="startdate" value="" /> and Ending Date Received: <input type="date" name="enddate" value="" />
                        </td>
                    </tr>
                </table>
                <table id="ReferralTable" class="table table-borderless" style="width:100%">
                    <tr>
                        <td width="20%">
                            Select Municipality(ities):
                            <select asp-for="@Model.searchmuni" name="searchmuni" id="Select1" style="width: 250px" class="form-select" asp-items="@(new SelectList(Model.DisplayRefMunis.OrderBy(x => x.Id),"Name", "Name"))" multiple="multiple"><option value="" selected disabled>---Select Municipality(ies)---</option></select>
                        </td>
                        <td width="80%">
                            <input type="submit" value="Search" class="btn btn-primary mx-2" />
                            <a asp-page="./Index" class="btn btn-link mx-2">Return to Full List</a>
                        </td>
                    </tr>
                </table>
                
            </p>
        </div>

        <div id="AllMunisListing"class="row pt-4">
            <div class="col-25">
                <h4 class="text-primary" align="center">@TempData["StartDate"] through @TempData["EndDate"]</h4>
                <h4 class="text-primary" align="center">@TempData["SearchMuni"]</h4>
            </div>

I am thinking the issue lies here:

public async Task<IActionResult> OnPost(DateTime startdate, DateTime enddate, string searchmuni, string sortOrder)

And here:

Results = (from x in _db.Referral where (x.DateReceived >= startdate) && (x.DateReceived <= enddate) && x.RefMunicipality.Contains(searchmuni.ToString()) select x).ToList();

I just don't know what it SHOULD be.

Any guidance as to what piece is missing and where it should go is much appreciated.

Thank you!

Answer 1

Here is a simple demo to achieve multiple select in dropdown list. hope it can give you some help.

        [BindProperty]
        public List<Municipality> DisplayRefMunis { get; set; }

        [BindProperty]
        public List<string> searchmuni { get; set; }

        public void OnGet()
        {
            // For testing, I just hard code here
            DisplayRefMunis = new List<Municipality>() {
                new Municipality()
                {
                    Id = 1,
                    Name = "AAAAA"
                },
                new Municipality()
                {
                    Id = 2,
                    Name = "BBBB"
                },
                new Municipality()
                {
                    Id = 3,
                    Name = "CCCC"
                },
                new Municipality()
                {
                    Id = 4,
                    Name = "DDDD"
                },

            };
        }

Views

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<form method="post">
    Select Municipality(ities):
    <select asp-for="@Model.searchmuni" style="width: 250px" class="form-select" asp-items="@(new SelectList(Model.DisplayRefMunis.OrderBy(x => x.Id),"Name", "Name"))" multiple="multiple">
        <option value="" selected disabled>---Select Municipality(ies)---</option>
    </select>

    <button>Submit</button>
</form>

Gif Demo