locked
How to work with selected items in a Dropdown or Select List RRS feed

  • Question

  • User-2029475933 posted

    I have a Razor View in an Asp.Net Core Mvc project that takes a SelectList object as the model but I do not know how to then process the user selected items. Here is where I've got to so far:

    The View Model I use to retrieve data to populate the dropdown list

    public class PlayersListViewModel
    {
    public int id { get; set; }
    public string name { get; set; }
    public int gender { get; set; }
    public DateTime dob { get; set; }
    public string skill { get; set; }
    public double rating { get; set; }
    }

    My Controller method that gets the data and then builds a SelectList as a model for the View

    public ViewResult SelectEntrants()
    {
    IEnumerable<PlayersListViewModel> playersList = new List<PlayersListViewModel>().ToList();
    playersList = _employeeRepository.PlayersList().ToList();
    return View(new SelectList(playersList, "id", "name")); 
    }

    The View

    @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
    @model SelectList
    @{
    ViewBag.Title = "Select Entrants";
    }
    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    </head>
    <body>
    <form method="post" asp-controller="Functions" asp-action="SelectEntrants">
    <select id="id" multiple name="name" asp-items="Model" style="height:500px">
    <option value="0">Please select</option>
    </select>
    <a asp-controller="functions" asp-action="showentrants"
    class="btn btn-primary m-1">Show entrants count</a>
    </form>
    </body>
    </html>

    Using the above I get a multi-select dropdown in the View containing a list of names - great. But I have no idea how to get a list of selected items once the page is posted back to the server - I just can't find an example of a controller method that shows how to do that. Can anyone help?

    Tuesday, May 26, 2020 9:42 AM

All replies

  • User475983607 posted

    But I have no idea how to get a list of selected items once the page is posted back to the server - I just can't find an example of a controller method that shows how to do that. Can anyone help?

    The HTML forms need a submit button.   A link does not submit (post) an HTML form.  This is a fundamental HTTP concept. Learn GET and POST.

    <h1>SelectEntrants</h1>
    <form method="post" asp-controller="General" asp-action="SelectEntrants">
        <select id="id" multiple name="name" asp-items="Model" style="height:500px">
            <option value="0">Please select</option>
        </select>
        <input id="Submit1" type="submit" value="Show entrants count"  class="btn btn-primary m-1" />
    </form>

    You'll need a Action executes when the form is posts.  The Action will have an input parameter that matches the HTML form inputs name(s).

            [HttpPost]
            public ActionResult SelectEntrants(string[] name)
            {
                return Json(name);
            }

    I recommend the following tutorials.

    https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-3.1&tabs=visual-studio

    https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/?view=aspnetcore-3.1

    Tuesday, May 26, 2020 10:08 AM
  • User-2029475933 posted

    Thanks for the response. Before I saw your reply I finally cracked the problem by using the method I found in this link 

    https://www.completecsharptutorial.com/asp-net-mvc5/html-listboxfor-and-html-listboxforfor-example-in-asp-net-mvc.php

    Instead of hardcoding the selectlistitems to be added I used a list from my db. What I like about this example is it uses a model rather than what to me seems like an abstract SelectList object I passed to the view in my first effort.  Now my (simple) View looks like this:

    @model PlayerMultiSelectViewModel

    @{
    ViewBag.Title = "Select Entrants";
    }

    <br />
    <br />
    @using (Html.BeginForm("SelectEntrants", "Functions", FormMethod.Post))
    {
    <b>Select Entrants: </b>
    <br />
    @Html.ListBoxFor(x => x.SelectedPlayerIds, Model.listItems, new { style = "width:200px" })
    <br />
    <input type="submit" value="submit" />
    }

    I'll have a look at the links you attached.

    Thanks again

    Tuesday, May 26, 2020 2:33 PM