Default model binding throwing "No paramaterless constructor defined for this object"

Question

I have a form where we want to enter multiple deals for a single customer. The viewmodel for the form looks like this:

public class TradeSpendingEntryViewModel
{
    public TradeSpendingEntryViewModel()
    {
        Records = new List<TradeSpendingEntryViewModelRecord>();
    }

    public string CustomerNumber { get; set; }
    public DateTime Date { get; set; }
    public SelectList PlanningYears { get; set; }

    public List<TradeSpendingEntryViewModelRecord> Records { get; set; }
}

We want to be able to add and remove record entry rows dynamically with javascript. Each record in the collection is:

public class TradeSpendingEntryViewModelRecord
{
    public TradeSpendingEntryViewModelRecord()
    {
    }

    public string LOB { get; set; }
    public string ProductCode { get; set; }
    public SelectList AllowType { get; set; }
    public int Cases { get; set; }
    public bool EndCurrentDeal { get; set; }
    public Single DealRate { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Comments { get; set; }
}

When I attempt to post data to my controller, I get an error indicating "No parameterless constructor defined for this object:

[HttpPost]
    public ActionResult Index(TradeSpendingEntryViewModel vm)
    {
        try
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Index");
            }
            // TODO: Add insert logic here
            return View(vm);
        }
        catch
        {
            return View();
        }
    }

Stack trace indicates it happens during the model binding:

[MissingMethodException: No parameterless constructor defined for this object.] System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck) +0 System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark) +113 System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark) +232 System.Activator.CreateInstance(Type type, Boolean nonPublic) +83 System.Activator.CreateInstance(Type type) +6 System.Web.Mvc.DefaultModelBinder.CreateModel(ControllerContext controllerContext, ModelBindingContext bindingContext, Type modelType) +183

My issue must be stemming from how I've setup my view, the markup of which I have based off this article http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

@using (Html.BeginForm())
{
<header class="clearfix">
        <img src="../../Content/images/logo.png" alt="Irving Consumer Products" />
        <h1>Enter Customer Deals</h1>
    </header>
    <hr />
    <fieldset>
        <legend>Customer details</legend>
        <table>
            <tr>
                <th>
                    Date:
                </th>
                <td>
                    <input type="date" disabled="disabled" value="@DateTime.Today.ToShortDateString()" />
            </tr>
            <tr>
                <th>
                    Customer Number:
                </th>
                <td>
                    @Html.TextBoxFor(m => m.CustomerNumber, new { id = "customer-number" })
                    <a href="#" id="change-customer-number">Change me</a>
                </td>
            </tr>
            <tr>
                <th>
                    Customer Name:
                </th>
                <td>
                    <input type="text" id="customer-name" disabled="disabled" />
                </td>
                <tr>
                    <th>
                        Planning Year:
                    </th>
                    <td>
                        @Html.DropDownList("PlanningYear", Model.PlanningYears)
                        <a href="#" id="change-planning-year">Change me</a>
                    </td>
                </tr>
        </table>
    </fieldset>
    <div class="buttonGroup">
        <input type="button" value="Add line" id="add-line">
        <input type="button" value="Copy line" id="copy-line">
        <input type="button" value="Delete line" id="delete-line">
    </div>
    <hr />
    <table id="tradeSpendingEntry">
        <thead>
            <tr>
                <th>
                </th>
                <th>
                    Line of business
                </th>
                <th>
                    Product Code
                </th>
                <th>
                    Product Description
                </th>
                <th>
                    Allowance
                    <br />
                    Type
                </th>
                <th>
                    Cases
                </th>
                <th>
                    End Current Deal
                </th>
                <th>
                    Start Date
                </th>
                <th>
                    End Date
                </th>
                <th>
                    Rate
                </th>
            </tr>
        </thead>
        @foreach (var r in Model.Records)
        {
            <tbody data-entry-index="0">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <input type="text" name="records[0].LOB" class="lobSelect" value="@r.LOB">
                </td>
                <td>
                    <!--<input type="hidden" name="records[0]ProductCodeSelected" value="@r.ProductCode" />-->
                    <input type="text" name="records[0].ProductCode" value="@r.ProductCode">
                </td>
                <td>
                    <input type="text" class="product-description" disabled="disabled" />
                </td>
                <td>
                    @Html.DropDownList("records[0].AllowType", r.AllowType)
                </td>
                <td>
                    <input name="records[0].Cases" type="number" />
                </td>
                <td>
                    <select name="records[0].EndCurrentDeal">
                        <option value="true" selected="selected">Yes</option>
                        <option value="false">No</option>
                    </select>
                </td>
                <td>
                    <input type="date" name="records[0].StartDate" />
                </td>
                <td>
                    <input type="date" name="records[0].EndDate" />
                </td>
                <td>
                    <input type="text" name="records[0].DealRate" />
                </td>
                </tr>
            <tr>
                <td></td>
                <td>
                    Comments:
                </td>
                <td colspan="8">
                    <input type="text" class="comment" name="records[0].Comments" />
                </td>
                </tr>
        </tbody>
        }
    </table>

    <footer>
        <div class="buttonGroup">
        <input type="submit" value="Submit Changes">
        <input type="button" value="Main Menu">
        <input type="button" value="View Customer Deals">
    </div>
    </footer>
    }

So, my hope was that the fields in the first fieldset would map to the immediate properties of the TradeSpendingEntryViewModel object (CustomerName, Date, PlanningYears). Then, for each representing a TradeSpendingEntryViewModelRecord would be bound as an item in the TradeSpendingEntryViewModel.Records collection. Instead, I just get a mysterious "No parameterless constructor defined" exception, despite both the ViewModel and the record object both having paramaterless constructors.

My question is, can I use the default model binder using the conventions indicated in the aforementioned article, or do I need to build a custom model binder for this purpose?

For completeness sake, the following is the markup of the form that gets generated after a user dynamically adds a line to the form via javascript:

<form method="post" action="/TradeSpendingEntry/Index">
<header class="clearfix">
<img alt="Irving Consumer Products" src="../../Content/images/logo.png">
<h1>Enter Customer Deals</h1>
</header>
<hr>
<fieldset>
<legend>Customer details</legend>
<table>
<tbody>
<tr>
<th> Date: </th>
<td>
<input id="dp1363608756704" class="hasDatepicker" type="date" value="18/03/2013" disabled="disabled" style="background-color: rgb(238, 238, 238);">
</td>
</tr>
<tr>
<th> Customer Number: </th>
<td>
<input id="customer-number" type="text" value="" name="CustomerNumber">
<a id="change-customer-number" href="#">Change me</a>
</td>
</tr>
<tr>
<th> Customer Name: </th>
<td>
<input id="customer-name" type="text" disabled="disabled" style="background-color: rgb(238, 238, 238);">
</td>
</tr>
<tr>
<th> Planning Year: </th>
<td>
<select id="PlanningYears" name="PlanningYears">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<a id="change-planning-year" href="#">Change me</a>
</td>
</tr>
</tbody>
</table>
</fieldset>
<div class="buttonGroup">
<input id="add-line" type="button" value="Add line">
<input id="copy-line" type="button" value="Copy line">
<input id="delete-line" type="button" value="Delete line">
</div>
<hr>
<table id="tradeSpendingEntry">
<thead>
<tr>
<th> </th>
<th> Line of business </th>
<th> Product Code </th>
<th> Product Description </th>
<th>
Allowance
<br>
Type
</th>
<th> Cases </th>
<th> End Current Deal </th>
<th> Start Date </th>
<th> End Date </th>
<th> Rate </th>
</tr>
</thead>
<tbody data-entry-index="0">
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input class="lobSelect" type="text" name="records[0].LOB">
</td>
<td>
<input type="text" name="records[0].ProductCode">
</td>
<td>
<input class="product-description" type="text" disabled="disabled" style="background-color: rgb(238, 238, 238);">
</td>
<td>
<select id="records_0__AllowType" name="records[0].AllowType">
<option selected="selected">BillBack$</option>
<option>Billback%</option>
<option>O&A%</option>
<option>Coop%</option>
<option>VR%</option>
<option>Lump - O&A$</option>
<option>Lump - CP$</option>
<option>Lump - VR$</option>
<option>Lump - BB$</option>
</select>
</td>
<td>
<input type="number" name="records[0].Cases">
</td>
<td>
<select name="records[0].EndCurrentDeal">
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
<td>
<input id="dp1363608756707" class="hasDatepicker" type="date" name="records[0].StartDate">
</td>
<td>
<input id="dp1363608756708" class="hasDatepicker" type="date" name="records[0].EndDate">
</td>
<td>
<input type="text" name="records[0].DealRate">
</td>
</tr>
<tr>
<td></td>
<td> Comments: </td>
<td colspan="8">
<input class="comment" type="text" name="records[0].Comments">
</td>
</tr>
</tbody>
<tbody data-entry-index="1">
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input class="lobSelect" type="text" name="records[1].LOB">
</td>
<td>
<input type="text" name="records[1].ProductCode">
</td>
<td>
<input class="product-description" type="text" disabled="disabled" style="background-color: rgb(238, 238, 238);">
</td>
<td>
<select id="records_0__AllowType" name="records[1].AllowType">
<option selected="selected">BillBack$</option>
<option>Billback%</option>
<option>O&A%</option>
<option>Coop%</option>
<option>VR%</option>
<option>Lump - O&A$</option>
<option>Lump - CP$</option>
<option>Lump - VR$</option>
<option>Lump - BB$</option>
</select>
</td>
<td>
<input type="number" name="records[1].Cases">
</td>
<td>
<select name="records[1].EndCurrentDeal">
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
<td>
<input id="dp1363608756709" class="hasDatepicker" type="date" name="records[1].StartDate">
</td>
<td>
<input id="dp1363608756710" class="hasDatepicker" type="date" name="records[1].EndDate">
</td>
<td>
<input type="text" name="records[1].DealRate">
</td>
</tr>
<tr>
<td></td>
<td> Comments: </td>
<td colspan="8">
<input class="comment" type="text" name="records[1].Comments">
</td>
</tr>
</tbody>
</table>
<footer>
<div class="buttonGroup">
<input type="submit" value="Submit Changes">
<input type="button" value="Main Menu">
<input type="button" value="View Customer Deals">
</div>
</footer>
</form>

Answer 1

Without a doubt it is the SelectList. I had the same problem just yesterday.

If you look at the SelectList all of it's constructors require a parameter. http://msdn.microsoft.com/en-us/library/system.web.mvc.selectlist(v=vs.108).aspx

The problem is when your Action is called public ActionResult Index(TradeSpendingEntryViewModel vm)

The controller tries to bind the data sent back on POST to TradeSpendingEntryViewModel upon which it needs to set the value for PlanningYears which it tires to do by creating a new SelectList

To fix the problem, you either need to make the SelectList a private variable aka a backing field, and then set it to an empty list by default. This gives it the parameterized constructor it needs:

    //select list
    private SelectList planningYears = new SelectList(new List<YourObject>());

    public SelectList PlanningYears 
    {
        get
        {
            return planningYears;
        }
        set
        {
            locations = planningYears;
        }
    }

Or change PlanningYears to a List<> and convert it to a select list on the view.

@Html.DropDownListFor(m => m.PlanningYears , new SelectList(Model.PlanningYears ), "choose", null)

Answer 2

this will resolve your selectlist issue. create new class with name SelectListNew and inherit it from SelectList as mention below example. now instead of SelectList use SelectListNew

public class SelectListNew : SelectList
{
    public SelectListNew() : base(string.Empty) { }
    public SelectListNew(IEnumerable items) : base(items) { }
    public SelectListNew(IEnumerable items, object selectedValue) : base(items, selectedValue) { }
    public SelectListNew(IEnumerable items, object selectedValue, IEnumerable disabledValues) : base(items, selectedValue, disabledValues) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField) : base(items, dataValueField, dataTextField) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField, object selectedValue) : base(items, dataValueField, dataTextField, selectedValue) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField, string dataGroupField, object selectedValue) : base(items, dataValueField, dataTextField, dataGroupField, selectedValue) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField, object selectedValue, IEnumerable disabledValues) : base(items, dataValueField, dataTextField, selectedValue, disabledValues) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField, string dataGroupField, object selectedValue, IEnumerable disabledValues) : base(items, dataValueField, dataTextField, dataGroupField, selectedValue, disabledValues) { }
    public SelectListNew(IEnumerable items, string dataValueField, string dataTextField, string dataGroupField, object selectedValue, IEnumerable disabledValues, IEnumerable disabledGroups) : base(items, dataValueField, dataTextField, dataGroupField, selectedValue, disabledValues, disabledGroups) { }
}

Answer 3

I had a better idea! Simple declare your property (selectList) as method:

do the following

//fill it if whatever you want from db
private List<YourList> happyList = new List<YourList>(); 

//that way mvc will never try to instantiate selectList on Action execution
public SelectList PlanningYears() 
    {
        return new SelectList(happyList,"happyID","happyDesc","");
    }

a lot of time doing properties in c# made me forget how simple it was....