I can give you some idea how I've achieved similar requirement with server side postbacks to make Master Details work
ViewModel
public class ProfileViewModel
{
public string Name {get;set;}
public List<Education> EducationList {get;set;}
}
Controller
[HttpGet]
public async Task<ActionResult> AddProfile()
{
return View(new ProfileViewModel());
}
[HttpPost]
public async Task<ActionResult> AddProfile(ProfileViewModel viewModel)
{
}
[HttpPost]
public async Task<ActionResult> AddEducation(ProfileViewModel viewModel)
{
viewModel.EducationList.Add(new Education(){});
return View("AddProfile", viewModel);
}
View
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "yourform" }))
{
@Html.EditorFor(model => model.Name, new { htmlAttributes=new { @class="control" }})
<input type="button" value="Add Education" id="@("add_education")" />
<table>
@for (int i = 0; i < options.Count(); i++)
{
<tr>
<td>@Html.EditorFor(model => options[i].DegreeName ,null,"DegreeName")</td>
<td>@Html.EditorFor(model => options[i].YearCompleted ,null, "YearCompleted")</td>
</tr>
}
</table>
<input type="button" value="Add Profile" id="@("add_profile")" />
}
Scripts
$(document).ready(function () {
$("#@("add_education")").click(function (e) {
$("#yourformId").attr("action", '@Url.Action("AddEducation", "UserProfile")');
$("#yourformId").submit();
});
$("#@("add_profile")").click(function (e) {
$("#yourformId").attr("action", '@Url.Action("AddProfile", "UserProfile")');
$("#yourformId").submit();
});
});
So the main idea is to post back to a separate action on Add Education button but return the same viewModel after adding one more record in the list and return to Add Profile view with updated viewModel