How should I display in a view all the ingredients in from a recipe when I am using many-to-many relationship in EF?

Keywords: c# asp.net-mvc visual-studio entity-framework

Question: 

So I want to display in a View all the Ingredients that a recipe has. I have created with EF a Ingredient table and a Recipe table. The relationship is many-to-many. I can't get how to show in one view the ingredients of a recipe.

I tried to modify the models so that I can show the ingredients, but I was able to see only one ingredient.

This is my Ingredient class:

namespace Licenta.Models
{
    public class Ingredient
    {
        [Key]
        public int IDIngredient { get; set; }
        public string Nume { get; set; }
        public int Kcal { get; set; }
        public int Pro { get; set; }
        public int Carbo { get; set; }
        public int Fat { get; set; }
        public IList<Recipe> Recipes { get; set; }
    }
}

This is my Recipe class:

namespace Licenta.Models
{
    public class Recipe
    {
        [Key]
        public int IDRecipe { get; set; }
        public string Name { get; set; }
        public string Desc { get; set; }
        public string Steps { get; set; }
        public int Kcal { get; set; }
        public int Pro { get; set; }
        public int Carbo { get; set; }
        public int Fat { get; set; }
        public IList<Ingredient> Ingredients { get; set; }

    }
}

And this is my View:

@model Licenta.Models.Recipe

@{
    ViewBag.Title = "Details";
}

<h2>Recipe Details</h2>

<div>
    <h4>Recipe</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            Name:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            Calories:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Kcal) calorii
        </dd>
        <dt>
            Proteins:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Pro) grame
        </dd>
        <dt>
            Carbs:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Carbo) grame
        </dd>
        <dt>
            Fat:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Fat) grame
        </dd>
        <dt>
            Description:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Desc)
        </dd>
        <dt>
            Steps:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Steps)
        </dd>
        <dt>
            Ingredients:
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Ingredients)
        </dd>
    </dl>
</div>

The controller that I am using is this one:

namespace Licenta.Controllers
{
    public class HomeController : Controller
    {

        private DataContext db = new DataContext();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Recipes()
        {
            return View(db.Recipes.ToList());
        }

        public ActionResult Details(int? id)
        {
            if(id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Recipe recipe = db.Recipes.Find(id);

            if(recipe == null)
            {
                return HttpNotFound();
            }

            return View(recipe);
        }
        
    }
}

I also saw that EF created a RecipesIngredients table in my database. How should I use that table to list the ingredients of my recipe?

Answers: