I am a newbie to .Net MVC and I am struggling to solve the following.

I have my Model which contains two tables I wish to display on one page. The tables are Products and Suppliers.

I have created a ViewModel which contains both of the enumerated table.

In the Controller I have created a List object which contains the data.

The problem I have is that define the fields in the View i.e. Only **item.Product** is available when I need **item.Product.ID**

Please see my code below:

**Product.cs** - Generated by Entity Framework

```
namespace MyApp
{
    using System;
    using System.Collections.Generic;

    public partial class Product
    {
        public Product()
        {
            this.Suppliers = new HashSet<Supplier>();
        }

        public int ID { get; set; }
        public string title { get; set; }
        public string img { get; set; }
        public string description { get; set; }

        public virtual ICollection<Supplier> Suppliers { get; set; }
    }
}

```

**Supplier.cs** - Generated by Entity Framework

```
namespace MyApp
{
    using System;
    using System.Collections.Generic;

    public partial class Supplier
    {
        public int ID { get; set; }
        public string name { get; set; }
        public int productID { get; set; }
        public decimal price { get; set; }

        public virtual Product Product { get; set; }
    }
}

```

**ProductWithSupplier.cs**

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace MyApp
{
    public class ProductWithSupplier
    {
        public IEnumerable<Product> Products { get; set; }
        public IEnumerable<Supplier> Suppliers { get; set; }
    }
}

```

**HomeController.cs**

```
public ActionResult Index()
{
        var p = from product in _db.Products
                        select product;

        var s = from supplier in _db.Suppliers
                        select supplier;

        var model = new List<MyApp.ProductWithSupplier> { new ProductWithSupplier()
            {
                Products = p,
                Suppliers = s
            }
        };

        return View(model);
}

```

**Index.cshtml** - This is where the problem is. I can't specify Product.ID, Product.title, Product.img, Product.price and Supplier.name

```
@model List<MyApp.ProductWithSupplier>

@{
    ViewBag.Title = "Home Page";
}

        @foreach (var item in Model) {

        <div class="product @Html.Raw(item.Products.size)">
            <div class="media">
                <a href="product.html" title="product title">
                    <img src="@Html.Raw(item.Products.img)" alt="product title" data-img="product-1" />
                </a>            
            </div>
            <div class="details">
                <p class="name"><a href="product.html">@Html.Raw(item.Products.title)</a></p>
                <p class="price"><span class="cur">&pound;</span><span class="total">@Html.Raw(item.Products.price)</span></p>
            </div>
            <div class="details-supplier" id="details-@Html.Raw(item.Products.ID)">
                @foreach (var supplier in Model) {
                    <p>@supplier.Suppliers.name</p>
                }
            </div>
        </div>
        }

```

Thanks in advance!