How to: Implement Many-to-many Relationships Editing

• Mar 12, 2021
• 3 minutes to read

This document describes how to implement many-to-many relations editing in an application generated with the DevExpress Scaffolding Wizard.

The resulting application supports the addition of multiple Course objects to the Student.CoursesAttending detail collection and vice versa.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T141250.

To learn how to automatically generate an application based on the Entity Framework model using the DevExpress Scaffolding Wizard, refer to the first lesson of the Building Office-Inspired Applications tutorial.

Entity Framework Code First allows you to create a many-to-many relations by creating the relevant entities, which hold an ICollection interface on each side of the relation.

C#

public class Student {
        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public virtual ICollection<Course> CoursesAttending { get; set; }

        public Student() {
            CoursesAttending = new HashSet<Course>();
        }
    }

    public class Course {
        public int CourseId { get; set; }
        public string Title { get; set; }

        public virtual ICollection<Student> Students { get; set; }

        public Course() {
            Students = new HashSet<Student>();
        }
    }

    public class SchoolContext : DbContext {
        public DbSet<Course> Courses { get; set; }
        public DbSet<Student> Students { get; set; }
        public SchoolContext() {
        }
    }

VB.NET

Public Class Student
        Public Property StudentId() As Integer
        Public Property FirstName() As String
        Public Property LastName() As String

        Public Overridable Property CoursesAttending() As ICollection(Of Course)

        Public Sub New()
            CoursesAttending = New HashSet(Of Course)()
        End Sub
    End Class

    Public Class Course
        Public Property CourseId() As Integer
        Public Property Title() As String

        Public Overridable Property Students() As ICollection(Of Student)

        Public Sub New()
            Students = New HashSet(Of Student)()
        End Sub
    End Class

    Public Class SchoolContext
        Inherits DbContext

        Public Property Courses() As DbSet(Of Course)
        Public Property Students() As DbSet(Of Student)
        Public Sub New()
        End Sub
    End Class

Starting with v15.2, the scaffolding wizard automatically generates the code and UI for editing such relations.

Within the Common/ViewModel folder of the project you will find the AddRemoveDetailEntitiesViewModel (AddRemoveDetailEntitiesViewModel.cs file) class that contains all necessary logic to add/remove entities to/from detail collection.

• The DetailEntities collection property exposes all entities in the object detail collection.
• The SelectedEntities collection property is used for data binding and contains all items that will be removed from the detail collection when the RemoveDetailEntitiesCommand is executed.
• The AddDetailEntities method uses IDialogService to show a dialog in which a customer can select entities to add to the object detail collection.
• The RemoveDetailEntities method removes all entities that are in the SelectedEntities collection from the object detail collection.

Since AddRemoveDetailEntitiesViewModel is a POCO view model, the AddDetailEntitiesCommand and RemoveDetailEntitiesCommand commands are automatically generated at runtime and available for data binding.

In addition, there is a helper method in the SingleObjectViewModel class (SingleObjectViewModel.cs file) that allow you to create AddRemoveDetailEntitiesViewModel.

Note

If the third (‘junction’) entity is explicitly defined and consists of exactly two properties that form the primary key, the AddRemoveJunctionDetailEntitiesViewMode is generated instead of the AddRemoveDetailEntitiesViewModel. It provides the same functional.

It is now easy to create this view model in all relevant detail view models.

The Views folder contains a user control (DetailEntitiesView.xaml, DetailEntitiesView.xaml.cs files) with a GridControl displaying a list of detail entities, and a Tool Bar with command buttons bound to commands available in the AddRemoveDetailEntitiesViewModel.

The resulting application allows you to add and remove entities to/from the Student.CoursesAttending and Course.Student collections. It also supports synchronization: for example, when a specific Course is removed from the Student.CoursesAttending collection and the detail view for that Course is open, the Students list in that detail view will be refreshed.