Relationships and navigation properties - WilStead/VueCoreFramework GitHub Wiki

VueCoreFramework can recognize navigation properties on your Entity Framework entity classes and determine the relationship types automatically, generating appropriate links and controls for users to manage those relationships as needed.

Ignoring navigation properties

You must apply the JsonIgnoreAttribute on all navigation properties in your entity classes. If you do not, VueCoreFramework will attempt to set their value to a placeholder string used by its internal ViewModels whenever data for that entity type is saved.

One-to-one Relationships

The simplest relationship type, these require almost no extra work on your part. VueCoreFramework will automatically recognize foreign keys and inverse properties (provided you have set them up correctly for Entity Framework). Note that although Entity Framework can automatically create foreign keys and inverse properties for your relationships from just one navigation property in most cases, VueCoreFramework requires explicitly defined foreign keys and inverse navigation properties in order to function properly.

Non-collection navigation properties are represented in tables and on forms by the ToString representation of the associated object (or "[None]" for null values on non-required relationships). This means you should implement a human-readable ToString override for entity classes involved in one-to-one or one-to-many relationships (otherwise the default implementation, which shows the type name, would be shown).

On details forms for viewing and editing a single item (row), one-to-one relationships will present controls which allow adding a new object, editing the current object (which opens its own details view), or deleting the current object (if it's not a required relationship).

It is recommended that you hide the inverse navigation property (with the HiddenAttribute) on the "child" side of a one-to-one relationship, if one class involved is not accessible from your menu directly, and only through its "parent" object. This isn't required by VueCoreFramework, but since the "child" object will always be accessed through its "parent," accessing the "parent" from the "child" will always be possible by going back or cancelling the current operation, which makes a visible inverse navigation property redundant, and can make for a confusing history chain for users.

Many-to-one Relationships

The same caveats are one-to-one relationships apply here: explicitly define your foreign key and inverse navigation properties, override ToString, and consider hiding the inverse navigation property on a "child" class.

In addition to the controls for one-to-one relationships, many-to-one relationships allow selecting their object from the list of all current objects of that type.

One-to-many Relationships

It is recommended that you use the HideInTable option of the HiddenAttribute (see here for more information) on collection navigation properties. VueCoreFramework displays these in tables as "[None]" for an empty collection, and "[...]" for a non-empty collection, neither of which is very user-friendly.

On the detail data form for viewing and editing, the user will have a "View/Edit" link which opens a data table listing the items in the collection, allows creating new items or removing them from the collection, and lets the user open the details view for each item.

Many-to-many Relationships

Entity Framework currently requires you to explicitly define your many-to-many join tables (see here for more info). VueCoreFramework is able to detect and correctly interpret these as "invisible" relationship bridges between the two associated entity classes. In other words: instead of showing the many-to-many join class itself, VueCoreFramework will link from one side of the many-to-many relationship directly to the collection of entities on the other side of the relationship.

In order for this automatic behavior to work, your many-to-many join table can contain only a single pair of navigation properties and their associated foreign keys. If you add any additional (mapped) properties to the class, VueCoreFramework will not recognize it as a many-to-many join table, and will instead treat it as an entity type unto itself, which happens to have with one-to-many relationships with two other entity types. This is likely to be the desired behavior in such a situation anyhow, since otherwise those properties would never be exposed on data tables or forms.

Note also that any entity class which contains only two navigation properties will be treated by VueCoreFramework as a many-to-many join table, so if this isn't your intention, you should add at least one other property to prevent this behavior (the property must be mapped by Entity Framework to count for this purpose; a non-mapped property will not affect the class' identification by VueCoreFramework as a many-to-many join table).

Like one-to-many relationships, it is advised to hide these navigation properties in data tables since they will display only placeholder text distinguished only by whether or not the collection is empty.

In detail forms many-to-many relationships will have a "View/Edit" link which opens a split-view data table. On top will be listed all the objects of the entity type on the other side of the relationship, and on the bottom will be those contained in the current item's collection. "Add" and "Remove" controls will allow moving items into and out of the collection. Items can also be created from scratch or deleted completely using the data table's usual controls for doing so, and their individual details can be viewed an edited as well.