How to Combine two models into a single model and

I'm trying to combine two models (tblCategories and tblProducts) into a single model and pass it to a view. But was not able to.

tblCategory.cs which is main model has the following data

namespace ScaffoldCreate.Models
{
    using System;
    using System.Collections.Generic;

    public partial class tblCategory
    {
        public int CategoryId { get; set; }
        public string Name { get; set; }
    }
}

tblProduct.cs

public partial class tblProduct
    {
        public int ProductId { get; set; }
        public int ProductName { get; set; }
        public int CategoryId { get; set; }
        public int SubCategoryId { get; set; }
        public string ProductDescription { get; set; }
        public string StockStatus { get; set; } 
        public IList<tblCategory> CategoryName { get; set; }
    }
}

I tried to get tblCategory into tblProduct and tried to retrieve that in index page as follows:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryName.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SubCategoryId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductDescription)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StockStatus)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

But, I was not able to get through it. Could any assist me in solving this ?

Use the ViewModel for your View that will Solve your Problem::

class CommonViewModel 
{

   Model1 model1;
   Model2 model2;
}

where Model1 & Model2 are your Models aS::

public class Model1 
{
  public int ID{get;set;}
  public string Name{get;set;}
}

and Model2 like::

public class Model2 
{
  public int ID{get;set;}
  public string Name{get;set;}
}

And into your View you do it as strongly Typed::

@model ProjectName.CommonViewModel

Here you can use the Model1 as:: you can pass the Model to Another Partial View As well and can use in the same view as well::

@Html.Partial("_PartialViewName",Model.Model1)

@foreach (var item in Model.Model2)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryName.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SubCategoryId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductDescription)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StockStatus)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}