MVC4: View appears to be maintaining state independently of the controller

Question

I have a dropdown (customer) and list of checkboxes (sales orders), dependent upon the currently selected customer. I would expect the checkboxes to clear if I select a new customer, but they are maintained from one to the other, despite the model being cleared in the postback.

I'm not a seasoned MVC developer, but I'm not sure why this should be. When debugging the ViewModel I'm sending back to the view, it is showing IsSelected = false for all the checkboxes, yet in the View, they are selected. What am I doing wrong? (Thanks in advance)

View Model:

namespace MvcTest1.Models
{
    public class Customer
    {
        public int CustomerID { get; set; }
        public string Name { get; set; }
    }

    public class SalesOrder
    {
        public int SalesOrderID { get; set; }
        public string Reference { get; set; }
        public bool IsSelected { get; set; }
    }

    public class SalesOrderPageViewModel
    {
        public List<Customer> Customers { get; set; }
        public int SelectedCustomerID { get; set; }
        public List<SalesOrder> SalesOrders { get; set; }
    }
}

Controller:

namespace MvcTest1.Controllers
{
    public class SalesOrderPageController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            SalesOrderPageViewModel viewModel = BuildViewModel(1);

            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(SalesOrderPageViewModel viewModelInput)
        {
            SalesOrderPageViewModel viewModel = BuildViewModel(viewModelInput.SelectedCustomerID);

            return View(viewModel);
        }

        public SalesOrderPageViewModel BuildViewModel(int customerID)
        {
            SalesOrderPageViewModel viewModel = new SalesOrderPageViewModel
            {
                Customers = new List<Customer> 
                { 
                    new Customer { CustomerID = 1, Name = "Alan" },
                    new Customer { CustomerID = 2, Name = "Bob" },
                    new Customer { CustomerID = 3, Name = "Charlie" }
                }
            };

            viewModel.SelectedCustomerID = customerID;

            if (customerID == 1)
            {
                viewModel.SalesOrders = new List<SalesOrder>
                {
                    new SalesOrder { SalesOrderID = 11, Reference = "AA11" },
                    new SalesOrder { SalesOrderID = 12, Reference = "AA22" },
                    new SalesOrder { SalesOrderID = 13, Reference = "AA33" }
                };
            }
            if (customerID == 2)
            {
                viewModel.SalesOrders = new List<SalesOrder>
                {
                    new SalesOrder { SalesOrderID = 21, Reference = "BB11" },
                    new SalesOrder { SalesOrderID = 22, Reference = "BB22" },
                    new SalesOrder { SalesOrderID = 23, Reference = "BB33" }
                };
            }
            if (customerID == 3)
            {
                viewModel.SalesOrders = new List<SalesOrder>
                {
                    new SalesOrder { SalesOrderID = 31, Reference = "CC11" },
                    new SalesOrder { SalesOrderID = 32, Reference = "CC22" },
                    new SalesOrder { SalesOrderID = 33, Reference = "CC33" }
                };
            }

            return viewModel;
        }
    }
}

View:

@model MvcTest1.Models.SalesOrderPageViewModel

@{
    ViewBag.Title = "SalesOrderPage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>SalesOrderPage</h2>

<br /><br />

@using (Html.BeginForm())
{

    @Html.DropDownListFor(model =>
        model.SelectedCustomerID,
        new SelectList(
            Model.Customers, 
            "CustomerID", 
            "Name", 
            Model.SelectedCustomerID
        ),
        new { id = "customerSelect" }
        );

    <script type="text/javascript">

        $(function () {
            $('#customerSelect').change(function () {
                this.form.submit();
            });
        })

    </script>

    <br /><br />

    for (int i = 0; i < Model.SalesOrders.Count(); i++)
    {
        @Html.DisplayFor(m => Model.SalesOrders[i].Reference) 
        @Html.CheckBoxFor(m =>
            m.SalesOrders[i].IsSelected
        )
        <br />
    }

}

Answer 1

Looks like Ryan is correct about ModelState.Clear(). Here's an article explaining why it is necessary:

http://patrickdesjardins.com/blog/modelstate-clear-is-required-to-display-back-your-model-object