Passing IEnumerable to Controller

Question

I am building a IEnumerable in my HTTPGet and passing it to my view. My issue is getting the selected info back to the controller using a hiddenfor.

    [HttpGet]
    public ActionResult Index(int id)
    {
        RANKDModel model = new RANKDModel();
        model.thingList = new List<thingsModel>();
        List<SelectListItem> thingRank = new List<SelectListItem>();

        var tblThingGroup = db.tblThingGroup.Where(x => x.thingCollectionID == id).Include(t => t.tblThing).Include(t => t.tblThingCollection).OrderBy(x => x.displayOrder);

        model.thingRank = new SelectList(thingRank, "Value", "Text");

        int i = 1;

        foreach (var thing in tblThingGroup)
        {
            thingRank.Add(new SelectListItem()
            {
                Value = thing.tblThing.thingID.ToString(),
                Text = i.ToString()
            });
            model.thingRank = new SelectList(thingRank, "Value", "Text");

            thingsModel things = new thingsModel();

            things.thingID = thing.tblThing.thingID;
            things.thingName = thing.tblThing.thingName;
            things.thingImgPointer = thing.tblThing.thingImgPointer;

            model.thingList.Add(things);
            i++;
        }

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(RANKDModel model, IEnumerable<SelectListItem> thingRank)
    {
        //check model.Selecteditem
        return View(model);
    }

My view displays the drop downs but I cannot seem to get the values passed back to the controller on Post. Below is my view. The commented lines are failed attempts. I would rather not use ajax here. Since my value and my text fields are all I need, I feel like I should be able to pass them back to the controller even if they are not part of the model (which would be nice but I wasn't successful there either.)

@using (Html.BeginForm())
{
    <div class="col-md-8">
        @Html.TextBoxFor(modelItem => Model.firstName, new { @class = "form-control" })
        @Html.TextBoxFor(modelItem => Model.lastName, new { @class = "form-control" })
    </div>

    <table class="table">
        @Html.HiddenFor(modelItem => Model.thingRank)

        @for (int i = 0; i < Model.thingList.Count; i++)
        {
            string imagePointer = "/Areas/RANKD/thingImages/" + Model.thingList[i].thingImgPointer;
            <tr>
                <td>
                    @Html.HiddenFor(modelItem => Model.thingList[i].thingID)

                    @Html.DropDownListFor(modelItem => modelItem.thingRank, (IEnumerable<SelectListItem>)ViewBag.thingRank, "Rank it Bro.") @*Model.thingRank.Items as IEnumerable<SelectListItem>)*@

                    @*@Html.HiddenFor(modelItem => modelItem.thingRank[Model.thingRank(i)].Value)*@

                    @Html.HiddenFor(modelItem => modelItem.thingRank[Model.thingRank.IndexOf(i)].Value)

                    @*@Html.HiddenFor(modelItem => modelItem.thingRank)*@

                    @Html.DisplayFor(modelItem => Model.thingList[i].thingName)
                </td>
                <td>
                    <img src="@imagePointer" alt="@Model.thingList[i].thingName" height="75" />
                </td>
            </tr>
        }

    </table>

    <input type="submit" value="RANK IT" class="btn btn-default" />
}

Am I just missing something in my hiddenfor?

Adding the code in my RANDModel

[Serializable]
public class RANKDModel
{
    public string firstName { get; set; }
    public string lastName { get; set; }
    public List<thingsModel> thingList { get; set; }
    public IEnumerable<SelectListItem> thingRank { get; set; }
}

Answer 1

You are creating many dropdowns within the for loop. I guess you need them so the user can select something in each row. Right now you have this:

@Html.DropDownListFor(modelItem => modelItem.thingRank, 
    (IEnumerable<SelectListItem>)ViewBag.thingRank, "Rank it Bro.")

So the Razor view engine will create many HTML tags and set the name attribute to thingRank. You do not want that. You want to give each element a unique name. Also when something is selected in each dropdownlist, you will need it later during form submission in your POST method. Therefore, add one more property to your model:

public List<int> SelectedRanks { get; set; }

In the GET action, you will need to set that property to the same number of items as thingList because you need a dropdown for each one of them. Thus do this:

// ...other code
model.SelectedRanks = new List<int>(model.thingList.Count);
return View(model);

Now in your view, use this code in your for loop (please note the indexing operation here):

@Html.DropDownListFor(modelItem => this.Model.SelectedRanks[i], 
    this.Model.thingRank, "Rank it Bro.")

Now each dropdownlist will have a unique name. For example, if you have 3 dropdowns, their names would be: SelectedRanks[0], SelectedRanks[1], and SelectedRanks[2].

When the user submits the form, you can retrieve the selected values from each dropdownlist like this:

[HttpPost]
public ActionResult Index(RANKDModel model)
{
    // model.SelectedRanks will have the value selected
    // For example, model.SelectedRanks[0] will have the value selected
    // in the first dropdown, model.SelectedRanks[1] will have value 
    // selected in the second dropdown and so on.
}

Some Final Suggestions

1. Please give your properties meaningful names. For example, thingList is not a meaningful name.
2. Use Pascal Notation for class names and property names. So instead of thingList, it should be ThingList.
3. If you have an acronym which is 2 chars, use upper case for it, otherwise use Pascal Notation. For example, RANKDModel should be RankdModel (shouldn't it be spelled RankedModel?)