Dynamic partial view list not being picked up when saving - asp.net-mvc-4

Question

I have a partial view that gets rendered in my main view using this code
<div>
<h3>Budget Detail</h3>
<div><input type="button" id="addbudgetdetail" value="Add row" /></div>
<div id="new-budgetdetail">
#if (Model.budget != null)
{
foreach (var budgetdetail in Model.budget.budgetdetails)
{
#Html.Partial("budgetdetail", Model)
}
}
else
{
#Html.Partial("budgetdetail", Model)
}
</div>
</div>
There is a java script to dynamically add more partial views when clicking a button
$(function () {
$('#addbudgetdetail').on('click', function () {
jQuery.get('#Url.Action("budgetdetail")').done(function (html) {
$('#new-budgetdetail').append(html);
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
});
});
});
This is My partial view:
#model BudgetPortalMVC4.Models.NewBudgetModel
#{
Layout = null;
}
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
#using (Html.BeginCollectionItem(""))
{
#Html.ValidationSummary(true)
<div class="item">
<table>
<tr>
<td>
#Html.LabelFor(m => m.SelectedCategory)
#Html.DropDownListFor(m => m.SelectedCategory, Model.CategoriesList, "Please select", new { #class = "SelectedCategory" })
#Html.ValidationMessageFor(m => m.SelectedCategory)
</td>
<td>
#Html.LabelFor(m => m.SelectedSubCategory)
#Html.DropDownListFor(m => m.SelectedSubCategory, Model.SubCategoriesList, "Please select", new { #class = "SelectedSubCategory" })
#Html.ValidationMessageFor(m => m.SelectedSubCategory)
</td>
<td>
#Html.LabelFor(model => model.budgetdetail.Amount)
#Html.EditorFor(model => model.budgetdetail.Amount)
#Html.ValidationMessageFor(model => model.budgetdetail.Amount)
</td>
<td><a href="#" id="deleteRow" class="deleteRow">Delete</a</td>
</tr>
</table>
</div>
}
My problem is when I click submit I don't see any list for my partial views.
I can only see the data that is coming directly from my main view.
Am I missing an IEnumerable property somewhere? Should I try to use editor templates instead?

Answer 1

I have solved this problem. I had to rework the models and instead of using a big model grouping the budget and budget detail, i am using 2 models one for budget and one for budgetdetail.
I also rewrote the dropdown lists to comply to the new model:
#Html.LabelFor(m => m.category)
#Html.DropDownListFor(m => m.idCategory, new SelectList(ViewBag.CategoriesList, "idCategory", "CategoryName"), "Please select", new { #class = "SelectedCategory" })
#Html.ValidationMessageFor(m => m.idCategory)
#Html.LabelFor(m => m.subcategory)
#Html.DropDownListFor(m => m.idSubcategory, new SelectList(ViewBag.SubCategoriesList, "Value", "Text"), "Please select", new { #class = "SelectedSubCategory" })
#Html.ValidationMessageFor(m => m.idSubcategory)
Instead of using a partial view I created an editor template. Following Stephen's advice that BeginCollection can't be use in editor templates I used an html helper to create unique items in my collection.
This is the code for the helper:
using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;
namespace BudgetPortalMVC4.Extensions
{
public static class HtmlHelperExtensions
{
public static MvcHtmlString EditorForMany<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, IEnumerable<TValue>>> expression, string htmlFieldName = null) where TModel : class
{
var items = expression.Compile()(html.ViewData.Model);
var sb = new StringBuilder();
if (String.IsNullOrEmpty(htmlFieldName))
{
var prefix = html.ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix;
htmlFieldName = (prefix.Length > 0 ? (prefix + ".") : String.Empty) + ExpressionHelper.GetExpressionText(expression);
}
foreach (var item in items)
{
var dummy = new { Item = item };
var guid = Guid.NewGuid().ToString();
var memberExp = Expression.MakeMemberAccess(Expression.Constant(dummy), dummy.GetType().GetProperty("Item"));
var singleItemExp = Expression.Lambda<Func<TModel, TValue>>(memberExp, expression.Parameters);
sb.Append(String.Format(#"<input type=""hidden"" name=""{0}.Index"" value=""{1}"" />", htmlFieldName, guid));
sb.Append(html.EditorFor(singleItemExp, null, String.Format("{0}[{1}]", htmlFieldName, guid)));
}
return new MvcHtmlString(sb.ToString());
}
}
}
Now I call the template from the main using an intermediate IEnumerable view.
This is the call from the main view:
#Html.EditorForMany(x => x.budgetdetails)
And this is the intermediate IEnumerable view:
#model IEnumerable<BudgetPortalMVC4.Models.budgetdetail>
#{
Layout = null;
}
#Html.EditorForMany(x => x, "budgetdetails")
Hope this is helpful.