Returning the View Model to a Controller from a Form.Submit client action

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 am mentally exhausted, so I add this disclaimer. Thought Answering a question would get me away from my day.

The business problem appears to be "select one item from drop down and have contents rendered accordingly". If that is correct, there is no need to pass back the entire contents of the View Model; you only need to pass back the id, which is demoed numerous times on many sites.

Am I missing something?

Answer 2

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?