Question

For the past couple weeks I have been researching everything I possibly can and have seemed to hit a wall on figuring out how to create a form using multiple models and saving to a database.

I am trying to be able to add 1 or more ingredients to a recipe on a single form create. I have created all the generated template crud views. I’m confused on which direction to go with this and am debating on looking into using MVC Controls Toolkit as well because I need the ability to add another ingredient on the form using jquery and ajax. Right now though, my main concern is just being able to bind the Recipe, Ingredient, and RecipeIngredient model if needed onto the form.

Any help will be greatly appreciated with setting up my view and controller methods! Thanks in advance 🙂

Here are my model classes, a viewmodel, the controller method.
Unfortuantly I dont have enough reputation to post a image but here is the link to my database diagram. http://i44.tinypic.com/xp1tog.jpg.
I hope this is enough detail but if more is needed please let me know.

    public ActionResult CreateFullRecipe()
    {
        var recipeViewModel = new RecipeViewModel();
        //Im getting a RecipeIngredients null error as well below..
        recipeViewModel.RecipeIngredients.Add(new RecipeIngredient());
        return View(recipeViewModel);
    }

public class Recipe
{
    public int RecipeID { get; set; }
    public string RecipeName { get; set; }
    public string Description { get; set; }
    public int? PrepTime { get; set; }
    public int? CookTime { get; set; }
    public string ImageURL { get; set; }

    public virtual ICollection<RecipeTag> RecipeTags { get; set; }
    public virtual ICollection<Rating> Ratings { get; set; }
    public virtual ICollection<RecipeStep> RecipeSteps { get; set; }
    public virtual ICollection<RecipeIngredient> RecipeIngredients { get; set; }

}

public class Ingredient
{

    public int IngredientID { get; set; }
    public string IngredientName { get; set; }

    public virtual ICollection<RecipeIngredient> RecipeIngredients { get; set; }
}

    public class RecipeIngredient
{
    public int RecipeIngredientID { get; set; }
    public string IngredientDesc { get; set; }
    public string Amount { get; set; }
    public int RecipeID { get; set; }
    public int? IngredientID { get; set; }

    public virtual Recipe Recipe { get; set; }
    public virtual Ingredient Ingredient { get; set; }
}

public class RecipeViewModel
{
    public Recipe Recipe { get; set; }
    public Ingredient Ingredient { get; set; }
    public ICollection<RecipeIngredient> RecipeIngredients { get; set; }
}

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Recipe</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Recipe.RecipeName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Recipe.RecipeName)
        @Html.ValidationMessageFor(model => model.Recipe.RecipeName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Ingredient.IngredientName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Ingredient.IngredientName)
        @Html.ValidationMessageFor(model => model.Ingredient.IngredientName)
    </div>



    <ul>
    @foreach (var recipeingredient in Model.RecipeIngredients)
    {
        <li>
            @recipeingredient.Ingredient.IngredientName
       </li>
    }
    </ul>

Answer 1

You do not need any other toolkit/tool to be able to do it. You have all you need in MVC and JQuery. Below is a great article on model binding. It explains how to bind a list of classes too. I recommend reading the whole thing. If it was me, I would start simple, just bind one of the classes, then add a view model, then a collection of classes/entities

Model Binding