.NET CORE MVC Master Detail Form

Question

Good Day! First time asking my own question after 20 years of programming. I usually just reference existing posts. Anyway, as I get a little older now I guess I am getting lazy. So fairly new to MVC and .NET CORE. I am using Entity Framework to an existing database. I was looking for Microsoft's recommended approach to a Master Detail Form using MVC and Entity Framework.. For example lets use a Person or Contact that has 1 to many addresses and 1 to many Roles. So the Master would be the Person and the Detail tables would be Addresses and Roles. Let's say we wanted to have those Detail Forms in tabs on a web page below the Person Details. Any existing Examples out there? I have seen a few different ways, but none from Microsoft.

Warm Regards,
Chris

Answer 1

Maybe, you should look into partial views.

https://www.c-sharpcorner.com/UploadFile/ff2f08/partial-view-in-mvc/

Also understand MVC models.

https://deviq.com/terms/kinds-of-models

https://www.dotnettricks.com/learn/mvc/understanding-viewmodel-in-aspnet-mvc

The EF persistence model object is not a viewmodel object. A single VM can have multiple VM(s) in it populated by EF model objects.

HTH

Answer 2

Hi,ChrisShoeMaker

I have seen a few different ways, but none from Microsoft.

Both Asp.net core and EF Core are from Microsoft, what do you mean about 'from Microsoft'?

Let's say we wanted to have those Detail Forms in tabs on a web page below the Person Details.

To your needs , you can use partial view or ViewComponent , then you can reuse them wherever you need them, like

@await Component.InvokeAsync("ViewComponent" })  

And a ViewModel can include multiple models, so you just need to call a viewmodel and then use the models in it, like:

public class Depot  
    {  
        public int DepotNo { get; set; }  
    }  
  
    public class Depot2  
    {  
        public int DepotNo2 { get; set; }  
    }  
  
    public class DepotViewModel     //ViewModel  
    {  
        public Depot Depot { get; set; }  
        public Depot2 Depot2 { get; set; }  
    }  

Best Regards,
Jerry Cai

---

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Master details is mostly HTML design if the database schema and navigation properties are properly configured. The following example shows how to create a nested loop in the View to render a person to roles relationship. The roles section is set to display:none. Clicking the person name toggles the role visibility.

    public class Person  
    {  
        public int PersonId { get; set; }  
        public string Name { get; set; }  
  
        public List<Role> Roles { get; set; }  
    }  
  
    public class Role  
    {  
        public int RoleId { get; set; }  
        public string Name { get; set; }  
    }  
  
    public class PersonController : Controller  
    {  
        public IActionResult Index()  
        {  
            List<Person> data = PopulateData();  
            return View(data);  
        }  
  
        private List<Person> PopulateData()  
        {  
            return new List<Person>() {  
                new Person()  
                {  
                    PersonId=1,  
                    Name ="Hello",  
                    Roles = new List<Role>(){  
                        new Role() {RoleId=1, Name="Admin"}  
                    }  
                },  
                 new Person()  
                {  
                    PersonId=2,  
                    Name ="World",  
                    Roles = new List<Role>(){  
                        new Role() {RoleId=1, Name="Admin"},  
                        new Role() {RoleId=2, Name="User"},  
                    }  
                }  
            };  
        }  
    }  

The View with a nested loop that represents the relationship is attached as the forum does not allow markup for some reason.

106200-index.txt