如何将动态项绑定到mvc中的列表

Question

我有一个ViewModel，它包含另一个ViewModel的列表，如：

 public class EditProductViewModel
{
 public string Name { get; set; }
public List<ProductPriceItemViewModel> ProductList { get; set; }
}

  public class ProductPriceItemViewModel
{
    public int PurchasePrice { get; set; }
    public int SalePrice { get; set; }
}

在查看用户可以添加新行和添加新Product这样做我使用这样的jquery：

 $(document).on('click', '#addnewproductprice', function () {
    $("#ProductPriceList tr:last").before("<tr>"+ $("#ProductPriceList tr#template").html()+"</tr>");
});

     <tr id="template" class="hidden">
                            <td><input type="text" class="txtpurchase form-control" name="ProductList[index].PurchasePrice" /></td>
                            <td><input type="text" class="txtsale form-control" name="ProductList[index].SalePrice" /></td>
<span class="btnSavePrice btn btn-xs btn-info">Save</span>
                            </td>
                        </tr>

但是当点击提交并在Controller中进入Debig模式时，ProductList为null。模型绑定器不绑定数据，我不知道？ 有没有办法做到这一点？