Understanding how DropDownListFor is working in MVC3

Question

I'm new to MVC3 and have been working on a small site using EF and 'Code First'. I'm trying to do a few things in a view dealing with a drop down list and am wondering what the best way to go about them is. I want a user to be able to select a rule from the dropdownlist, and depending upon which rule was selected, I would like a label on the page to show the rule name (without posting). I also need to be able to send the selected rule onto the next page. I haven't added all of the necessary fields to the view yet because I'm really at a loss on how it should work. How should I go about trying to do this?

I've got my model:

public class D1K2N3CARule
{
    public int ID { get; set; }
    [Required]
    public int Name { get; set; }
    [Required]
    public string Rule { get; set; }

    public D1K2N3CARule(int name, string rule)
    {
        Name = name;
        Rule = rule;
    }
    public D1K2N3CARule()
    {
        Name = 0;
        Rule = "";
    }
}

My ViewModel:

public class D1K2N3CARuleViewModel
{
    public string SelectedD1K2N3CARuleId { get; set; }
    public IEnumerable<D1K2N3CARule> D1K2N3CARules { get; set; }
}

My Controller:

    public ActionResult Index()
    {
        var model = new D1K2N3CARuleViewModel
        {
            D1K2N3CARules = db.D1K2N3DARules
        };

        return View(model);
    }

and my View:

'@model CellularAutomata.Models.D1K2N3CARuleViewModel

@{
    ViewBag.Title = "Index";
}
<asp:Content id="head" contentplaceholderid="head" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<h2>Index</h2>

<table>
    <tr>
        <td>
            @Html.DropDownListFor(
                x => x.D1K2N3CARules,
                new SelectList(Model.D1K2N3CARules, "ID","Rule")
            )
        </td>
    </tr>
</table>'

Darin Dimitrov · Accepted Answer · 2011-02-24T07:42:25.700

I want a user to be able to select a rule from the dropdownlist, and depending upon which rule was selected, I would like a label on the page to show the rule name (without posting)

You will need javascript here. jQuery would be perfect for the job. I would start by providing a deterministic id for the dropdown because if you run this view inside a template there could be prefixes added to the id which would ruin our javascript id selectors (see below):

@Html.DropDownListFor(
    x => x.D1K2N3CARules,
    new SelectList(Model.D1K2N3CARules, "ID", "Rule"),
    new { id = "ruleDdl" }
)

then provide some container which will receive the selected value:

<div id="ruleValue" />

and finally in a separate javascript file subscribe for the change event of the dropdown list and update the container with the selected value/text:

$(function() {
    // subscribe for the change event of the dropdown
    $('#ruleDdl').change(function() {
        // get the selected text from the dropdown
        var selectedText = $(this).find('option:selected').text();

        // if you wanted the selected value you could:
        // var selectedValue = $(this).val();

        // show the value inside the container
        $('#ruleValue').html(selectedText);
    });
});

I also need to be able to send the selected rule onto the next page.

You could put your dropdown inside a form

@using (Html.BeginForm("NextPage", "Foo"))
{
    @Html.DropDownListFor(
        x => x.D1K2N3CARules,
        new SelectList(Model.D1K2N3CARules, "ID","Rule")
    )    
    <input type="submit" value="Go to the next page" />
}

and the NextPage controller action will receive the selected value.

What parameter gets passed back to the next page controller? Everything I try ends up coming through null. I've looked around for the last few hours for an answer and just keep coming up empty. Do you have any suggestions for a good resource on MVC3? I've obviously been spinning my wheels a bit and I think I need to do some reading. — Doug S., Feb 24 '11 at 15:20
@Doug S., only what you include in the form will get passed to the next controller. In this example we only have a dropdownlist so, only the selected value will be sent. — Darin Dimitrov, Feb 24 '11 at 15:39
I understand that, but what parameter do I specify in my nextpage controller? public ActionResult RunCA(string id) or public ActionResult RunCA(selectlistitem item) or public ActionResult RunCA(int id) Everything I've tried has comeback null. — Doug S., Feb 24 '11 at 15:50
@Doug S.: `public ActionResult RunCA(string selectedD1K2N3CARuleId)`. And by the way your `DropDownListFor` helper usage is wrong as you are using the same property (`D1K2N3CARules`) for both the selected value and the items. It should be: `@Html.DropDownListFor(x => x.SelectedD1K2N3CARuleId, new SelectList(Model.D1K2N3CARules, "ID","Rule"))`. This will allow you to fetch the selected value (`SelectedD1K2N3CARuleId`) on the next page. — Darin Dimitrov, Feb 24 '11 at 16:26

Understanding how DropDownListFor is working in MVC3

1 Answers1

Linked