Dropdownlist with MVC (Asp.net website)

Question

I have some trouble creating an dropdownlist correctly in MVC. I'm not sure how to link the dropdownlist with the model, and create values for it. Right now I have the following code that creates 2x dropdownlists:

<div class="form-group">
        Outward route<br />
        <select class="dropdown" id="Dropdown-outward">
            <option>Copenhagen</option>
            <option>Oslo</option>
            <option>Stockholm</option>
        </select>
    </div>
    <div class="form-group">
        Return route<br />
        <select class="dropdown" id="Dropdown-return">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>

I used the select & option command to create values as you see in the code. I know you can use some razor syntax like.

@Html. something

but I can't seem to do it right. Have created an model (Booking) which look like this:

namespace Project.Models
{
public class Booking
{
    public int ID { get; set; }
    public string Departure { get; set; }
    public string Return { get; set; }
    public DateTime DepartureDate { get; set; }
    public DateTime ReturnDate { get; set; }
    public int Adults { get; set; }
    public int Childrens { get; set; }
}
}

If I use the Html helper like this:

@Html.DropDownList( )

What should i write insite the braces? and how do i add values to it, so you can select, lets say the cities Oslo, Copenhagen & Stockholm?

You model (view model) needs to contain a property for the collection of items you want to display (or you can assign the collection to a `ViewBag` property. From the collection, you generate `IEnumerable` (or `SelectList`) and in the view use `@Html.DropDownListFor(m => m.thePropertyToBindTo, Model.theSelectList)`. There a hundreds of thousands of articles on the web showing how to do this. Start with some tutorials on the MVC site. — , Aug 29 '15 at 13:54
Why this question is down voted? The OP asked a clear question and added what he tried to it! — Taher Rahgooy, Aug 29 '15 at 13:57
No i dont have a model for cities... not sure if it's needed. — Mikkel, Aug 29 '15 at 14:38

score 2 · Answer 1 · edited Sep 22 '15 at 13:44

2

If you just need the values you can simply use razor, create your model and iterate over a collection of your model like:

    <select class="dropdown" id="Dropdown-outward">
@foreach(var m in Model.Items)
{
        <option value="@m.ID">@m.ID</option>
 }
    </select>

This is a possible solution. You have your dropdown and can identify selected values with your model.

edited Sep 22 '15 at 13:44

Darren Young

10,972
36
91
150

answered Aug 29 '15 at 13:53

bash.d

13,029
3
29
42

score 0 · Answer 2 · answered Aug 29 '15 at 17:36

If all you want is a simple dropdown list bound to a specific property of your model then you can use the Html.DropdownListFor helper. And it's always a good practice to use a viewmodel with properties that your view needs. So in this case

public class BookingViewModel
{
    public Booking Booking { get; set; }
    public IEnumerable<SelectListItem> Cities { get; set; } // <-- for your dropdown
}

Controller:

[HttpGet]
public ActionResult Index()
    {
        var vm = new BookingViewModel();

        var citiesList = new List<SelectListItem>
        {
            new SelectListItem { Value = "Oslo", Text = "Oslo" },
            new SelectListItem { Value = "Copenhagen", Text = "Copenhagen" },
            new SelectListItem { Value = "Stockholm", Text = "Stockholm" }
        };


        vm.Cities = citiesList;
        return View(vm);
    }

View:

@using (Html.BeginForm())
{
   @Html.DropDownListFor(s => s.Booking.Departure, Model.Cities)

   <button type="submit">Submit</button>
}

Renders a <select id="Booking_Departure" name="Booking.Departure"> ... and <options> that you specified as SelectListItems.

Lastly your post Action:

[HttpPost]
public ActionResult Index(BookingViewModel vm) 
// the `ViewModels` -> Booking -> Departure prop will be pupulated with the value from the selection in the dropdown
{
    return View(vm);
}

Sorry i haven't been able to apply.. the controller you are using, is it just the Home controller? — Mikkel, Aug 31 '15 at 15:51

Dropdownlist with MVC (Asp.net website)

2 Answers2