How to pass selected item id from dropdown list to controller's action?

Question

General problem overview: I have a create\edit view for a compound item, where I select lots of options for components from drop down lists. I want to be able to add or edit a specific component, selected in a dropdown list.

Here is a short, but complete example:

Suppose I have a Car model

public class Car
{
    public int Id { get; set; }
    public string Name { get; set; }

    public BodyStyle BodyStyle { get; set; }
    public int BodyStyleId { get; set; }
}

BodyStyle is a component of a Car aggregate, defined as:

public class BodyStyle
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Now I have a controller action to create a car,

public ActionResult CreateCar()
{
    //BodyStyles is a mock property with all hardcoded BodyStyles, just for demo
    ViewBag.Styles = new SelectList(BodyStyles, "Id", "Name");
    return View();
}

Here is the part of the CreateCar view, which defines BodyStyle dropdown list.

<div class="form-group">
    @Html.LabelFor(model => model.BodyStyle, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles)
        @Html.ActionLink("Create", "CreateBodyStyle")

        @*here is the problem, can't find a way to pass selected BodyStyle Id to EditBodyStyle action*@
        @Html.ActionLink("Edit", "EditBodyStyle") 
    </div>
</div>

Here is the naive implementation of EditBodyStyle

public ActionResult EditBodyStyle(int bodyStyleId)
{
    return View(BodyStyles.First(b => b.Id == bodyStyleId));
}

Is there a way to say to ASP.NET MVC to pass the selected BodyStyle Id from DropDownListFor to EditBodyStyle action?

I've achieved this with javascript, subscribing to onchange and storing the selected value, then using it in the link. But the code becomes a mess, since I have near 10 of such components on several views. The functionality is quite simple, so I wonder if I'm missing some ASP.NET MVC feature, that will help me achieve this only using Razor view engine.

Here is the resulting view, just to get the whole picture:

Where each option of select tag is of format:

<option value="1">Coupe - 2 door</option>
<option value="2">Coupe - 3 door</option>

Current implementation (there is no id's in the view example above, but assume dropdown list and link has ids, as noted in the js):

$(function () {
    $("#editBodyStyleLink").click(function () {
        var id = $("#bodyStylesDropDown").val();
        window.location.href = "/Home/EditBodyStyle/?id=" + id;
    });
});

Answer 1

First you need to post your bodyStyleId as a parameter (please note I have used Cars for your controller name, you will need to change that to the actual controller name):

   <div class="form-group">
@Html.LabelFor(model => model.BodyStyle, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles)
    @Html.ActionLink("Create", "CreateBodyStyle")

    @*here is the problem, can't find a way to pass selected BodyStyle Id to EditBodyStyle action*@
    @Html.ActionLink("Edit", "EditBodyStyle", null, new { bodyStyleId = model.BodyStyleId) 
</div>

Then you need to select it when populating your select list items and send it back to the view:

public ActionResult EditBodyStyle(int bodyStyleId)
{
    var styles = BodyStyles.Select(m => new SelectListItem
                {
                    Value = m.Id.ToString(),
                    Text = m.Name,
                    Selected = bodyStyleId.Equals(m.Id.ToString())

                });
    ViewBag.Styles = styles;
    return View(model);
}

The important part which caught me out when doing this is the following line which selects the list:

 Selected = bodyStyleId.Equals(m.Id.ToString())

And finally use this for you dropdown.

@Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles, "Please select")