CODEWITHSUNDEEP
asp.net-corefilterlistbox
Mike
Mike

Reputation: 17

ASP.NET Core filter a list using a multi-select List Box

I have a standard razor page using the "List" template that I have added a dropdown to filter which records are shown. I used the code example from here: https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/search?view=aspnetcore-3.1

Using the tutorial's "Search by Genre" section.

I have it working but would like users to be able to select multiple items from the list to use as filters. I added "multiple" to the select tag and I can select multiple items, but it only processes the first item selected.

How can I have multiple items added to the filter so that all selected values are displayed on the list?

Upvotes: 0

Views: 2556

Answers (1)

Yiyi You
Yiyi You

Reputation: 18209

After adding "multiple" to the select tag, you need to modify the received model MovieGenre. For example:

public class IndexModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public string SearchString { get; set; }
        public SelectList Genres { get; set; }
        [BindProperty(SupportsGet = true)]
        public List<string> MovieGenre { get; set; }

        public void OnGet()
        {
            // Transfer data here.
            Genres = new SelectList(new List<Genre> {
                new Genre{id=1,GenreName="Genre1"},
                new Genre{id=2,GenreName="Genre2"},
                new Genre{id=3,GenreName="Genre3"},
            },"id", "GenreName");
        }
}


 public class Genre
    {
        public int id { get; set; }
        public string GenreName { get; set; }
}

In Index.cshtml:

<form>
            <select asp-for="MovieGenre" asp-items="Model.Genres" multiple>
                <option value="">All</option>
            </select>
            <input type="submit" value="Filter" />
</form>

Then, it will get Multiple MovieGenre.

result: enter image description here

Upvotes: 1

Related Questions