My controller viewmodel isn't been populated with my dynamic views model

Im creating an application that allows me to record recipes. Im trying to create a view that allows me to add the basics of a recipe e.g. recipe name,date of recipe, temp cooked at & ingredients used.

I am creating a view that contains some jquery to load a partial view clientside.

On post im having a few troubles trying to get the values from the partial view that has been loaded using jquery.

A cut down version of my main view looks like (I initially want 1 partial view loaded)

 <div id="ingredients">
         @{ Html.RenderPartial("_AddIngredient", new IngredientViewModel()); }
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
    var dest = $("#ingredients");
    $("#add-ingredient").click(function () {
        loadPartial();
    });
    function loadPartial() {
        $.get("/Recipe/AddIngredient", {}, function (data) { $('#ingredients').append(data); }, "html");
    };
});
</script>

My partial view looks like

<div class="ingredient-name">
   @Html.LabelFor(x => Model.IngredientModel.IngredientName)
   @Html开发者_如何学JAVA.TextBoxFor(x => Model.IngredientModel.IngredientName)
</div>
<div class="ingredient-measurementamount">
   @Html.LabelFor(x => Model.MeasurementAmount)
   @Html.TextBoxFor(x => Model.MeasurementAmount)
</div>
<div class="ingredient-measurementtype">
  @Html.LabelFor(x => Model.MeasurementType)
  @Html.TextBoxFor(x => Model.MeasurementType)
</div>

Controller Post

  [HttpPost]
    public ActionResult Create(RecipeViewModel vm,IEnumerable<string>IngredientName,  IEnumerable<string> MeasurementAmount, IEnumerable<string> MeasurementType)
    {

Finally my viewmodel looks like

 public class IngredientViewModel
{
    public RecipeModel RecipeModel { get; set; }
    public IEnumerable<IngredientModel> Ingredients { get; set; }

}

My controller is pretty ugly......im using Inumerble to get the values for MeasurementAmount & MeasurementType (IngredientName always returns null), Ideally I thought on the httppost Ingredients would be populated with all of the on I would be able Ingredients populated

What do I need to do to get the values from my partial view into my controller?

---

Why don't you take a look at the MVC Controlstoolkit

I think they would do what you want.

---

Without getting in too much detail. Can you change the public ActionResult Create to use FormCollection instead of a view model? This will allow you to see what data is coming through if any. It would help if you could post it then.

Your view model gets populated by using Binding - if you haven't read about it, it might be a good idea to do that. Finally I would consider wrapping your lists or enums into a single view model.

---

Possible Problem

The problem could lay with the fact that the new Partial you just rendered isn't correctly binded with your ViewModel that you post later on.

If you inspect the elements with firebug then the elements in the Partial should be named/Id'ed something like this: Ingredients[x].Property1,Ingredients[x].Property2 etc.

In your situation when you add a partial they are probably just called Property1,Property2.

Possible Solution

Give your properties in your partial the correct name that corresponds with your List of Ingredients. Something like this:

@Html.TextBox("Ingredients[x].Property1","")

Of, after rendering your partial just change all the names en ID's with jquery to the correct value.

---

It happens because fields' names from partial view do not fit in default ModelBinder convention. You should analyze what names fields have in your partial view.

Also you should implement correct way of binding collections to MVC controller. You could find example in Phil's Haack post

---

Assuming RecipeViewModel is the model being supplied to the partial view, try just accepting that back in your POST controller like this:

[HttpPost]
public ActionResult Create(RecipeViewModel vm)
{
  //
}

You should get the model populated with all the values supplied in the form.