How to display more than one model in a view in MVC

Home > Search > How-to
  by

Let's say you have two tables in SQL, table1 and table2, and you want to display data from both tables in a view, such as www.example.com/Home/Details/1.

table1  
id 1
column1 foo

 

table2  
id 1
column1 bar

 


MODEL

In /Models/Example.cs, create a public class that contains both table1 and table2. In this example, the public class that contains table1 and table2 is named BothTables. Build your project after making this change.

using System;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace www.example.com.Models
{    
    public class table1
    {
        public int id { get; set; }
        public string column1 { get; set; }
    }

    public class table2
    {
        public int id { get; set; }
        public string column1 { get; set; }
    }

    public class BothTables
    {
        public IEnumerable<table1> TableOne { get; set; }
        public IEnumerable<table2> TableTwo { get; set; }
    }

    public class example_db : DbContext
    {
        public DbSet<table1> table1 { get; set; }
        public DbSet<table2> table2 { get; set; }
    }
}

 


CONTROLLER

In /Controllers/ExampleController.cs, add the following inside of the public ActionResult Details.

  • Line 12 and 16 - Because the DBContext is named example_db in the model, use example_db in the controller.
  • Line 18 - Because the public class is named BothTables in the model, use BothTables as the new variable name.
1  using System.Data;
2  using System.Data.Entity;
3  using System.Linq;
4  using System.Net;
5  using System.Web.Mvc;
6  using www.example.com.Models;
7
8  namespace www.example.com.Controllers
9  {
10     public class ContentController : Controller
11     {
12         private example_db db = new example_db();
13
14         public ActionResult Details(int id)
15         {
16             using (var db = new example_db())
17             {
18                 var model = new BothTables()
19                 {
20                    TableOne = db.table1.Where(x => x.id.Equals(id)).ToList(),
21                    TableTwo = db.table2.Where(x => x.id.Equals(id)).ToList()
22                 };
23                 return View(model);
24             }
25          }
26     }
27  }

 

 


VIEW

Because BothTables was used in the model and view, BothTables is also used in /View/Home/Details.

@model www.example.com.Models.BothTables

@foreach (var item in Model.TableOne)
{
    @Html.DisplayFor(x => item.column1)
}

@foreach (var item in Model.TableTwo)
{
    @Html.DisplayFor(x => item.column1)
}

 


RESULT

www.example.com/Content/Details/1 will display the record from both table1 and table2 where id is 1.

 


MODEL

To insert a new record into table2 from www.example.com/Content/Details/1,  adjust /Models/Example.cs to have the following. Build your project after making this change.

public class Table2ViewModel
{
    [Required]
    public string Column1 { get; set; }
}

public class BothTables
{
    public int MyId { get; set; }
    public IEnumerable<table1> TableOne { get; set; }
    public IEnumerable<table2> TableTwo { get; set; }
    public Table2ViewModel Table2 { get; set; }
}

 


CONTROLLER

In /Controllers/ExampleController.cs, add lines 2 and 6.

var model = new BothTables()
{
    id = MyID,
    TableOne = db.table1.Where(x => x.id.Equals(id)).ToList(),
    TableTwo = db.table2.Where(x => x.id.Equals(id)).ToList(),
    Table2 = new Table2ViewModel()
};

 


VIEW

Add the following to /Views/Content/Details.cshtml.

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Table2)
    <input type="submit">
}

 

Result

 

HttpPost logic must be added to /Controllers/ExampleController.cs.

         [HttpPost]
         [ValidateAntiForgeryToken]
         public ActionResult Details(table2 TableTwo)
         {
            if (ModelState.IsValid)
            {
               db.table2.Add(TableTwo);
               db.SaveChanges();
            }
            BothTables BothTables = new BothTables();
            return View(BothTables);
         }

 

 

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments