Question

I have a controller with 2 Index methods:

public ActionResult Index()
{
    viewModel.PipelineIndex pivm = new viewModel.PipelineIndex(null, User.Identity.Name);
    return View(pivm);
}

[HttpPost]
public ActionResult Index(viewModel.PipelineIndex model, FormCollection collection)
{
    viewModel.PipelineIndex pivm = null;
    if (ModelState.IsValid)
    {
        string key = collection.AllKeys[0];
        string ID = collection.Get(key).ToString();
        pivm = new viewModel.PipelineIndex(ID, User.Identity.Name);
    }
    else
        pivm = new viewModel.PipelineIndex(null, User.Identity.Name);

    return View(pivm);

}

The ViewModel I am using is a well defined class:

public class PipelineIndex
{
    private Models.Context _db = new Models.Context();

    public List<SelectListItem> GroupList { get; set; }
    public List<string> ButtonCaptions { get; set; }
    public List<ContactDetail> ContactList { get; set; }
    public string PageTitle { get; set; }
    ...

The View consumes the ViewModel setting up a Grid and a Drop Down control:

@model BlueSkies.Pipeline.ViewModels.PipelineIndex
@{ ViewBag.Title = "Index"; }
@using (Html.BeginForm()) 
{
    <h2>@Model.PageTitle</h2>
    <div style="clear:both">
        @if (Model != null)
        {
            var grid = new WebGrid(canPage: true, rowsPerPage: 15, canSort: true, ajaxUpdateContainerId: "grid");
            grid.Bind(Model.ContactList, rowCount: Model.ContactList.Count, autoSortAndPage: true);
            grid.Pager(WebGridPagerModes.All);
            @grid.GetHtml(htmlAttributes: new { id = "grid" },
            columns: grid.Columns(
                grid.Column(format: (item) => Html.ActionLink("View", "Details", "Contacts", new { ID = item.Name }, null)),
                grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", "Contacts", new { ID = item.Name }, null)),
                grid.Column("Name"),
                grid.Column(columnName: "Phone1", header: "Phone")
            ));
        }
    </div>
    <hr />
    <div>
        @*foreach (string caption in ViewBag.ButtonCaptions)
        { 
            @Html.ActionLink(caption, "Index", "Pipeline", new { ID = caption }, new { @class = "menuSubButton" })
        }*@
        @Html.DropDownList("GroupDropDown", Model.GroupList, new { @onchange = "this.form.submit()" }) &nbsp; Select a pipe section...
    </div>
}

Where I am having challenges is when the Drop Down fires the Form.Submit (on the onChange event). No model is being returned to my Controller. I do have the FormCollection but I would rather have the updated model including the new selectedItem in the drop down. What am I missing? And yes, I am looking for a non-JS based solution at this point – or as close as I can. I don’t want to AJAX this page.

TIA

NOTE: There is a similar question here. It is AJAX based but getting the same null model on call into the controller. Why is it so hard to find the right answer? 🙂

Answer 1

I think the rendered HTML form will have a select with the name “GroupDropDown”, is that right? If so, the selected value will be posted back on submit with that name and would be bound to either a parameter called groupDropDown or to a string property GroupDropDown on your model class. Do you have such a property on your model?