How to Display <list> from two tables in Webgrid

Question

I want to display a with data from two tables (models) in a WebGrid. In order to display a list from a single model i do the following:

(Model)

[Key]
    public int id_Art { get; set; }

    public int id_Pro { get; set; }

    [Required]
    [StringLength(1)]
    public string tipo_Pro { get; set; }

    [Required]
    [StringLength(50)]
    public string nombre_Pro { get; set; }

    [Required]
    [StringLength(100)]
    public string descripcion_Pro { get; set; }

    public byte[] imagen_Pro { get; set; }

    [Required]
    public decimal? precio_Pro { get; set; }

    public int? estatus_Pro { get; set; }

(Controller)

public ActionResult VerArticulos(int page = 1, string sort = "nombre_Pro", string sortdir = "asc", string search = "")
    {

        //WebGridArticulos
        int pageSize = 10;
        int totalRecord = 0;
        if (page < 1) page = 1;
        int skip = (page * pageSize) - pageSize;
        var data = cargarArticulos(search, sort, sortdir, skip, pageSize, out totalRecord);
        ViewBag.TotalRows = totalRecord;
        ViewBag.Search = search;

        return View(data);
    }

public List<articulos> cargarArticulos(string search, string sort, string sortdir, int skip, int pageSize, out int totalRecord)
    {
        using (DbModel db = new DbModel())
        {
            var v = (from a in db.articulos

                     where
                        a.tipo_Pro.Contains(search) ||
                        a.nombre_Pro.Contains(search) ||
                        a.descripcion_Pro.Contains(search)
                     select a
                     );
            totalRecord = v.Count();
            v = v.OrderBy(sort + " " + sortdir);
            if (pageSize > 0)
            {
                v = v.Skip(skip).Take(pageSize);
            }
            return v.ToList();
        }
    }

(View)

@grid.Table(
                    tableStyle: "table table-responsive table-bordered",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    alternatingRowStyle: "webgrid-alternating-row",
                    rowStyle: "webgrid-row-style",
                    columns: grid.Columns( 
                        grid.Column(header: "IMAGEN", format: @<img src="data:image/jpeg;base64,@SIC.Controllers.ArticuloController.ConvertByteArrayToBase64(@item.id_Art)" alt="" height="70" width="85">),
                        grid.Column(columnName: "tipo_Pro", header: "TIPO"),
                        grid.Column(columnName: "nombre_Pro", header: "NOMBRE"),
                        grid.Column(columnName: "descripcion_Pro", header: "DESCRIPCION"),
                        grid.Column(columnName: "precio_Pro", header: "PRECIO"),
                        grid.Column(header: "⇨", format: (item) => Html.ActionLink("Ver", "Ver", new { }))
    )

I want to do the same but with data from two tables. I`ve found that i have to create a viewmodel with the data needed to use, but i can't figure out how to implement it. Thank you!

EDIT This is how i implement the model on the Webgrid (View)

@model List<SIC.articulos>
@{
    ViewBag.Title = "VerArticulos";
    var grid = new WebGrid(canPage: true, rowsPerPage: 2);
    grid.Bind(source: Model, rowCount: ViewBag.TotalRows, autoSortAndPage: false);
}

Answer 1

Bind Secound Model In To First Model. Let See In code below

public class Demo1Model
{
    public int Id { get; set; }

    public stringName{ get; set; }

    public List<Demo2Model> D2{ get; set; }}

Now In View.......Access Demo1 & Demo 2 Model at a Time.

    @model IEnumerable<Abc.Models.Demo1Model>
@foreach (var item in Model)
                                        {
@item.Name
}
now access list from demo2 model
@foreach(var item in model.D2)//D2 is object of demo2 model
{
@item.xyz//which property access as u want
}