How to receive the dropdown value selected in the backend code

Question

I am new to web development and learning Dropdown HTML Helper. So, I have created the dropdown but I am not able to receive the selected value in the backend.

Below is my attempt.

View:

@model WebApplication3.Models.DropDownViewModel
<form method="post">
    @Html.DropDownListFor(m => m.SongList, new SelectList(Model.SongList, "Value", "Text"), "Select menu", new { @class = "form-control" })
            @* below is the use of each argument.*@
            @*1. m=>m.SongList => It helps in strongly typing to the model*@
            @*2. Model.SongList => It is the datasource for creating the dropdown*@
            @*3. "Value" => This is the value behind each of the dropdown options*@
            @*4. "Text" => This is the actual text*@
            @*5. "Select Menu" => This is the first option that will appear in the dropdown*@
                <input type="submit" value="Send" />
            </form>

Model:

                public class DropDownViewModel
                {
                    public DropDownViewModel()
                    {
                        SongList = new List<SelectListItem>();
                    }
                    public int Id { get; set; }
                    public List<SelectListItem> SongList { get; set; }
                }

Controller:

                 public ActionResult Index()
                    {
                        DropDownViewModel dropdown = new DropDownViewModel();
                        dropdown.SongList.Add(new SelectListItem { Text = "Four", Value = "4" });
                        dropdown.SongList.Add(new SelectListItem { Text = "Five", Value = "5" });
                        dropdown.SongList.Add(new SelectListItem { Text = "Six", Value = "6" });
                        dropdown.SongList.Add(new SelectListItem { Text = "Seven", Value = "7" });

                        return View(dropdown);
                    }

                    [HttpPost]
                    public ActionResult Index(DropDownViewModel viewModel)
                    {
                    *******  viewModel.??? WHow to get the selected ID. Which variable will have that.*******
                        return View(dropdown);
                    }

I would put a breakpoint in the HttpPost and see what the object looks like when you run it. — anthonybell, Jul 06 '17 at 16:40
@Unbreakable no mistake, just strange why comments weren't used for example you still have * in your C# code instead of // or a /* */. — David Lee, Jul 06 '17 at 17:35

score 2 · Accepted Answer · answered Jul 06 '17 at 16:45

You will need to add a property in DropDownViewModel to retrieve the selected value.

    public class DropDownViewModel
    {
       public DropDownViewModel()
       {
          SongList = new List<SelectListItem>();
       }
       public int Id { get; set; }

       public string SelectedSongId { get; set; }
       public List<SelectListItem> SongList { get; set; }
    }

View

@using (Html.BeginForm()) 
{  
   @Html.DropDownListFor(model => model.SelectedSongId, Model.SongList, new { @class = "form-control" })
   <button type="submit" value="Submit" class="btn btn-primary">Submit</button>
}

Action Method

[HttpPost]
public ActionResult Index(DropDownViewModel viewModel)
{
   var id = viewModel.SelectedSongId;
   ...
}

So basically, first argument is the place where the selected value gets stored. `model => model.SelectedSongId` — Unbreakable, Jul 06 '17 at 17:26
Yes, correct. [Here](https://stackoverflow.com/a/37819577/296861) is another example. — Win, Jul 06 '17 at 17:59

How to receive the dropdown value selected in the backend code

1 Answers1

View

Action Method