Binding to dynamically added fields in the default model binder in MVC

Question

Hi All,

I am definitely missing some understanding of the automatic model binding of a view.

The issue:

I have a view model that has properties as follows:

public class ItemViewModel
{
    public TextBoxControlData FundName { get; set; }
    public List<DateControlData> Dates { get; set; }
}

where TextBoxControlData and DateControlData include the data necessary for me to build the text box controls.

public class DateControlData : BaseControlData
{
    public DateTime Date { get; set; }
    public override string StringValue { get { return Date.ToString("dd-MM-yyyy") ; } }

    public DateControlData(string name, string displayText) :this(name, displayText,DateTime.MinValue) {}

    public DateControlData(string name, string displayText, DateTime date) : base(name,displayText)
    {
        Date = date;
    }
}

public abstract class BaseControlData
{
    public string Name { get; set; }
    public string DisplayText { get; set; }
    public abstract string StringValue { get; }

    public BaseControlData(string name, string displayText) 
    {
        Name = name;
        DisplayText = displayText;
    }
}

Page:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ViewModel.DateControlData>" %>

<label for="<%= Model.Name %>"><%= Model.DisplayText %>:</label>
<%= Html.TextBox(
        string.Format("{0}.Date", Model.Name),
        ((DateTime)(Model.Date == DateTime.MinValue ? DateTime.Now.Date : Model.Date)).ToString("dd-MM-yyyy"),
        new { @id = Model.Name, @class = "date-pick" })
%>
<script type="text/javascript" >
 $(document).ready(function() {
     $(<%= "'#" + Model.Name + "'" %>).datepicker({dateFormat: 'dd-mm-yy'});
     $(<%= "'#" + Model.Name + "'" %>).mask("99-99-9999");
 });
</script>

currently this generates the following markup

<label for="ExDate">Ex Date:</label>
<input class="date-pick" id="ExDate" name="ExDate.Date" type="text" value="03-12-2009" />
<script type="text/javascript" >
 $(document).ready(function() {
     $('#ExDate').datepicker({dateFormat: 'dd-mm-yy'});
     $('#ExDate').mask("99-99-9999");
 });
</script>

My question is: how do I get ASP.NET MVC default bindings to recognize that the value in the above dynamically created Box refers to the Date propery of the relevant instance of the DateControlData in the Dates property of the instance of ItemViewModel.

Thanks in advance Paul